Kotlin：xmlを使わずにコードでUIを配置する！

どうも、ささおです。

 

今回はxmlファイルをほぼ触らずに、UIを配置します。

iOSを触っているとコード上でUIを配置ことが多く、Androidでの方法がわからなかったので調べてみました。

 

コードで配置する流れ

1, activity_main.xmlのConstraintLayoutにIDを指定する。

2, MainActivity.ktで1のConstraintLayoutを引っ張ってくる。

3, 配置するUIをインスタンス化する。

4, 3でインスタンス化したUIにサイズを指定する。

5, 2で引っ張ってきたConstraintLayoutに3,4でいじったUIを配置する。

 

1,activity_main.xmlのConstraintLayoutにIDを指定する。

デフォルトのconstraintLayoutにIDを指定します。

（ConstraintLayoutでやる理由はデフォルドがConstraintLayoutになっているからという理由以外はありません。むしろコードでの触りやすさはLinearLayoutの方があるような気がします。）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="???.???.MainActivity">

</android.support.constraint.ConstraintLayout>

 

追加したものはこちらです。

android:id="@+id/constraintLayout"

ConstraintLayoutに「constraintLayout」というIDを指定しました。

 

2, MainActivity.ktで1のConstraintLayoutを引っ張ってくる

こんな感じになります。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
    }
}

 

こちらの行を追加しました。

val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout

いつものfindViewByIdを使用して、xmlからConstraintLayoutを引っ張ります。

 

3, 配置するUIをインスタンス化する

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
        val button = Button(this)
        button.text = "sasao"
        }
}

Button(this)でインスタンス化することができます。

今回はわかりやすいようにtextを入力しました。”sasao”としましたが、なんでも大丈夫です！

 

4, 3でインスタンス化したUIにサイズを指定する

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
        val button = Button(this)
        button.text = "sasao"
        val buttonLayoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        button.layoutParams = buttonLayoutParams
    }
}

追加したのは２行です。

val buttonLayoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
button.layoutParams = buttonLayoutParams

まず１行目でサイズを作成しています。

LinearLayout.LayoutParams(width: ,height: )

となっていてwidhtもheightもWRAP_CONTENTにしているので文字に合わせて大きさが変わります！

 

２行目では、１行目で作成したサイズをインスタンス化したbuttonに指定しています。

 

5, 2で引っ張ってきたConstraintLayoutに3,4でいじったUIを配置する

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
        val button = Button(this)
        button.text = "sasao"
        val buttonLayoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        button.layoutParams = buttonLayoutParams
        constraintLayout.addView(button)
    }
}

最後に、２で引っ張ってきたconstraintLayoutにbuttonを配置します。

配置するためにはaddView()を使用します。

 

このようになります。

以上です！！