Android_chap_08_fix.indd

Transcription

1

2

3 7

4

5 を知っていなければ アプリの設計ができないからです 第 ８ もちろん しっかりとしたAndroidアプリを作りたいならば 早いうちからこのガイドラ 章 インを読んでおくべきです 英語なので読めない とは言わず Googleの翻訳 Ｕ Ｉ 機能などを使ってでもいいので 頭に入れておくようにしましょう の 基 礎 知 識 もし 内容がよくわからなくても ここにある図だけでも見ておくとよいでしょう これら はすべて ガイドラインに沿ったAndroidアプリのデザインになっていますので 実際 に設計するときに役に立ちます 少なくとも目を通しておかなければならないのは 以下の3つです Design Style 図3 Design Patterns 図4 Design Building Blocks 図5 図3 ガイドラインの Style 9

6 図4 ガイドラインの Patterns 図5 ガイドラインの Building Blocks iphoneアプリと Android アプリのインターフェースの比較 Androidアプリだけでなく もちろんiPhoneアプリにもガイドラインはあります iphoneアプリのほうが厳しくて アプリを公開するときには ガイドラインに準拠して いるかという審査があります iphoneアプリの場合は 少しでもガイドラインから逸脱 リジェクト reject とは アプリが公開 されずに差し戻されること リジェクト されたら 公開するには審査時にNG だったところを修正して 再度申請し なければなりません した部分があれば リジェクトされてアプリストアで公開することができません それではAndroidのほうは審査がないのかと 安心してはいけません Android アプリのGoogle Playでの公開は 事後審査になります 公開時の審査は基本的 にはありませんが 公開後に ウェブの検索エンジンと同様 Google Playでキー 10

7 11

8

9 Twitterアプリのインターフェース 第 ８ 章 Ｕ Ｉ の 基 礎 知 識 図10 AndroidのTwitterアプリ 図11 AndroidのTwitterアプリのメニュー画面 図12 iphoneのtwitterアプリ Twitterアプリのインターフェースの相違点を 以下に書いてみましょう MEMO 13

10 Foursquareアプリのインターフェース 図13 Android のFoursquareアプリ 図14 Android のFoursquareアプリ 展開時 図15 iphoneのfoursquareアプリ 図16 iphoneのfoursquareアプリ 展開時 Foursquareアプリのインターフェースの相違点を 以下に書いてみましょう MEMO 14

11 15

12 16

13 17

14 18

15 8-2 Graphical Layout XML Button TextText Field IME RadioGroup

16 20

17 A C F D E B G 21

18 A B C D E F G A B 22

19 A 23

20 24

21

22 26

23 27

24

25 第 1. Text Fieldsの種類 ８ 章 このサンプルには Ｕ Ｉ の 基 礎 知 識 お名前 お電話番号 パスワード の4つのテキストフィールドがあり それぞれ Text Fields フォルダーの中から選 んで配置しますが 個々の Input Type は用途に合わせたものを選んでくるのが よいでしょう 図19 では In put Typeの値が tex t address に なっている また それぞれのテキストフィールドをタップすると IME 日本語入力 のモードが 変わることを確認しましょう 図20 日本語入力モード 図21 英語 Eメール 入力モード 29

26 図22 数字入力モード ここでは IMEに Simeji を使って います 自動で表示させるためには IME側にも制御する仕組みが必要と なります は出ておらず Shiftキーなどを押して 切り替えると出てくる場合が多いので すが が必須なため あらかじめ表示されて いるほうが親切です 図23 英語入力モード こうすることで Android OSが最適なIME 日本語入力 キーボードを自動で 表示することができます たとえば Plain Text のときは通常の日本語入力キーボードですが E-ma il にしたときは英数字キーボードで も表示されているのがわかります また電話番号は Input Typeを Phone にすれば数字キーボードになりま す パスワードも Password にすると 入力済みの文字が で表示され 見え なくなるようになっています すべて同じ Plain Text にしても間違いではないのですが もし自分が入力す る立場になったときのことを考えると メールアドレスを入力したいときに 日本語キー ボードが表示されていたら 英数字キーボードに切り替えるのは手間ですよね Input Typeで表示させるキーボードを切り分けることによって よりユーザーが 使いやすいインターフェースを表現できるのです 2.ラジオグループ ラジオボタンは ひとまとまりのグループにおいて 1つの項目しか選択できない状 態でなければなりません そうするためには Form Widgets の中の RadioGroup を選ぶべきです RadioButton を選んでしまうと それぞれが単独で選べることになってしまいます ので 注意しましょう 図24 30

