動的にレイアウトを動的に作成したのですが、結果が思うようにならないのでご教授をお願いします。

Question

いつもお世話になります。androidの勉強をしています。
ボタンを押したあと、赤い画面がボタンの下に出るように作成したのですが、実際は重なる感じで出力されました。
どうしてなのか原因がわからないのでご教授をお願いします。

//MainActivity.kt

package com.example.kou.myguidynamiclayout01

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.widget.RelativeLayout
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        val inflater  = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val layout = findViewById<RelativeLayout>(R.id.layout_for_dynamicLayout)

        btn.setOnClickListener({view -> layout.removeAllViews(); inflater.inflate(R.layout.dynamic, layout);})
    }
}

//activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.kou.myguidynamiclayout01.MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button">
    </Button>

    <RelativeLayout
        android:id="@+id/layout_for_dynamicLayout"
        android:layout_width="368dp"
        android:layout_height="0dp"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="102dp"></RelativeLayout>

</android.support.constraint.ConstraintLayout>

//dynamic.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="173dp"
    android:background="#FF8888"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="173dp"
        android:text="これは動的に作成されたレイアウトです。" />

</LinearLayout>

Answer 1

activity_main.xmlの以下の内容をこのように書き換えてはどうでしょう

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.kou.myguidynamiclayout01.MainActivity">

<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.kou.myguidynamiclayout01.MainActivity">

つまりは、ConstraintLayoutをLinearLayoutに変更しただけです。
ConstraintLayoutは制約をつけるとマテリアルデザインのように調整をしてくれるもので（認識が間違っていたらご指摘をお願いします。）、今回は簡単に縦に並べるだけですので、LinearLayoutを使うのが適切でしょう。

Comments

[you555]

ありがとうございます。やってみます。

Answer 2

activity_main.xmlで作成したレイアウトに問題があります。ConstraintLayoutとは、コンポーネントにConstraint（直訳すると「制約」）を設定することで位置決めするレイアウトです。しかし、このXMLで配置されているコンポーネントには、Constraintが一切設定されていません。そうしたレイアウトで実行すると、コンポーネントが左上に寄ってしまいます。それが問題とされている状態でしょう。

制約を設定するためには、デザインエディター上でコンポーネントをクリックし、四辺に出る丸印を左クリックし、ドラッグして親レイアウトや他のコンポーネントと接続することが基本です。

これを参考に、activity_main.xmlのレイアウトを編集してみましょう。

Comments

[you555]

ありがとうございます。やってみます。