LoginSignup
5

More than 3 years have passed since last update.

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

Posted at

はじめに

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

Support different screen sizes

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

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

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

【Android】いまさら聞けないdp入門

Androidのレイアウト👶初心者向けざっくり理解

課題

スクリーンショット 2019-05-05 14.39.06.png

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

スクリーンショット 2019-05-05 14.40.05.png

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

スクリーンショット 2019-05-05 14.40.57.png

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

解決方法

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

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

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

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

 <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

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

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

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

ConstraintLayout

スクリーンショット 2019-05-05 14.02.03.png

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

まとめ

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

スクリーンショット 2019-05-05 14.47.18.png

スクリーンショット 2019-05-05 14.47.34.png

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

参考リンク

How to scale an Image in ImageView to keep the aspect ratio

Support different screen sizes

ConstraintLayout

Androidの新しいLayout、ConstraintLayoutことはじめ

XMLで始めるConstraintLayout

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
5