Androidアプリ開発 (kotlin) - 動的Layout編その1

モチベーション：kotlinに慣れるためとAndroidアプリ作成のリハビリ

動的にViewを追加して表示したい

目的は，コード上で生成したTextViewを任意の個数表示する．

達成したいのは以下の画面．

f:id:soyukke:20190523235642p:plain:w250 — 目標のレイアウト

Layoutの記述

Android Studioでは，画面のViewのレイアウトをGUIで作り上げることができる．静的な画面であればそれでよいが，動的にViewを変化させたい場合というのは多々あると思う．

xmlによる記述

静的な画面のレイアウトはxmlに記述しておける．GUIで設定することで自動でxmlに書き込まれていく．ここではViewに必要なパラメータである座標やtext，配置などをあらかじめ記述されており，コードからViewを読み込むことができる．

コードによる記述

xmlに記述していなくてもコード上でViewを作成できる．その場合，フォントサイズやテキスト，配置情報なども適切に設定する必要がある．

LinearLayout の活用

Viewを配置するための枠のようなものを使用する．LinearLayoutにはViewを追加していくことができる．

今回はLinearLayoutのみを扱うが，ほかにもRelativeLayoutなどがある．

LinearLayoutのパラメータ

LinearLayoutには2種類ある．HorizontalかVerticalか．

Horizontal: Viewを追加すると右に追加されていく
Vertical: Viewを追加すると下へ追加されていく

以下はVerticalのLinearLayoutのパラメータの例である．

val layout = LinearLayout(this)
layout.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
// 中心に配置
layout.gravity = Gravity.CENTER
// Verticalに設定する
layout.orientation = LinearLayout.VERTICAL

ContentViewにセットする

layoutに必要なパラメータを設定したが，このままではアプリにlayoutが表示されない．

layoutを表示するために以下の一文が必要．

setContentView(layout)

LinearLayoutにViewを追加する

layout.addView(Viewオブジェクト)とすることで，任意のViewをlayoutに追加することができる．

配置はlayout.orientationに従って決まる．今回はVERTICALなので，追加したViewは下へ追加されていく．

具体例 - TextViewを任意の個数つくって表示する

TexitViewを作成する関数

まずはTextViewを動的に作るために，TextView作成用の関数を作る．

引数でString型の変数textを受け取って，そのtextを表示するTextViewを戻り値にする．

fun get_textView(text:String):TextView {
    val textView = TextView(this)
    val dp = resources.displayMetrics.density
    textView.textSize = 16 * dp
    textView.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
    textView.text = text
    return textView
}

コード全体

package com.hoge.testlayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Gravity
import android.view.ViewGroup
import android.widget.LinearLayout
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    fun get_textView(text : String):TextView {
        val textView = TextView(this)
        val dp = resources.displayMetrics.density
        textView.textSize = 16 * dp
        textView.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        textView.text = text
        return textView
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val layout = LinearLayout(this)
        layout.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        layout.gravity = Gravity.CENTER
        layout.orientation = LinearLayout.VERTICAL
        setContentView(layout)
        
        for (i in 0..5) {
            val text = "for ${i}"
            // layoutにTextViewを追加していく
            layout.addView(get_textView(text))
        }
    }
}

これで目標の画面を作ることができる．