Android Kotlin 横スワイプによる画面遷移について

Question

前提・実現したいこと

Kotlinを使用してAndroidアプリの作成を行っています。
このアプリには4つの機能(画面)があり、それぞれの機能を横スワイプで切り替えられるようにしたいと思っています。
また各機能の中でアクティビティの移動、画面遷移を行うものがあります。
横スワイプによる画面移動はviewPajerとフラグメントを利用して機能のトップ画面については作成することが出来ました。

現在困っている点は、機能内でアクティビティを移動するとスワイプで移動ができなくなることです。viewPagerで設定しているフラグメントではなくなるのでそれ自体は当然だとは思うのですが、どういったものを利用すれば意図した動きが可能になるでしょうか？
そもそもそういったことは可能なのでしょうか？

試したこと

アクティビティではなくフラグメントに移動するものも試しましたが遷移が上手くいかないようです。
子フラグメントやnavigationなるものが利用できるのかな？と考えたりしたのですがよく分かりませんでした。
同一のフラグメントで中身の表示・非表示も考えたのですが、機能によっては大きく画面が変わるので少し厳しい気もします。

補足情報（FW/ツールのバージョンなど）

Android Studio 4.2.2
Android 11.0(API 30)

###コード
画面遷移に関係する部分のみ記載します。

フラグメント1とアクティビティ1が機能1、フラグメント2は機能2に該当します。
アプリ起動時にフラグメント1が表示され、アクティビティ1に遷移する前はフラグメント2と横スワイプで移動できます。しかしアクティビティ1に遷移するとフラグメント2にスワイプで遷移できなくなります。

本質問はアクティビティ1に遷移したあともフラグメント2にスワイプで遷移できるようにするにはどういった改善が必要か、ということです。

アダプター

class SamplePagerAdapter(fm: FragmentManager, private val fragmentList: List<Fragment>) :
FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    // 表示するフラグメントを制御する
    override fun getItem(position: Int): Fragment {
        return fragmentList[position]
    }

    // viewPagerにセットするコンテンツ(フラグメントリスト)のサイズ
    override fun getCount(): Int {
        return fragmentList.size
    }
}

MainActivity

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

    val fragmentList = arrayListOf<Fragment>(
        view1Fragment(),
        view2Fragment(),
    )

    /// adapterのインスタンス生成
    val adapter = SamplePagerAdapter(supportFragmentManager, fragmentList)
    /// adapterをセット
    viewPager.adapter = adapter
    }

    fun moving(view: View){
        val intent = Intent(this,Activity1::class.java)
        startActivity(intent)
        overridePendingTransition(0,0)
    }
}

MainActivity レイアウト

<RelativeLayout 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" 
    android:background="#f9f0e2">

<androidx.viewpager.widget.ViewPager 
    android:id="@+id/viewPager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>

fragment1

class view1Fragment : Fragment() {
    override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
    ): View? {
    // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_view1, container, false)
    }
}

fragment1レイアウト

<androidx.constraintlayout.widget.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">

<Button 
    android:id="@+id/first_button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:onClick="moving"/>

</androidx.constraintlayout.widget.ConstraintLayout>

fragment2

class view2Fragment : Fragment() {
    override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
    ): View? {
    // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_view2, container, false)

        return view
    }
}

フラグメント2のレイアウトとアクティビティ1については何も無い単なる画面ということで割愛します。

Comments

[jimbe]

言葉だけで希望する仕様や現状を説明されてもとても分かり難いです。
可能な限り現状を再現できるコードをご提示の上、どの部分での操作でどうしたいのにどうなってしまうのかという具体的なレベルにご質問を修正願えますか。

[RgrayLemon]

ご指摘ありがとうございます。
画面遷移に関わると思われる部分のコードを追記いたしました。
スマホからの投稿になってしまったため、改行等が十分にできておらず見づらく申し訳ないですが、よろしくお願いします。

[jimbe]

ちなみに、機能1のアクティビティ1というは、なぜアクティビティなのでしょうか。

[RgrayLemon]

機能１を作成時まだAndroidアプリ作成の知識がほとんどなく、fragmentへの画面遷移やfindViewByIdの利用方法が分からなかったためアクティビティで作成しました。
アクティビティでなければならない理由はないです。

[jimbe]

なるほど。
実際フラグメントにしようとされたそうですし、そのほうがよさそうですね。

