6
4

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 5 years have passed since last update.

ボタンクリック時にフラグメントを画面に表示する

Posted at

ググっても意外と情報が見つからなかったので、
備忘録として

やりたいこと

ボタンクリック時に動的にActivityにフラグメントを表示したり、非表示にしたりしたい。

実現方法

表示するFragmetnクラス
このフラグメントを以降に記載している、Activityに貼り付けます

TestFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class TestFragment extends Fragment {

    public TestFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

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

Fragmentのレイアウト
分かりやすく背景色は赤にしています。

fragment_test.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#FF0000"
    tools:context=".TestFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Fragment show"
        android:textSize="20dp"/>

</FrameLayout>

Fragmentの土台となるActivityクラス
ボタンを配置し、このボタンを押下した時にフラグメントの表示・非表示を行う。

MainActivity.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private FragmentManager fragmentManager;
    private boolean isShowFragment = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fragmentManager = getSupportFragmentManager();

        // 表示するフラグメントクラスのインスタンス
        final Fragment fragment = new TestFragment();

        // ボタンをクリックしたらフラグメントを表示・非表示
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(!isShowFragment) {
                    // 表示処理
                    FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.add(R.id.container, fragment);
                    transaction.commit();

                    isShowFragment = true;
                } else {
                    // 非表示処理
                    FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.remove(fragment);
                    transaction.commit();

                    isShowFragment = false;
                }
            }
        });
    }
}

Activityのレイアウト
下の方にあるFrameLayoutにFragmentが貼り付けられます。

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=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/container" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="@id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
    </FrameLayout>

</android.support.constraint.ConstraintLayout>

動作確認

・起動時の画面(Fragment非表示)
Screenshot_1548160635.png

ボタンをクリックすると。。。
Screenshot_1548160757.png

もう一度ボタンをクリックすると。。
Screenshot_1548160792.png

という感じで、ボタンクリック時にフラグメントを表示・非表示させることができました。

6
4
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
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?