27 31

28 32

29 8-3 <Button> <TextView> <ImageView> wrap_content match_parent drawable <EditText> android:layout_width android:layout_height Java Button btn = new Button(this); btn.setbackgroundcolor(color.green); setcontentview(btn); 33

30 34

31

32 36

33 activity_main.xml <TextView /> activity_main.xml <TextView android:text="xml " /> 37

34 activity_main.xml <TextView android:text="xml " android:textcolor="#ff0000" android:textsize="22sp" /> 38

35 39

36 40

37 <TextView android:text="xml " android:textcolor="#ff0000" android:textsize="22sp" /> 41

38 Button TextView ImageView EditText CheckBox RadioButton ProgressBar SeekBar 42

39 43

40 <Button android:text="button" /> 44

41 wrap_content match_parent <Button android:text=" " /> 45

42 <Button android:layout_width="match_parent" android:text="button" /> <Button android:layout_height="match_parent" android:text="button" /> 46

43 <ImageView /> 47

44 48

45 <EditText android:layout_width="match_parent" /> 49

46 <EditText android:ems="10" /> <EditText android:ems="10" android:inputtype="text" /> 50

47 <EditText android:ems="10" android:inputtype="textpassword" /> None Text textautocorrect textautocomplete textmultiline texturi text address textpassword textvisiblepassword number phone 51

48 <EditText android:layout_width="match_parent" android:hint="e " android:inputtype="text address" /> 52

49 53

50 8-4 RelativeLayout LinearLayout android:layout_weight android:orientation android:layout_above android:layout_below android:layout_centerhorizontal android:layout_centervertical android:layout_alignparentleft android:layout_alignparentright android:layout_alignparenttop android:layout_alignparentbottom

51 RelativeLayout LinearLayout 55

52 56

53 8-4-2 activity_main.xml <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="${packagename}.${activityclass}" > <ImageView /> </RelativeLayout> activity_main.xml <ImageView android:layout_centerinparent="true" /> 57

54 A B C D E F G H 58

55 android:layout_centerinparent android:layout_centerhorizontal android:layout_centervertical android:layout_alignparentleft android:layout_alignparentright android:layout_alignparenttop android:layout_alignparentbottom

56 activity_main.xml <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="${packagename}.${activityclass}" > <ImageView /> <TextView android:text=" " /> </RelativeLayout> activity_main.xml <ImageView /> 60

57 activity_main.xml <TextView android:text=" " /> activity_main.xml <ImageView android:layout_centerinparent="true" /> 61

58 activity_main.xml <ImageView android:layout_centerinparent="true" /> <TextView android:text=" " /> <TextView android:text=" " /> android:layout_above android:layout_below android:layout_toleftof android:layout_torightof android:layout_alignleft android:layout_alignright android:layout_aligntop android:layout_alignbottom 62

59 activity_main.xml <ImageView android:layout_centerinparent="true" /> <TextView android:text=" " /> <TextView android:text=" " /> activity_main.xml <ImageView android:layout_centerinparent="true" /> <TextView android:text=" " android:layout_centerhorizontal="true" /> <TextView android:text=" " android:layout_centerhorizontal="true" /> 63

60 activity_main.xml <ImageView android:layout_centerinparent="true" /> <TextView android:text=" " /> <TextView android:text=" " /> 64

61 65

62 66

63 67

64 8-4-4 horizontal vertical 68

65 activity_main.xml <LinearLayout xmlns:android=" android" xmlns:tools=" android:layout_width="match_parent" android:orientation="horizontal" > <TextView android:text=" " /> <Button android:text=" " /> </LinearLayout> 69

66 activity_main.xml <Button android:text=" 1" /> <Button android:text=" 2" /> <Button android:text=" 3" /> <Button android:text=" 4" /> <Button android:text=" 5" /> activity_main.xml 5 android:orientation="vertical" 70

67 activity_main.xml <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:text="a" /> <Button android:text="b" /> <Button android:text="c" /> </LinearLayout> 71

