画面サイズの違う機種に対応したレイアウトを作る

#はじめに

Androidでアプリを作っていて、異なる画面サイズに対応したレイアウトを作ろうとしたのですが、具体的なやり方がわからず調べてみました。

[Support different screen sizes](https://developer.android.com/training/multiscreen/screensizes.html?hl=JA#flexible-layout)

情報は得られたのですが、うまく実装方法が理解ができず、実装ができなくて詰まってしまったので自分なりの解決策を描いてみようと思います


※あくまでWidgetとLayoutsなどの配置の話ですのでdpなどのお話はいたしません。

dpから知りたいという方のために自分が参考にしたリンクを貼っておきます

[【Android】いまさら聞けないdp入門](https://qiita.com/nein37/items/0a92556a80c6c14503b2)

[Androidのレイアウト👶初心者向けざっくり理解](https://qiita.com/mii-chang/items/ee965c1e8826d4e59414)


#課題
![スクリーンショット 2019-05-05 14.39.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/7ad08e46-a250-d12a-58ce-4942b9597d2a.png)

このようなレイアウトがあったとします
このレイアウトは1080x1920(420dpi)をターゲットに作っているので、同じスマホ系列なら違和感ないレイアウトですが、

![スクリーンショット 2019-05-05 14.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/cc2e1ca2-62dc-aae2-2860-779c46574e2b.png)


タブレットなどに変更すると

![スクリーンショット 2019-05-05 14.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/2b819994-dcfc-464b-6f1c-e69d79a8fe5c.png)

このようになってしまいます


#解決方法


###Widgetを画面に合わせたサイズにさせる

サイズが変わらないのは特定の数値で指定してしまってるためです

最初にlayout_widhtとlayout_heightの値を0dp(match_constraint)に設定、```app:layout_constraintWidth_default```と```app:layout_constraintHeight_default```を"percent"に変更して、必要な画像サイズを画面サイズに対する割合で指定します

※必要な部分以外削除しています


```xml
 <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintWidth_default= "percent"
            app:layout_constraintWidth_percent= ".8536"
            app:layout_constraintHeight_default= "percent"
            app:layout_constraintHeight_percent= ".3424"/>

```

こうしてあげることで各Widgetのサイズがタブレットに合わせたサイズに拡大されました

![スクリーンショット 2019-05-05 14.44.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/a9637ed4-7dda-d2d6-718f-612e37ca70b6.png)


※imageViewでは画像をsrcCompatに設定すると、縦横比は維持されますが場合によっては画像サイズが小さくなります
縦横比を気にしない場合はbackgroundに設定するとViewサイズ分画像が広がります


###Constraintを画面サイズに合わせた位置にする

ConstraintもWidgetサイズと同じで画面サイズに対して割合で設定します
ConstraintLayoutのbiasを使用します

[ConstraintLayout](https://developer.android.com/reference/android/support/constraint/ConstraintLayout)

![スクリーンショット 2019-05-05 14.02.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/05854b14-84e9-9710-d4fc-6098c41293cf.png)

このように具体的な数値を設定せずにbiasをかけてあげることで画面サイズに合わせた位置にWidgetが配置されます




#まとめ

この二つを設定したことによって、Landscapeやタブレットサイズに変更しても画面サイズに合わせたWidgetサイズやConstraintにすることができました

![スクリーンショット 2019-05-05 14.47.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/c59a55e8-ec36-0b3a-7c3f-dce32254e896.png)

![スクリーンショット 2019-05-05 14.47.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/811bca61-716b-65ec-7115-c09368c9615a.png)


解決はしたのですが、まだまだレイアウトへの理解ができていないので、今後より良い方法を見つけ次第追記、修正していきたいと思います
訂正やこういうのもあるなどありましたらコメントいただけますと幸いです。

#参考リンク

[How to scale an Image in ImageView to keep the aspect ratio
](https://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio)

[Support different screen sizes](https://developer.android.com/training/multiscreen/screensizes.html?hl=JA#flexible-layout)

[ConstraintLayout](https://developer.android.com/reference/android/support/constraint/ConstraintLayout)

[Androidの新しいLayout、ConstraintLayoutことはじめ](https://qiita.com/tomoima525/items/0584be581a0d3a4db8c5)

[XMLで始めるConstraintLayout](https://qiita.com/nakker1218/items/0faa8c1ab504cc4cedea)