0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Android app development: Layout&Design

Last updated at Posted at 2018-10-08

似たような記事を以前にも書いたが、今回はもう少し内容を掘り下げていく。

始めに断っておくが、レイアウトのデザインはかなり奥深いので、配置を弄って色々試す事を強くお勧めする。
あと、見た目がごちゃごちゃしてると使いづらくなっちゃうので、慣れて来たらUX/UIを意識したり、分かりやすい画面を目指そう。

まず、Androidのレイアウトには
・レイアウトを並べて表示するコンテナ系のレイアウト
・Activityから色々操作できる固有の役割を持った機能型のレイアウト
がある。

新しくレイアウトを作る際には基本的にコンテナ系のレイアウトが最低1つは必要。
※ただ、後々includeに使うとか、特定の用途の一部で使うものとかは例外はある。

で、どのレイアウトだろうが、マストで必要な物がある。

activity_main.xml
android:layout_width="match_parent"
android:layout_height="match_parent"

layout_width: レイアウトの幅
layout_height: レイアウトの高さ
幅と高さは基本的にはどこでもマスト。ただ、ConstraintLayoutという上下左右に対しての幅を指定する考え方のレイアウトもあるにはある。

widthheightには
wrap_content:そのレイアウト若しくはViewの表示に必要な領域だけを割く
match_parent:そのレイアウトを親Layoutの大きさ一杯まで表示する。なので、例えば親Layoutが一つの状態でwidthとheightにこれを指定すると画面一杯まで表示される。
指定値: 100dpとか指定した値に設定する事もできる。ただまぁ、画面サイズがバラバラのAndroidでサイズを指定値にすると画面が崩れるリスクは増すので、気をつけて使おう。指定単位はdp

#コンテナ系レイアウトの代表とも言えるLinearLayout
このレイアウトは縦一列もしくは一列に表示するタイプのレイアウト。

activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

</LinearLayout>

LinearLayoutを用いたレイアウト構成のサンプル。
レイアウトの縦横はorientationで指定する。縦はvertical、横はhorizontalを指定する。
この中でのandroid:idactivityfragmentから特定のレイアウトを操作したい時に使う。

また、コンテナ系レイアウトをコンテナ系レイアウトの中に作っちゃいけないという決まりはないので

activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
  
  <LinearLayout
     android:id="@+id/title_container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="horizontal" />

     <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
   </LinearLayout>
</LinearLayout>

の様に書く事もできる。これは例えばレイアウトのベースはLinearLayoutで作りつつも、表示内容をセクションの様に分けたいと言った場合に有用。(というよりこうしないとあんま綺麗なレイアウト作れない

あとは

android:layout_weight="1"

の様に、weightを指定したviewを親view内でどういう比率で表示するかみたいなもの。
これを指定すると、親view内での表示領域を他のviewの領域を除き、使える領域を全部使って表示してくれる。
だから

activity_main.xml
<LinearLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
  
  <LinearLayout
     android:id="@+id/title_container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="horizontal" />

     <TextView
        android:id="@+id/nameView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
          android:id="@+id/enterNameHere"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1" />
    <Button
          android:id="@+id/go"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
   </LinearLayout>
</LinearLayout>

みたいにすると、nameViewgoを表示する領域は残しつつも、残りの領域は全部enterNameHereが使えるレイアウトが作れる。widthが0dpなのは、領域は比率で決まるから。wrap_contentで必要な領域だけ確保する訳でもなく、match_parentで領域を埋め尽くす訳でもない為。
また、weightは一つのレイアウトだけじゃなく複数指定も可能。その場合他のレイアウトのweightを2とか3にして調整する。

#主にFragment用のFrameLayout
FrameLayoutは上に被せて使う様なコンテナ系のレイアウト。主にFragment向けのレイアウトを作るときに使う。

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

基本的に覆い被せて使うタイプと想像してもらうとわかりやすくなると思う。
でもFrameLayoutってレイアウトの整形機能は無いから、そのまま直でレイアウトパーツ置いちゃうと配置が崩れちゃう。
それを楽に解決するのがLinearLayoutをFrameLayout直下に置くやり方で、これだったらFrameLayoutをベースにしつつ、配置を整えたレイアウトが作れる
※Android Studioには注意されるから、理想のやり方では無いのかもしれない

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中身"
            android:layout_gravity="center"/>
    </LinearLayout>
</FrameLayout>

本当はこれ以外にもコンテナ系レイアウト一杯あるし、まだandroid:layout_gravityとかandroid:gravityとかのレイアウト整形術とか色々あるのだが、全部書くと疲れるので、一旦これで。必要に応じて追記予定。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?