それで、
> アクティビティではなくフラグメントに移動するものも試しましたが遷移が上手くいかない
とありますが、どのように上手く行かなかったのでしょう。

[RgrayLemon]

移動先のフラグメントをフラグメント3とします。
ボタンを押してフラグメントを移動させたかったので、fragmentManager.beginTransactionを利用してreplaceで移動させようと考えました。
その時、replace(R.id.viewPager,fragment3)としていたのですが、ボタンを押しても移動先のfragmentの画面が表示されませんでした。
何も表示されていないもののスクロールは可能で、フラグメント1、2に相当する分左右にスワイプできたのですが、フラグメント2についてもフラグメント3に移動後は画面が表示されませんでした。

[jimbe]

全体の構造や操作としましては(本来は4機能/画面の所をテストのため2機能分に減らしたとして)、MainActivity 上でViewPager により機能1の Fragment1 と機能2の Fragment2 を左右スワイプで切り替えが出来るようにし、 Fragment1 にはボタンが有ってそれを押すと機能1の次の画面 Fragment3 が(Fragment1を置き換えて)表示される、と。
その状態で左右スワイプすると、Fragment3 と Fragment2 が切り替えられることになる、という感じでしょうか。

[RgrayLemon]

そういうことです！
別アクティビティ/フラグメントへ遷移後も隣の機能にスワイプで切り替えができるようにしたいということです。

[jimbe]

もうしわけありません、私の kotlin 能力の不足の所為で、"kotlinらしい" サンプルが出来ません。

少し試して出来た方法としましては、最初 SamplePagerAdapter を fragment1 と fragment2 の配列で作ってアダプタとして ViewPager に渡していますが、moving ボタンが押された時には新しい SamplePagerAdapter を fragment3 と fragment2 の配列で作って ViewPager に渡す方法です。
(この場合、fragment2 は共通ですので、別々に作らず共有したほうがよさそうです。)
ただこの方法だと、例えば機能が4つあってそれぞれが機能1のように複数のフラグメントを切り替えられるようだったりすると組み合わせ爆発になってしまうので、少なくとも良い方法では無いでしょうねorz

それで、ちゃんとするとすれば、fragment1 と fragment3 を載せるためのフラグメント(例えば) fragment4 をつくり、ViewPager には fragment4 と fragment2 を設定してスワイプで切り替えるようにし、fragment4 の中で fragment1 と fragment3 を切り替えられるようにするのが形としては良いように思います。
そして、それなら fragment4 の中に 1 と 3 のどちらを表示するのかを ViewModel で管理するようにして…等と考えましたら、kotlin "らしく" 書くにはどうなるんだ・・・となってしまいました。

Answer 1

結構恥ずかしいコードですが、一応動いたので載せておきます。
なお、build.gradle の dependencies に以下の追加が必要でした。

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
implementation "androidx.fragment:fragment-ktx:1.3.5"

ViewPager には fragment4 と fragment2 を載せてスワイプさせ、 fragment4 に fragment1 か fragment3 を載せます。
ViewModel の func1_mode が 1 なら fragment1, 3 なら fragment3 を表示するとし、fragment1 のボタンが押されたら Fragment1 が func1_mode を 3 にしています。

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProviders
import kotlinx.android.synthetic.main.activity_main.*

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

    var viewModel = ViewModelProviders.of(this).get(SampleViewModel::class.java)

    val fragmentList = arrayListOf<Fragment>(
      Fragment4(),
      Fragment2(),
    )

    /// adapterのインスタンス生成
    val adapter = SamplePagerAdapter(supportFragmentManager, fragmentList) /// adapterをセット
    viewPager.adapter = adapter
  }
}

SamplePagerAdapter.kt

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter

class SamplePagerAdapter(fm: FragmentManager, private val fragmentList: List<Fragment>) :
  FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

  // 表示するフラグメントを制御する
  override fun getItem(position: Int): Fragment {
    return fragmentList[position]
  }

  // viewPagerにセットするコンテンツ(フラグメントリスト)のサイズ
  override fun getCount(): Int {
    return fragmentList.size
  }
}

SampleViewModel.kt

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class SampleViewModel : ViewModel() {
  val func1_mode = MutableLiveData<Int>(1)

  val func1_text = MutableLiveData<String>("dummy")
}

Fragment1.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.activityViewModels
import kotlinx.android.synthetic.main.fragment1.*

