29 2月 2020

[Android Studio] Chip Groupを使用したFragment制御

by | posted in: Android Studio | 0

実行環境：Android Studio 3.6 / JAVA

前回MainActivityからSubActivityにIntentを使用した画面遷移を作りました。今回はSubActivity上に複数のFragmentを張り付けてChip GroupでこれらのFragmentを制御したいと思います。

下の動画のようなことができるようになります。

https://lifeprosper.link/biz/wp-content/uploads/2020/02/chip-fragment.webm
  • Chip Group内にChipを複数セットし、それに対応したFragmentが表示されるようになる
  • FragmentはSubActivity上にFrameLayoutのContainerとしてセットされた部分に表示される。

Chip Groupは複数のChipをグループ化し、そのグループの中でどれか一つのChipがオン状態となるようにできる。実装には表示させたいXMLにサンプルコードをコピーする前に、パレットのChip Groupがダウンロード済み状態にしておかないとダメ。下図のように「下向き矢印」がパレットのChip Groupに表示されていなければ大丈夫。

また、実装する際には以下をインポートすることも忘れずに。

import com.google.android.material.chip.Chip;

Fragmentの実装には、Fragment Managerを使用する。今回はSubActivityからFragmentを制御するので、SubActivityの各Chipのリスナーに以下のように実装しました。FragmentはKokyuFragmentとCosmoFragmentの2つがあり、これを対応したChipが押されるたびにくるくると挿げ替える形です。このため、fragmentTransaction.replaceを使用しています。なお、Fragmentの表示先はactivity_sub.xmlに定義したLayoutのcontainer1に表示されるようにしてあります。

Chip chipKokyu = findViewById(R.id.chip_kokyu);
chipKokyu.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.addToBackStack(null);
        fragmentTransaction.replace(R.id.container1, new KokyuFragment());
        fragmentTransaction.commit();
    }
});

各Fragment.javaでは、背景色を変更しTextViewを表示させているだけです。

前回のIntentを使用した画面遷移と同じProjectを使用しているので、追記したファイルだけ以下に記載します。

activity_sub.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"
    android:background="#e6b8c2"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/sabut_register"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/satxt_title" />
    
    <com.google.android.material.chip.ChipGroup
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:clickable="false"
        app:layout_constraintBottom_toTopOf="@+id/container1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/satxt_title"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_kokyu"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="パワー：呼吸"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_cosmo"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="パワー：コスモ"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </com.google.android.material.chip.ChipGroup>
    
    <Button
        android:id="@+id/sabut_register"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_marginEnd="36dp"
        android:layout_marginBottom="32dp"
        android:text="Register"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/satxt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="20dp"
        android:text="パワー種類の選択"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <TextView
        android:id="@+id/satxt_page"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="32dp"
        android:text="Sub Activity"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/satxt_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="000"
        app:layout_constraintStart_toEndOf="@+id/satxt_title"
        app:layout_constraintTop_toTopOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

kokyu_fragment.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"
    android:background="#a2bd95"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:textSize="20dp"
        android:text="KokyuFragment"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

cosmo_fragment.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"
    android:background="#fde4a0"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:textSize="20dp"
        android:text="CosmoFragment"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

SubActivity.java

package com.example.sampleattack;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.google.android.material.chip.Chip;

public class SubActivity extends AppCompatActivity {
    public static final String SUB_KEY = "SUB_KEY";
    public static final String SUB_KEY2 = "SUB_KEY2";
    private int key;
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sub);

        Chip chipKokyu = findViewById(R.id.chip_kokyu);
        chipKokyu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager fragmentManager = getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.replace(R.id.container1, new KokyuFragment());
                fragmentTransaction.commit();
            }
        });

        Chip chipCosmo = findViewById(R.id.chip_cosmo);
        chipCosmo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager fragmentManager = getSupportFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.addToBackStack(null);
                fragmentTransaction.replace(R.id.container1, new CosmoFragment());
                fragmentTransaction.commit();
            }
        });

        Intent intent = getIntent();
        key = intent.getIntExtra(MainActivity.MAIN_KEY,0);
        String testtxt = String.valueOf(key);
        TextView textView = findViewById(R.id.satxt_test);
        textView.setText(testtxt);

        Button returnButton = findViewById(R.id.sabut_register);
        returnButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Intent intent = new Intent();
                String power = "9999";
                intent.putExtra(SUB_KEY, key);
                intent.putExtra(SUB_KEY2, power);
                setResult(RESULT_OK, intent);
                finish();
            }
        });
    }
}

KokyuFragment.java

package com.example.sampleattack;

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

public class KokyuFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.kokyu_fragment, container, false);
    }
}

CosmoFragment.java

package com.example.sampleattack;

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

public class CosmoFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.cosmo_fragment, container, false);
    }
}

関連記事：