68 Button <Button android:layout_width="0dp" android:layout_weight="1" android:text="a" /> ABC 124 <Button android:layout_width="0dp" android:layout_weight="1" android:text="a" /> <Button android:layout_width="0dp" android:layout_weight="2" android:text="b" /> <Button android:layout_width="0dp" android:layout_weight="4" android:text="c" /> 72

69 73

70 AC BC 13 <Button android:layout_width="match_parent" android:text="a" /> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:text="b" /> <Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="3" android:text="c" /> <Button android:layout_width="match_parent" android:text="d" /> 74

71 8-4-5 android:gravity android:layout_gravity 4 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="xxxxxx" > <Button android:text="a" /> <Button android:text="b" /> <Button android:text="c" /> <Button android:text="d" /> </LinearLayout> 75

72 top bottom left right center_vertica center_hotizontal center 76

73 B TextView android:layout_width="match_parent" <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="right" > <Button android:text="a" /> <TextView android:layout_width="match_parent" android:text=" " /> <Button android:text="c" /> <Button android:text="d" /> </LinearLayout> 77

74 TextView android:gravity="right" <TextView android:layout_width="match_parent" android:gravity="right" android:text=" " /> 78

75 4 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:text="a" /> <Button android:text="b" /> <Button android:text="c" /> <Button android:text="d" /> </LinearLayout> 79

76 android:layout_gravity <Button android:layout_gravity="right" android:text="b" /> top bottom left right center_vertical center_hotizontal center 80

77 81

78 82

79 83

80 8-5 values strings.xml colors.xml styles.xml android:layout_margin android:padding 84

81

82 #f00 #f00 #f00 86

83 #c00 strings.xml colors.xml styles.xml 87

84 88

85 8-5-2 string.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">uibasic5</string> <string name="hello_world">hello world!</string> </resources> activity_main.xml <TextView /> 89

86 values-ja/string.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">ui 5</string> <string name="hello_world"> </string> </resources> 90

87 91

88 values-ja values-en values-fr values-es values-zh_cn values-zh_tw values-ko 92

89

90 activity_main.xml <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView /> <TextView /> <TextView /> <TextView /> <TextView /> <TextView /> <TextView /> <TextView /> </LinearLayout> 94

91 values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">xml - </string> <string name="animal"> </string> <string name="animal_text"> \n \n \n \n </string> <string name="pet"> </string> <string name="pet_text"> \n \n \n \n \n </string> <string name="plant"> </string> <string name="plant_text"> \n \n \n \n \n </string> <string name="meat"> </string> <string name="meat_text"> \n \n \n \n \n </string> </resources> 95

92 TextView android:textsize="16sp" android:textstyle="bold" TextView android:textcolor="#fff" android:background="#b81c22" 96

93 TextView <TextView android:textsize="16sp" android:textstyle="bold" android:textcolor="#fff" android:background="#b81c22" /> 97

94 A C B A activity_main.xml <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp" android:orientation="vertical"> </LinearLayout> 98

95 activity_main.xml <TextView android:textsize="16sp" android:textstyle="bold" android:textcolor="#fff" android:background="#b81c22" android:padding="10dp" /> activity_main.xml <TextView android:textsize="16sp" android:textstyle="bold" android:textcolor="#fff" android:background="#b81c22" android:padding="10dp" android:layout_marginbottom="5dp" /> <TextView android:layout_marginbottom="10dp" /> 99

96 100

97 activity_main.xml <ScrollView xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_margin="10dp" android:orientation="vertical"> </LinearLayout> </ScrollView> 101

98 102

99 values/colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="keycolor">#b81c22</color> <color name="keycolor_text">#fff</color> </resources> activity_main.xml 103

100 8-5-4 activity_main.xml <TextView android:textsize="16sp" android:textstyle="bold" android:padding="10dp" android:layout_marginbottom="5dp" /> <TextView android:layout_marginbottom="10dp" /> values/styles.xml <resoueces> <style name="head"> </style> </resoueces> 104

101 activity_main.xml <TextView /> activity_main.xml styles.xml <item name="android:layout_width">wrap_content</item> activity_main.xml <TextView /> values/styles.xml <resoueces> <style name="head"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textsize">16sp</item> <item name="android:textstyle">bold</item> <item <item <item name="android:padding">10dp</item> <item name="android:layout_marginbottom">5dp</item> </style> </resoueces> 105

102 106

103 107