class Fragment1 : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment1, container, false)
  }

  private val viewModel: SampleViewModel by activityViewModels()

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    first_button.setOnClickListener {
      viewModel.func1_mode.value = 3
    }
    viewModel.func1_text.observe(viewLifecycleOwner) { text ->
      func1_text.text = text
    }
  }
}

Fragment2.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class Fragment2 : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment2, container, false)
  }
}

Fragment3.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.activityViewModels
import kotlinx.android.synthetic.main.fragment3.*

class Fragment3 : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment3, container, false)
  }

  private val viewModel: SampleViewModel by activityViewModels()

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    second_button.setOnClickListener {
      viewModel.func1_text.value = func1_edit.text.toString()
      viewModel.func1_mode.value = 1
    }
  }
}

Fragment4.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.activityViewModels

class Fragment4 : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment4, container, false)
  }

  private val model: SampleViewModel by activityViewModels()
  private var fragment1 = Fragment1()
  private var fragment3 = Fragment3()

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    model.func1_mode.observe(viewLifecycleOwner) { mode ->
      var f:Fragment = fragment1
      if(mode != 1) f = fragment3
      childFragmentManager.beginTransaction().replace(R.id.function1_container, f).commit()
    }
  }
}

以下レイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity"
    android:background="#f9f0e2">

  <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".Fragment1">

  <Button
      android:id="@+id/first_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="to Fragment3"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/func1_text" />

  <TextView
      android:id="@+id/func1_text"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:layout_marginEnd="16dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment2">
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:text="Fragment2" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment3.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".Fragment3">

  <EditText
      android:id="@+id/func1_edit"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:layout_marginEnd="16dp"
      android:ems="10"
      android:text="Fragment3"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
  <Button
      android:id="@+id/second_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="set Text"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/func1_edit" />
  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Input Text:"
      app:layout_constraintStart_toStartOf="@id/func1_edit"
      app:layout_constraintBottom_toTopOf="@id/func1_edit" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment4.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/function1_container"
    tools:context=".Fragment4">
</androidx.constraintlayout.widget.ConstraintLayout>

Comments

[RgrayLemon]

回答ありがとうございます！
記載のコードを実行したところ、期待していた動きが得られました！

ちなみにフラグメント1とフラグメント3の間で値の受け渡しは可能なのでしょうか？

[jimbe]

ViewModel が アプリケーションを通じて存在し、各画面間のデータを保持できます。
というより、モデル(ViewModel) が各データを保持し、ビュー(フラグメント等)がその中から必要なデータに接触して表示する…という設計(?)がありまして、その為に ViewModel というものが作られています。(MVVM や MVC といったキーワードで検索すると色々なモノが出てくると思います。)

フラグメント間で、どこかで値を設定したら他の所に表示する、というようなことであれば、ViewModel に”保存する変数”を作り、あるフラグメントでそこに値を設定し、表示するフラグメントのほうではその変数にオブザーバとして”その変数の値を表示するコード”を登録しておけば、変数に値が設定されたら表示するコードが呼ばれますので、別途同期を気にする必要はありません。

[jimbe]

fragment1 と fragment3 のコードとレイアウトおよび SampleVewModel を修正してみました。
fragment3 でテキストを入力して ViewModel に保存し mode を 1 にすると、fragment1 に戻って、 ViewModel に保存した文字列が表示されます。
スワイプ等に影響はないはずです。

[RgrayLemon]

加筆修正ありがとうございます！
調べてもviewmodelによるデータ受け渡しの理解が及ばず悩んでいたので大変助かりました！

おかげさまで無事目的物を作成することが出来ました！
大変お手数お掛けいたしました。

[jimbe]

ViewModel 等を真面目に(理論的に?)やろうとすると、(ソフトウェア全般的に考察される)デザインパターンを、数ある OS の一つである Android でどう実装するか(したか)というようなレベルまで話が進み易いので、それなりに大変かと思います。
が、プログラムのあちこちでそれぞれにデータ保持したりそれを渡し合ったりするのではなく、データの管理や(表示以外の)処理を担当するオブジェクトを置いて、表示側はそのオブジェクトを通じてデータを得る…という形式は(カタチや言葉は違っても)使われていると思います。
お時間がある時にでも書籍やネットでお調べになられては如何でしょうか。
おつかれさまでした。