Fragmentが重なってしまう

kotlin
1
2    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
3        super.onViewCreated(view, savedInstanceState)
4
5        //コンポーネントの取得
6        val tagSelectSpinner = view.findViewById<Spinner>(R.id.tagSelect)
7        val button= view.findViewById<Button>(R.id.buttn)
8
9        //Fragmentの取得
10        val fragment = Fragment()
11
12        //Spinnerにセット(Tag)
13        val tagList = arrayListOf("a","b","c")
14        val adapter = context?.let { ArrayAdapter(it,android.R.layout.simple_spinner_item,tagList) }
15        tagSelectSpinner.adapter = adapter
16
17
18        //Spinnerを作成し値を設定
19        val spin = view.findViewById<Spinner>(R.id.aLine)
20        val ar = arrayListOf("aaa")
21        val adap = context?.let { ArrayAdapter(it,android.R.layout.simple_spinner_item,ar) }
22        spin.adapter = adap
23
24
25
26        //ボタンをクリック
27        button.setOnClickListener {
28            replaceFragment(fragment)
29        }
30    }
31
32
33    private fun replaceFragment(fragment:Fragment){
34        val fragmanager = fragmentManager?.beginTransaction()
35        fragmanager?.replace(R.id.contentsArea,fragment)?.commit()
36    }
37
38}
39

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".FragmentSearch">
8
9    <!-- Title -->
10    <TextView
11        android:id="@+id/title"
12        android:layout_width="match_parent"
13        android:layout_height="wrap_content"
14        app:layout_constraintEnd_toEndOf="parent"
15        app:layout_constraintStart_toStartOf="parent"
16        app:layout_constraintTop_toTopOf="parent"
17        android:background="@color/teal_200"
18        android:paddingLeft="20dp"
19        android:paddingTop="5dp"
20        android:paddingBottom="5dp"
21        android:text="@string/app_name"
22        android:textSize="40dp" />
23
24
25    <!-- 絞り込み検索 -->
26    <!-- Tagの選択 -->
27    <LinearLayout
28        android:id="@+id/tagSelectArea"
29        android:layout_width="match_parent"
30        android:layout_height="wrap_content"
31        android:layout_marginTop="15dp"
32        app:layout_constraintTop_toBottomOf="@+id/title"
33        app:layout_constraintLeft_toLeftOf="parent"
34        app:layout_constraintRight_toRightOf="parent"
35        android:gravity="center"
36        android:orientation="horizontal">
37
38        <TextView
39            android:layout_width="wrap_content"
40            android:layout_height="wrap_content"
41            android:layout_marginLeft="25dp"
42            android:layout_weight="1"
43            android:gravity="center"
44            android:text="@string/tagText"/>
45
46        <!-- SelectButton -->
47        <Spinner
48            android:id="@+id/tagSelect"
49            android:layout_width="wrap_content"
50            android:layout_height="wrap_content"
51            android:layout_weight="1"
52            android:background="@drawable/tag_border"
53            android:textAlignment="center" />
54
55        <Button
56            android:id="@+id/button"
57            android:layout_width="wrap_content"
58            android:layout_height="wrap_content"
59            android:layout_marginRight="25dp"
60            android:layout_marginLeft="25dp"
61            android:backgroundTint="@color/tagItemColor"
62            android:text="@string/selectButton"
63            android:layout_weight="1" />
64    </LinearLayout>
65
66
67
68   <!-- ここを別のフラグメントに切り替えたい -->
69    <FrameLayout
70        android:id="@+id/contentsArea"
71        android:layout_width="match_parent"
72        android:layout_height="wrap_content"
73        app:layout_constraintTop_toBottomOf="@+id/tagSelectArea"
74        app:layout_constraintLeft_toLeftOf="parent"
75        app:layout_constraintRight_toRightOf="parent">
76
77        <LinearLayout
78            android:layout_width="match_parent"
79            android:layout_height="wrap_content"
80            android:orientation="vertical"
81            android:layout_marginTop="10dp" >
82
83            <TextView
84                android:id="@+id/peSearchText"
85                android:layout_width="match_parent"
86                android:layout_height="wrap_content"
87                android:text="@string/peSearchTitle"
88                android:gravity="center"
89                android:layout_marginTop="10dp" />
90
91            <ScrollView
92                android:layout_width="match_parent"
93                android:layout_height="wrap_content"
94                android:layout_marginTop="15dp">
95
96                <!-- Listの作成 -->
97                <LinearLayout
98                    android:layout_width="match_parent"
99                    android:layout_height="wrap_content"
100                    android:orientation="vertical">
101                    <LinearLayout
102                        android:layout_width="match_parent"
103                        android:layout_height="wrap_content"
104                        android:background="@drawable/border_bottom"
105                        android:orientation="horizontal">
106
107                        <TextView
108                            android:layout_width="wrap_content"
109                            android:layout_height="60dp"
110                            android:layout_marginLeft="25dp"
111                            android:gravity="center"
112                            android:text="@string/a" />
113
114                        <Spinner
115                            android:id="@+id/aLine"
116                            android:layout_width="match_parent"
117                            android:layout_height="60dp"
118                            android:layout_marginRight="25dp"
119                            android:textAlignment="center"/>
120                    </LinearLayout>
121
122
123                </LinearLayout>
124            </ScrollView>
125        </LinearLayout>
126    </FrameLayout>

