【Android】レイアウト ~ 入門編 ~

 ■ はじめに

 * UIの基本を学ぶ。
 * 以下の動画を見てみるといいかも。

http://dotinstall.com/lessons/basic_android_layout_v2/32202

■ レイアウトの色

色を決める参考として、以下のサイトを使用するといいかも

https://material.io/resources/color/#!/?view.left=0&view.right=0

■ レイアウト変更

1)[app]-[res]-[layout] 内の対象ファイルをクリック
2)右上の「Code」or「Split」でレイアウトのXMLを表示する
 ⇒ 直接触らって変更する

■ 用語

 * View(ビュー) : レイアウトを構成する部品(コントロール)のこと

主なビュー

+ TextView  : テキスト(文字列)を表示
+ EditView  : テキスト(文字列)を入力させる
+ Button    : ボタン
+ ImageView : 画像を表示

View Group(ビュー グループ)

以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2014/12/29/001203

 ■ レイアウトに関わる属性

サイズ

* android:layout_heigt  : 高さ
* android:layout_weight : 幅

余白(マージン)

* android:layout_margin  : 外側の余白(マージン)
* android:padding        : 内側の余白(マージン)

 寄せる

* android:gravity        : Viewの中身 を寄せたい場合に指定する
* android:layout_gravity : View自体 を親要素(View Group)に対して寄せたい場合に指定する

 参考文献
http://techbooster.org/android/application/8000/
http://kenkenppa.seesaa.net/article/256638800.html

 ■ 単位

http://chariderpato.blogspot.jp/2011/10/chapter10-dp-sp-px.html
http://y-anz-m.blogspot.jp/2010/05/androiddimension.html

に記載。

 dp

 * dp(density-independent pixels。密度非依存ピクセル)
 * XMLレイアウト(画面の距離)では、dpでサイズ指定(もしくは「wrap_content」「fill_parent」を使う)

http://qiita.com/nein37/items/0a92556a80c6c14503b2 http://tatete.blogspot.jp/2012/03/android-dp.html sp

 * sp(scaled pixel)
 * 文字サイズを指定する場合に使用

関連記事

レイアウト ~ 基本編 / View Group ~
https://dk521123.hatenablog.com/entry/2014/12/29/001203
画面コンポーネント / Button
https://dk521123.hatenablog.com/entry/2020/08/08/000000
画面コンポーネント / ImageView
https://dk521123.hatenablog.com/entry/2020/09/20/000000
画面コンポーネント / include ~ 画面を動的に切り替える ~
https://dk521123.hatenablog.com/entry/2020/08/07/000000
画面コンポーネント / RecyclerView ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/07/21/000000
画面コンポーネント / RecyclerView ~ スワイプして項目削除 ~
https://dk521123.hatenablog.com/entry/2020/08/21/000000
画面コンポーネント / FloatingActionButton
https://dk521123.hatenablog.com/entry/2020/07/03/000000
画面コンポーネント / TabLayout
https://dk521123.hatenablog.com/entry/2020/08/18/000000
画面コンポーネント / Menu ~ オプションメニュー ~
https://dk521123.hatenablog.com/entry/2013/10/04/234613
画面コンポーネント / Menu ~ コンテキストメニュー
https://dk521123.hatenablog.com/entry/2018/08/30/200300
画面コンポーネント / ViewPager
https://dk521123.hatenablog.com/entry/2019/09/28/020307
画面コンポーネント / ViewPager2
https://dk521123.hatenablog.com/entry/2019/09/30/020307
画面コンポーネント / ListView ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2013/10/10/005010
画面コンポーネント / ListView ~ Realm データを表示 ~
https://dk521123.hatenablog.com/entry/2018/09/02/130212
画面コンポーネント / RadioButton etc ~ 選択肢 ~
https://dk521123.hatenablog.com/entry/2013/10/08/000037
画面コンポーネント / EditText RatingBar etc ~ 入力 ~
https://dk521123.hatenablog.com/entry/2020/08/20/000000
画面コンポーネント / Fragment
https://dk521123.hatenablog.com/entry/2020/09/27/000000