1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

株式会社やどかりAdvent Calendar 2022

Day 17

同一Activityで異なるレイアウトを表示させたい

Posted at

概要

作成中の家計簿アプリで実装した内容を共有します!

実装内容

同じActivityに遷移するのだけど、押すボタンによって違うレイアウトで表示させたいなーと思いました。
output.gif

実装方法

方法としてたくさんあるとは思いますが、私は遷移の際に以下の方法で実装しました!

①表示切り替えをするためのFlagを作成する
②遷移の際にFlagに値を渡す
③取得した値に沿って表示切り替えをする

以下、コードです。
※ポイントのコードのみ挙げます。

①表示切り替のためのFlag作成

BundleKey.kt
object BundleKey {
    const val SPEND_INCOME_FLG = "SPEND_INCOME_FLG"
}

②遷移の際にFlagに値を渡す

MainActivity.ky
val spendBtn: TextView = findViewById(R.id.spending_btn)
        spendBtn.setOnClickListener {
            val intent = Intent(applicationContext, ContentsActivity::class.java).apply {
                putExtra(BundleKey.SPEND_INCOME_FLG, 0)
                putExtra(BundleKey.BOTTOM_NAVI_FLG, true)
            }
            startActivity(intent)
        }

        val incomeBtn: TextView = findViewById(R.id.income_btn)
        incomeBtn.setOnClickListener {
            val intent = Intent(applicationContext, ContentsActivity::class.java).apply {
                putExtra(BundleKey.SPEND_INCOME_FLG, 1)
                putExtra(BundleKey.BOTTOM_NAVI_FLG, false)
            }
            startActivity(intent)
        }

③取得した値に沿って表示切り替えをする

ContentsActivity.kt
judge = intent?.getBooleanExtra(BundleKey.BOTTOM_NAVI_FLG, true) ?: false

binding.judge = judge

binding.apply {

            judge?.let {
                if (it) {
                    bottomNavigation.inflateMenu(R.menu.bottom_navigation_menu_spend)
                    bottomNavigation.setBackgroundColor(getColor(R.color.white))
                    bottomNavigation.itemTextAppearanceActive =
                        R.style.Widget_BottomNavigationView_spend
                    bottomNavigation.itemTextAppearanceInactive =
                        R.style.Widget_BottomNavigationView_spend
                } else {
                    bottomNavigation.inflateMenu(R.menu.bottom_navigation_menu_income)
                    bottomNavigation.setBackgroundColor(getColor(R.color.black))
                    bottomNavigation.itemTextAppearanceActive =
                        R.style.Widget_BottomNavigationView_income
                    bottomNavigation.itemTextAppearanceInactive =
                        R.style.Widget_BottomNavigationView_income
                }
            }
        }
activity_contents.xml
<layout>

    <data>

        <variable
            name="judge"
            type="Boolean" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/main_contents"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
            app:layout_constraintStart_toStartOf="parent"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:elevation="0dp"
            app:itemTextColor="@{judge == true ? @color/black : @color/white}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/main_contents" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

最後に

少し端折り過ぎたかもしれませんが、何か質問などあればコメントお願いします!
他にもいい方法があるよ!って方は教えていただけると嬉しいです!!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?