上記のコードの<FraneLayout>部分を別のフラグメントにreplaceしたいのですがなぜか<FraneLayout>部分が残り、その上に重なってフラグメントが貼り付けられます。

replace(R.id.contentsArea,fragment)からreplace(R.id.tagSelectArea,fragment)に変更するとうまく動作します。

過去の質問を調べてもわからなかったので詳しい方がいらっしゃればぜひ教えてください。
お願いします

jimbe

2022/03/24 14:37 編集

現状 FrameLayout に入っているモノもフラグメントにして、 FrameLayout の中には何も定義されていない状態にしたほうが良いように思います。ちなみに Fragment (のレイアウト)はどうなっているでしょうか。

jimbe

2022/03/24 14:47

kotlin のコードは何のコードでしょうか。実験したいのですがプロジェクトをどう構成すれば出来ますでしょうか。

queque

2022/03/24 15:46

プロジェクトは、 main_activityからfragment1.kt(xmlは上記のコード)に遷移して、fragment2.k(xmlはテキストを表示しているだけのシンプルなコード)に遷移です

jimbe

2022/03/24 17:01

ご提示されている kotlin のコードも Fragment1 ということですね。ただ、 replace している fragment は Fragment2 クラスではなく Fragment クラスとなっていますが？コード等は出来るだけコピペで現象が再現できる状態でご提示ください。問題によっては、ご質問された方が問題があると思われている以外の箇所が原因の場合もあります。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく、 replace は Fragment を置き換えますので、 Fragment では無い部分はそのまま残っているのではないでしょうか。
( id:tagSelectArea には出来たとされていますが、こちらではボタンの右側に表示されましたので、こちらでは出来ていません。)
id:contentsArea の中にある部分をフラグメントとして抜き出して初期表示時にそのフラグメントを設定しておき、ボタンを押したらそれを置き換えるようにするのが妥当と思います。

MainActivity.kt

kotlin
1import androidx.appcompat.app.AppCompatActivity
2import android.os.Bundle
3
4class MainActivity : AppCompatActivity() {
5  override fun onCreate(savedInstanceState: Bundle?) {
6    super.onCreate(savedInstanceState)
7    setContentView(R.layout.activity_main)
8
9    supportFragmentManager.beginTransaction()
10      .replace(R.id.main_container, FragmentSearch())
11      .commit();
12  }
13}

res/layout/activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".MainActivity"
8    android:id="@+id/main_container"/>

FragmentSearch.kt

kotlin
1import android.os.Bundle
2import android.view.View
3import android.widget.ArrayAdapter
4import android.widget.Button
5import android.widget.Spinner
6import androidx.fragment.app.Fragment
7
8class FragmentSearch : Fragment(R.layout.search_fragment) {
9  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
10    super.onViewCreated(view, savedInstanceState)
11
12    //Spinnerにセット(Tag)
13    val tagSelectSpinner = view.findViewById<Spinner>(R.id.tagSelect)
14    tagSelectSpinner.adapter = ArrayAdapter(requireContext(), android.R.layout.simple_spinner_item, arrayListOf("a","b","c"))
15
16    replaceFragment(AFragment())
17
18    val button= view.findViewById<Button>(R.id.button)
19    button.setOnClickListener {
20      replaceFragment(BFragment())
21    }
22  }
23
24  private fun replaceFragment(fragment:Fragment){
25    childFragmentManager.beginTransaction()
26      .replace(R.id.contentsArea,fragment)
27      .commit()
28  }
29}

