LoginSignup
2
3

More than 5 years have passed since last update.

android アプリ開発での様々な端末サイズに対応するためのレイアウト作成方法

Posted at

androidアプリ開発でのレイアウト(動的作成方法)

androidアプリを開発する際のレイアウト作成方法で、全てをmatch_parentとwrap_contentで示せれば幸いですが、そうでないときの対処法?的なものを考えましたので記します。

動的にレイアウト配置

結論からしてこれです↑
xmlでdp指定してレイアウト配置するとどうしてもズレが生じてしまうので、そこで動的にレイアウトを配置して端末サイズに対応しようという策を取りました。

xmlでの表記

main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.watnow.campusdiary.Calendar.CalendarActivity">

        <LinearLayout
            android:id="@+id/top_bar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"/>

</android.support.design.widget.CoordinatorLayout>

少々冗長な記述がありますが、それはさておき、大元のレイアウトとなるLinearLayoutを配置しておきます。

では、実際にkotlinのソースコード上でレイアウトを作成していきたいと思います。
今回は、端末の画面サイズを取得して、それに応じてカレンダーの上のバーの部分を作成します。

動的レイアウト配置のためのクラスを新たに作成します。
クラス名はTopBarMakerとしておきます

TopBarMaker.kt
class TopBarMaker(activity: Activity) {

    private val TAG: String = "TimeTableLayoutMaker"

    private val MON: TextView = TextView(activity)
    private val TUE: TextView = TextView(activity)
    private val WED: TextView = TextView(activity)
    private val THU: TextView = TextView(activity)
    private val FRI: TextView = TextView(activity)
    private val SUT: TextView = TextView(activity)
    private val date: Array<String> = arrayOf("月", "火", "水", "木", "金", "土")
    private val screen = activity.windowManager.defaultDisplay
    private var screenWidth: Int = 1080 // デフォルト設定をしておきます

    // スクリーンサイズを取得します
    fun setScreenWidth() {
        val point: Point = Point()
        this.screen.getSize(point)
        screenWidth = point.x
    }

    // 全てのTextViewに日付をセットします
    fun setDateInTextView() {
        MON.text = date[0]
        TUE.text = date[1]
        WED.text = date[2]
        THU.text = date[3]
        FRI.text = date[4]
        SUT.text = date[5]
    }

    // 作成したTextViewを引数で受けるレイアウトに追加します
    fun setViewInLayout(layout: LinearLayout) {
        setScreenWidth()
        setDateInTextView()
        val eachWidth = screenWidth / date.size
        Log.d(TAG, eachWidth.toString())
        layout.addView(MON, eachWidth, 50)
        layout.addView(TUE, eachWidth, 50)
        layout.addView(WED, eachWidth, 50)
        layout.addView(THU, eachWidth, 50)
        layout.addView(FRI, eachWidth, 50)
        layout.addView(SUT, eachWidth, 50)
    }
}

このように、新たにクラスを作成しました。
コンストラクタ引数にactivityを受け、それを元に端末依存の画面サイズを取得します。

取得した画面サイズをTextViewの数で割れば、均等にViewを配置することができるようになります。

実際に、MainActivity側で使ってみた感じが以下の通りです。

MainActivity.kt
class MainActivity : AppCompatActivity() {

    private val TAG: String = "TimeTableActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.time_table_activity)
        Log.d(TAG, "onCreate: starting")

        // setup Layout Top Bar
        val linearLayout: LinearLayout = findViewById(R.id.top_bar)
        val layoutMaker: TopBarMaker = TopBarMaker(this)
        layoutMaker.setViewInLayout(linearLayout)
    }
}

以上の通り、今回は動的にレイアウトを作成する方法を記しました。
andoridアプリ開発において、膨大な数の端末のサイズにレイアウトを合わせるのは重要なこととなりますので、参考にしていただけますと幸いです。
また、違った方法や改善点などございましたらお教えください。

2
3
2

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
2
3