夜子まま塾＠鹿児島
DESCRIPTION
鹿児島で行われた夜子まま塾の資料TRANSCRIPT
夜子まま塾＠鹿児島日本Androidの会神戸支部
夜子まま
13年8月27日火曜日
アジェンダ
アジェンダ
自己紹介
本プレゼンの趣旨説明
初心者向け講義
実践レイアウト
13年8月27日火曜日
自己紹介
名前 寺園 聖文
肩書 株式会社Re:Kayo-System 代表取締役社長
他 日本Androidの会神戸支部、NFCLab関西支部、 京都GDG、神戸GDG、瀬戸内デベロッパー部
マイブーム バスケ
13年8月27日火曜日
想定する対象者
Androidアプリ開発初心者
アプリの画面デザインをやっているけどAndoridははじめて
Androidならなんでも知りたいというAndroidおたく
夜子ままさんの勉強会に興味のある人
13年8月27日火曜日
13年8月27日火曜日
スマホ用の画面デザインを作ってほしいと頼まれ
このアプリの画面作ってくれる？
いやぁ私やったことないけど、おもしろそう！
13年8月27日火曜日
とりあえずPhotoshopで画面のレイアウトを作ってみたけど
うぐぐ、、
13年8月27日火曜日
今度はAndroidアプリ用に画像を切り出して
ほしいと言われた
これじゃ使えないのでアプリ用に切り出してくれる？
うーん
13年8月27日火曜日
そこでネットで調べてAndroidの開発環境を入れてみたが・・・
分からない事だらけで、問題は山積み
13年8月27日火曜日
最初にネタバレすると
13年8月27日火曜日
提出すると喜ばれるリソース一式
色(color.xml)フォントスタイル(TextStyle.xml)シェイプ(Drawable Shape ファイル)
画像(各解像度毎のPNG, ９パッチ)
アニメーション（animation ファイル)テーマ（スタイル ファイル)
文字列(strings.xml)
数値定義(dimension.xml)
レイアウト（Layoutファイル)
13年8月27日火曜日
環境構築
13年8月27日火曜日
ADT Bundleをインストール
以上
13年8月27日火曜日
ブラウザで 下記URLを開きhttp://developer.android.com/sdk/index.html
クリック
13年8月27日火曜日
ダウンロードしたファイルをインストール
ZIPなら、解凍して任意のフォルダへEXEなら実行してダイアログに従う
13年8月27日火曜日
画面作成
13年8月27日火曜日
画面作成までの手順
画面作成用のプロジェクトを作成
レイアウトファイル（画面ファイル）を編集する
実行して画面を確認
13年8月27日火曜日
プロジェクトの作成①Eclipseを起動 ② ワークスペースの選択
③ Eclipse
13年8月27日火曜日
プロジェクトの作成④メニューから
File→New→Android Application Projectを選択
13年8月27日火曜日
プロジェクトの作成
アプリ名プロジェクト名パッケージ名
⑤ひと通り入力したらNextをクリック
アプリ名を入れると、自動的に他が補完される。まずはこの初期値でも問題ない。
13年8月27日火曜日
プロジェクトの作成⑥Next→Next→Next→Finish
13年8月27日火曜日
気になる人は
10日でおぼえるAndroidアプリ開発入門教室 第2版 大型本: 424ページ出版社: 翔泳社; 第2版 (2012/10/19)
ISBN-10: 4798126306ISBN-13: 978-4798126302発売日： 2012/10/19
価格: ￥2,940
13年8月27日火曜日
プロジェクト作成完了
13年8月27日火曜日
レイアウトファイルを閉じる①タブの☓ボタンをクリック
13年8月27日火曜日
レイアウトファイルを開く① 開きたいレイアウトファイルをダブルクリック
右クリックでエディタの種類を選択できます。Android Common XML Editorが
デフォルトです。
13年8月27日火曜日
レイアウトを編集（GUI）①配置したいWidgetをクリック
②配置したい場所にドロップ
③プロパティーを編集
13年8月27日火曜日
レイアウトを編集（XML）①XML編集タブを選択
②XML属性により直接編集属性にどのようなものがあるかは憶えておかない
といけない。しかし、簡単な編集は格段にこちらが速いい。
13年8月27日火曜日
画面の確認（省略）
実機の場合は実機をUSB接続し実行
エミュレーターの場合は、事前にエミュレーターを作成しておき、実行でエミュレーターを選択
13年8月27日火曜日
実行画面
詳しくは書籍・ネット等の情報を参照してください。
13年8月27日火曜日
レイアウト
13年8月27日火曜日
最初の難関
13年8月27日火曜日
レイアウト編集
思うようにウィジェットを配置できない
レイアウトって何？
５つのレイアウトの使い分けがわからない
レイアウトの使い方でアプリのスピードが変わる
解像度、サイズの異なる端末でも崩れないレイアウト
13年8月27日火曜日
思うように配置できない理由
ViewGroup
View View View
ViewGroup ・・・Layout,ScrollView,ListView,,,
View ・・・Button,TextView,ImageView,,,
13年8月27日火曜日
レイアウトのルールに従う例えばLinearLayout（Vertical)だと
View
View
View
View
どこに置いても縦に連続で配置される。
13年8月27日火曜日
え？それじゃ単純な画面しか作れないじゃない？
13年8月27日火曜日
組み合わせて実現する
ViewGroup
View View ViewGroup
View View
レイアウトは入れ子にすることができる。
13年8月27日火曜日
レイアウトの種類
LinearLayout ・・・縦か横へ連続配置するレイアウト
RelativeLayout ・・・相対的な配置をするレイアウト
FrameLayout ・・・重ねるように配置するレイアウト
TableLayout ・・・テーブルで配置するレイアウト
GridLayout ・・・TableLayoutみたいなLinearLayout
13年8月27日火曜日
Linear Layout(Horizontal)
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /></LinearLayout>
13年8月27日火曜日
Linear Layout(Vertical)
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /></LinearLayout>
13年8月27日火曜日
RelativeLayout(Child)
愛 BaseLine
toRightOftoLeftOf
above
below
alignTop
alignBottom
alignLeft alignRight13年8月27日火曜日
RelativeLayout(Root)
alignParentRight
alignParentTopcenterInParent
alignParentLeft
centerHorizontal
centerVertical
alignParentBottom
13年8月27日火曜日
RelativeLayout(例）<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="TextView" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_toRightOf="@+id/textView1" android:text="TextView" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView1" android:layout_alignLeft="@+id/textView2" android:text="TextView" /></RelativeLayout>
13年8月27日火曜日
FrameLayout
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/a" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/b" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/c" /></FrameLayout>
13年8月27日火曜日
<TableLayout android:layout_width="match_parent" android:layout_height="match_parent" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abcdefg" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> </TableRow></TableLayout>
TableLayout
13年8月27日火曜日
GridLayout
<GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="6" > <Button android:id="@+id/button1" android:layout_column="0" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button2" android:layout_column="2" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button3" android:layout_column="3" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button4" android:layout_column="0" android:layout_row="1" android:text="Button" /> <Button android:id="@+id/button6" android:layout_column="2" android:layout_columnSpan="2" android:layout_row="1" android:layout_gravity="fill_horizontal" android:text="Button" /></GridLayout>
13年8月27日火曜日
GridLayout
（1,1）
（0,0）（1,0）（2,0）（3,0）
（0,1）
（0,2）
（0,3）
（0,4）
（1,2）
（1,3）
（1,4）
（2,1）
（2,2）
（2,3）
（2,4）
（3,1）
（3,2）
（3,3）
（3,4）
(column, row)位置の指定
範囲の指定 column_spanrow_span
row_span = 2
column_span = 2
13年8月27日火曜日
GridLayout
(column=2, row=1, column_span=2)
(column=2, row=2, column_span=2,layout_gravity=fill_horizontal)
13年8月27日火曜日
API１６から追加されたため、それ以前はSupportLibrary
を使用する必要がある。パッケージが違うので注意。(android.support.v7.widget.GridLayout)
ColumnやRowは数値を飛ばすと自動で詰められる特性がある。元LinearLayoutであることを考慮すればイメージしやすい。
GridLayout(注意点）
13年8月27日火曜日
画像
13年8月27日火曜日
高DPI端末での劣化
Original
120dpi 320dpi
13年8月27日火曜日
DPIとはdpi ( Dot Per Inch)
１インチあたりのピクセル数
1inch=2.54cm
1inch
1inch
ピクセル
ピクセル数が多いほど精細な画像表示が可能になる。
13年8月27日火曜日
高DPIの問題
50x50ピクセルの画像 300x300のピクセル領域
足りない部分は補完されるので劣化する
13年8月27日火曜日
どうすればよい？
300x300ピクセルの画像 300x300のピクセル領域
画素数の高い画像なので劣化しない。
13年8月27日火曜日
全て高解像度にすれば良い？
Original
120dpi 320dpi
300x300ピクセルの画像
低DPI端末では縮小処理が行われる。そのため、無駄に高解像度はオーバースペック。
50x50 の領域 300x300 の領域
13年8月27日火曜日
正解：DPI毎に画像を準備
DPI 端末例 シェア率
ldpi xperia10 mini, Huawei Ideos, PcketWifiS 10.3%
mdpi KindleFile,iPhone3,iPad1,iPad mini 23.2%
tvdpi Nexus7(Jerry Bean） 1.1%
hdpi Nexus7, Galaxy S, Galaxy SII, Xperia Arc 35.2%
xhdpi Galaxy Nexus, iPhone4,iPhone5, iPad3,iPad4 24.5%
xxhdpi XperiaZ, Arrows X Optimus G, Medias W、2012年冬以降の端末 5.7%
13年8月27日火曜日
DPI毎のフォルダ名
res/drawable-<dpi名>
dpi毎にフォルダを作成し、同一ファイル名のファイルを
配置する。
13年8月27日火曜日
SHAPE DRAWABLE単純な線、丸、四角等の画像もDPI毎に置くことを考えると手間がかかる。このような場合は、Shape Drawableを使うことで手間を削減できる。
13年8月27日火曜日
SHAPE DRAWABLEとはShape DrwableはXMLによって定義す
る画像です。
<shape android:shape="oval" > <solid android:color="#666666" /> <size android:height="120dp" android:width="120dp" /></shape>
13年8月27日火曜日
SHAPE DRAWABLEの配置
<ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" />
画像ファイルと区別なく使える
解像度に依存しないのでどこでもよいが、画像と同等に扱われるの
配置には注意すること
13年8月27日火曜日
SHAPE DRAWABLEの使用<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:usesLevel=["true" | "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /></shape>
android:shapeキーワード。 シェイプのタイプを定義します。有効な値は以下です。"rectangle"含んでいるビューを長方形で埋めます。これがデフォルトのシェイプです。"oval"含んでいるビューのディメンションを楕円形にフィットさせます。"line"含んでいるビューの幅で水平方向の線が広がります。このシェイプは線の幅の指定には <stroke> 要素が必要となります。"ring"同心円のシェイプです。
<solid>外形を塗りつぶす無地の色です。android:colorカラー。シェイプに適用するカラーで、16 進数の値またはカラーリソースを指定します。
<stroke>シェイプの点線の指定です。android:widthディメンション。線の厚みで、ディメンション値または ディメンションリソース を指定します。android:colorカラー。線のカラーで、16 進数の値またはカラーリソースを指定します。android:dashGapディメンション。点線間の間隔で、ディメンション値または ディメンションリソース を指定します。android:dashWidth が設定されている場合のみ有効。android:dashWidthディメンション。点線のサイズで、ディメンション値または ディメンションリソース を指定します。android:dashGap が設定されている場合のみ有効。
13年8月27日火曜日
９パッチ
このような吹き出しの画像を作る場合、文字の長さにあわせて伸縮したい。
あいう あいうえおかき
しかし、そのまま伸縮すると形状が変形する
13年8月27日火曜日
DRAW9PATCH<Adt Bundle>/sdk/tools/draw9patch
13年8月27日火曜日
伸縮位置の設定横方向に伸縮する位置
縦方向に伸縮する位置
縦方向に文字列または子Viewを表示する位置
横方向に文字列または子Viewを表示する位置
13年8月27日火曜日
9PATCHの例
あいうえおかきくけこさしすせとたちつてと
13年8月27日火曜日
実践
13年8月27日火曜日
LINE
13年8月27日火曜日
みんな大好きLINEアプリの画面をパクってみる。というハンズオン
13年8月27日火曜日
素材
実際のLINEの画面をキャプチャしたものを利用。
13年8月27日火曜日
機能の分割タイトルバー
タブバー検索バー
友達リスト
13年8月27日火曜日
タイトルバーの作成
ボタン ボタンラベル縦区切り線 縦区切り線
横区切り線
13年8月27日火曜日
PHOTO SHOP
13年8月27日火曜日
タイトルバー画像切り出しClick時
ボタン
タイトル背景 縦区切り線9patch 9patch
13年8月27日火曜日
ボタン画像の定義
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false">
<color android:color="@color/titlebar_selected_color" /> </item> <item android:state_focused="true" android:state_pressed="true">
<color android:color="@color/titlebar_selected_color" /> </item> <item android:state_focused="false" android:state_pressed="true">
<color android:color="@color/titlebar_selected_color" /> </item> <item>
<color android:color="@android:color/transparent" /> </item></selector>
ステートリストファイル
画像ファイルとして、res/drawableの下に配置
13年8月27日火曜日
ステートリストファイル<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_selected=["true" | "false"] android:state_active=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector>
android:state_pressed ・・・ 押されている状態android:state_focused ・・・ フォーカスがある状態android:state_selected ・・・ 選択している状態android:state_active ・・・ アクティブな状態android:state_checkable ・・・ チェック可能な状態
android:state_enabled ・・・ 有効な状態android:state_checked ・・・ チェックされた状態
13年8月27日火曜日
タイトルのレイアウト作成<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/title" android:orientation="horizontal" > <Button android:id="@+id/button1" style="@style/titlebar_button_text" android:layout_width="64dip" android:layout_height="match_parent" android:background="@drawable/title_button_background" android:gravity="center" android:text="編集" /> <View android:layout_width="3px" android:layout_height="match_parent" android:background="@drawable/title_separator" /> <TextView android:id="@+id/textView2" style="@style/titlebar_title_text" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="友達（５人）" /> <View android:layout_width="3px" android:layout_height="match_parent" android:background="@drawable/title_separator" /> <ImageButton android:id="@+id/button2" style="@style/titlebar_button_text" android:layout_width="64dip" android:layout_height="match_parent" android:background="@drawable/title_button_background" android:src="@drawable/add_friend" /></LinearLayout>
13年8月27日火曜日
タブバーの作成
ボタン横区切り線 新着ラベル
13年8月27日火曜日
タブバー画像切り出し
ボタン
新着ラベル
13年8月27日火曜日
新着の表示
FrameLayoutImageButton
TextView
新着
新着なし ImageButton
13年8月27日火曜日
タブバーのレイアウト作成
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/tabbar_background_color" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/friend_button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/talk_button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/timeline_unselected" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/other_unselected" /></LinearLayout>
13年8月27日火曜日
検索バーの作成
テキストボックス
13年8月27日火曜日
検索バー画像切り出し
テキストボックス
13年8月27日火曜日
検索バーのレイアウト作成
<?xml version="1.0" encoding="utf-8"?><EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/searchbox" android:ems="10" android:hint="検索" > <requestFocus /></EditText>
13年8月27日火曜日
友達リストの作成マイプロフィールヘッダ
グループヘッダ
友達ヘッダ
マイプロフィールボディー
グループボディー
友達ボディー
13年8月27日火曜日
マイプロフィールヘッダのレイアウト作成
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/RelativeLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:text="マイプロフィール" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@drawable/friend_list_expand" /> <View android:layout_width="match_parent" android:layout_height="1px" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@color/list_separator_color" /></RelativeLayout>
13年8月27日火曜日
マイプロフィールボディのレイアウト作成
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/profile" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@drawable/now_message" android:gravity="center_vertical" android:text="蓮華" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/imageView1" android:text="てらぷに" /> <include android:layout_width="match_parent" android:layout_height="1px" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" layout="@layout/list_separator" /></RelativeLayout>
13年8月27日火曜日
以下同
似たよう感じなので割愛します。
13年8月27日火曜日
レイアウトを合体<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/list_background_color" android:orientation="vertical" tools:context=".MainActivity" > <include android:layout_width="match_parent" android:layout_height="64dip" layout="@layout/taitlebar" /> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/tabbar" /> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/searchbox" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" > <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/friendlist" /> </ScrollView></LinearLayout>
13年8月27日火曜日
INCLUDE
<include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/B" />
A
B
ほっておくとレイアウトは肥大化するので機能別に作成し、必要な箇所でIncludeすると良い。
13年8月27日火曜日
残念な見た目
13年8月27日火曜日
自分で自分に駄目だし
窮屈フォントが大きすぎ
右に寄り過ぎ
フォントのスタイルが違う
画像が大きすぎる
太すぎる
13年8月27日火曜日
微調整テク（大きさの指定）layout_width
layout_height
<ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" />
much_parent - 親Viewのサイズと同じ
wrap_content - 素材のサイズと同じ
予約文字指定
数値指定（単位）
fill_parent - much_parentと同じ
設定できる値は、dp(dip)/sp/px/pt/mm/in
13年8月27日火曜日
単位についてdp (dip) - Density-independent Pixels 画面の物理的な密度に基づいた抽象的な単位。この単位は 160 dpi の画面と対応していて、160 dpi の画面で 1 dp = 1 px になる。なので、dp-pixel 比は画面密度（解像度）に応じて変化するが、必ずしも正比例するわけではない。コンパイラは "dip"、"dp" のいずれも理解できるが、"dp" という記述のほうが "sp" との対応関係がよりわかりやすい。
sp - Scale-independent Pixelsdp に似た単位だが、ユーザーが設定したフォントサイズによって自動でスケールされる。フォントサイズを指定する場合には、この単位を使うことを推奨している。よって、sp で指定したサイズは、画面密度（解像度）とユーザーが設定したフォントサイズに依存する。
pt - Pointsスクリーンの物理的サイズに基づいた 1/72 インチ。
px - Pixelsピクセル、画面の実際のピクセル数デバイスによって、1インチ当たり異なるピクセル数を持つ可能性があり、実際に表示されるサイズが変わってくるため、この単位で測ることは推奨しない。
mm - ミリメートル画面の物理的サイズに基づく。
in - インチ画面の物理的サイズに基づく。
13年8月27日火曜日
微調整テク（余白の指定）
<ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:layout_marginTop="5dip" android:layout_marginBottom="5dip" android:src="@drawable/circle" />
layout_marginLeftlayout_marginRight
layout_marginTop
layout_marginBottom
layout_marginLeft - 左の余白
layout_marginRight - 右の余白
layout_marginTop - 上の余白
layout_marginBottom - 下の余白
layout_margin - デフォルトの余白
設定できる値は、dp(dip)/sp/px/pt/mm/in
数値指定（単位）
13年8月27日火曜日
微調整テク（パディングの指定）
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="5dip" android:paddingLeft="5dip" android:paddingRight="5dip" android:paddingStart="5dip" android:paddingEnd="5dip" android:paddingTop="5dip" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /></LinearLayout>
paddingLeft/paddingStartpaddingRight/paddingEnd
paddingTop
paddingBottom
paddingLeft - 子の左に余白
paddingRight - 子の右に余白
paddingTop - 子の上に余白
paddingBottom - 子の下に余白
padding - デフォルトで子に余白
paddingStart - paddingLeftとほぼ同じ動きをするが優先順位は上。レイアウト内の向
きに応じて右と左が逆転する。
paddingEnd - paddingRightとほぼ同じ動きをするが優先順位は上。レイアウト内の向
きに応じて右と左が逆転する。
13年8月27日火曜日
微調整テク（重みの指定）
top - コンテナの上部に配置し、サイズ変更は行いません。bottom - コンテナの下部に配置し、サイズ変更は行いません。left - コンテナの左側に配置し、サイズ変更は行いません。right - コンテナの右側に配置し、サイズ変更は行いません。center_vertical - 上下中央に配置し、サイズ変更は行いません。fill_vertical - オブジェクトの高さを、コンテナのサイズに合わせます。center_horizontal - 左右中央に配置し、サイズ変更は行いません。fill_horizontal - オブジェクトの幅を、コンテナのサイズに合わせます。center - 上下左右中央に配置し、サイズ変更は行いません。fill - オブジェクトの高さ・幅を、コンテナのサイズに合わせます。clip_vertical - top/bottomの追加オプションとして、オブジェクトの上部/下部の境界をコンテナの境界に合わせます。clip_horizontal - left/rightの追加オプションとして、オブジェクトの左側/右側の境界をコンテナの境界に合わせます。
gravity - 内包する子に対して指定layout_gravity - 自分自身に対して指定
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="top">
<ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /></LinearLayout>
13年8月27日火曜日
微調整したレイアウト
13年8月27日火曜日
修正前VS修正後
13年8月27日火曜日
ソースコード
https://docs.google.com/file/d/0B2nCbQ0YSzbDN09TRkRKUVNCYVU/edit?usp=sharing
http://goo.gl/FYLMU4
FULLURL
短縮URL
ファイル名LineImageSample.zip
13年8月27日火曜日
参考資料
Y.A.M の 雑記帳 http://y-anz-m.blogspot.jp/2010/05/androiddimension.html
Android API Reference http://developer.android.com/reference/packages.html
Android Wiki http://wikiwiki.jp/android/
ソフトウェア技術ドキュメントを勝手に翻訳 https://sites.google.com/a/techdoctranslator.com/jp/
13年8月27日火曜日
告知
13年8月27日火曜日
Android NFCプログラミング完全ガイド
Android NFCプログラミング完全ガイド [大型本]株式会社 Re:Kayo-System (著)
大型本: 264ページ出版社: 翔泳社 (2013/9/13)
言語 日本語ISBN-10: 4798131709ISBN-13: 978-4798131702発売日： 2013/9/13
13年8月27日火曜日
Effective Android 第2版
Effective Android 第2版発売日 8月29日(β版)価格は1900円です
新規書下ろし内容（あくまで予定ですので変更する可能性もあります）@checkela AOSPを17倍楽しむ方法@chun_ryo Android 4.3 プライバシーポリシー AppOps を解剖する@cat_kaotaro 最新 NDK r9 の新機能を解説する@miroc007 エンジニアのためのデザイン講座 よくあるUIのカラーバランスと簡単カラー理論@keis UIのグラフィックを考える上でのコンセプトメーキングを学ぶ@shige0501 LoaderでSQLiteDBやContentProviderを読み込む@muo_jp Android 4.3 DRM の仕組みと運用（仮・テーマ変わるかも）@mhidaka Volleyで学ぶネットワークプログラミング@l_b__ Android.mkのレシピ@bols_blue Jenkinsを使ったUIテストで落とし穴に落ちない冴えたやり方@nkzn Geofencing、location APIで位置情報を活用する@95kugo Android 4.3 Automated UI testing（仮・テーマ変わるかも）@shigepon7 理系のためのなぜなにgit
@tao_gaku (未定)
薄くない薄い本！
13年8月27日火曜日