res/layout/search_fragment.xml
(※ spinner に設定してあった drawable はどんな内容か分からなかったため消しています)

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".FragmentSearch">
8
9  <!-- Title -->
10  <TextView
11      android:id="@+id/title"
12      android:layout_width="match_parent"
13      android:layout_height="wrap_content"
14      app:layout_constraintEnd_toEndOf="parent"
15      app:layout_constraintStart_toStartOf="parent"
16      app:layout_constraintTop_toTopOf="parent"
17      android:background="@color/teal_200"
18      android:paddingLeft="20dp"
19      android:paddingTop="5dp"
20      android:paddingBottom="5dp"
21      android:text="@string/app_name"
22      android:textSize="40dp" />
23
24  <!-- 絞り込み検索 -->
25  <!-- Tagの選択 -->
26  <LinearLayout
27      android:id="@+id/tagSelectArea"
28      android:layout_width="match_parent"
29      android:layout_height="wrap_content"
30      android:layout_marginTop="15dp"
31      app:layout_constraintTop_toBottomOf="@+id/title"
32      app:layout_constraintLeft_toLeftOf="parent"
33      app:layout_constraintRight_toRightOf="parent"
34      android:gravity="center"
35      android:orientation="horizontal">
36
37    <TextView
38        android:layout_width="wrap_content"
39        android:layout_height="wrap_content"
40        android:layout_marginLeft="25dp"
41        android:gravity="center"
42        android:text="@string/tagText"/>
43
44    <!-- SelectButton -->
45    <Spinner
46        android:id="@+id/tagSelect"
47        android:layout_width="wrap_content"
48        android:layout_height="wrap_content"
49
50        android:textAlignment="center" />
51
52    <Button
53        android:id="@+id/button"
54        android:layout_width="wrap_content"
55        android:layout_height="wrap_content"
56        android:layout_marginRight="25dp"
57        android:layout_marginLeft="25dp"
58        android:backgroundTint="@color/tagItemColor"
59        android:text="@string/selectButton" />
60  </LinearLayout>
61
62  <!-- ここを別のフラグメントに切り替えたい -->
63  <FrameLayout
64      android:id="@+id/contentsArea"
65      android:layout_width="match_parent"
66      android:layout_height="0dp"
67      app:layout_constraintBottom_toBottomOf="parent"
68      app:layout_constraintLeft_toLeftOf="parent"
69      app:layout_constraintRight_toRightOf="parent"
70      app:layout_constraintTop_toBottomOf="@+id/tagSelectArea" />
71
72</androidx.constraintlayout.widget.ConstraintLayout>

AFragment.kt

kotlin
1import android.os.Bundle
2import android.view.View
3import android.widget.ArrayAdapter
4import android.widget.Spinner
5import androidx.fragment.app.Fragment
6
7class AFragment : Fragment(R.layout.fragment_a) {
8  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
9    super.onViewCreated(view, savedInstanceState)
10
11    val spin = view.findViewById<Spinner>(R.id.aLine)
12    spin.adapter = ArrayAdapter(requireContext(), android.R.layout.simple_spinner_item, arrayListOf("aaa"))
13  }
14}

res/layout/fragment_a.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<FrameLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".AFragment">
8
9  <LinearLayout
10      android:layout_width="match_parent"
11      android:layout_height="wrap_content"
12      android:orientation="vertical"
13      android:layout_marginTop="10dp" >
14
15    <TextView
16        android:id="@+id/peSearchText"
17        android:layout_width="match_parent"
18        android:layout_height="wrap_content"
19        android:text="peSearchTitle"
20        android:gravity="center"
21        android:layout_marginTop="10dp" />
22
23    <ScrollView
24        android:layout_width="match_parent"
25        android:layout_height="wrap_content"
26        android:layout_marginTop="15dp">
27
28      <!-- Listの作成 -->
29      <LinearLayout
30          android:layout_width="match_parent"
31          android:layout_height="wrap_content"
32          android:orientation="vertical">
33        <LinearLayout
34            android:layout_width="match_parent"
35            android:layout_height="wrap_content"
36
37            android:orientation="horizontal">
38
39          <TextView
40              android:layout_width="wrap_content"
41              android:layout_height="60dp"
42              android:layout_marginLeft="25dp"
43              android:gravity="center"
44              android:text="a" />
45
46          <Spinner
47              android:id="@+id/aLine"
48              android:layout_width="match_parent"
49              android:layout_height="60dp"
50              android:layout_marginRight="25dp"
51              android:textAlignment="center"/>
52        </LinearLayout>
53
54      </LinearLayout>
55    </ScrollView>
56  </LinearLayout>
57</FrameLayout>

BFragment.kt

kotlin
1import androidx.fragment.app.Fragment
2
3class BFragment : Fragment(R.layout.fragment_b) {
4}

res/layout/fragment_b.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<FrameLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".BFragment">
8
9  <TextView
10      android:layout_width="match_parent"
11      android:layout_height="match_parent"
12      android:text="FRAGMENT B"
13      android:textSize="40dp"/>
14
15</FrameLayout>