[Android]Fragmentの使い方 サンプルコード付き

Index

Fragmentとは

画面の大きさによって、複数のGUIを出すことができたり、GUIの再利用ができるようになったりと色々便利なやつ。

公式のドキュメント

サンプル

ボタンを押したらFragmentが切り替わる簡単なサンプルです。

サンプルコード

まずはフラグメントのGUI構成から、色と大きさを指定しただけです。

fragment_blank.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:background="@android:color/holo_blue_bright"
    tools:context=".BlankFragment">

</androidx.constraintlayout.widget.ConstraintLayout>

<?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:background="@android:color/holo_blue_bright"

tools:context=".BlankFragment">

</androidx.constraintlayout.widget.ConstraintLayout>

BlankFragment.kt

androidStudioで自動生成されたコードから不要なコードを削除しただけのコードです。

package com.example.fragmentsample

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class BlankFragment : Fragment() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

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

    companion object {
        @JvmStatic fun newInstance() = BlankFragment()
    }
}

package com.example.fragmentsample

import android.os.Bundle

import androidx.fragment.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

class BlankFragment : Fragment() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,

savedInstanceState: Bundle?): View? {

return inflater.inflate(R.layout.fragment_blank, container, false)

}

companion object {

@JvmStatic fun newInstance() = BlankFragment()

}

fragment_blank2.xml

色違いのfragmentを作成していきます。

<?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:background="@android:color/holo_purple"
    tools:context=".BlankFragment2">


</androidx.constraintlayout.widget.ConstraintLayout>

<?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:background="@android:color/holo_purple"

tools:context=".BlankFragment2">

</androidx.constraintlayout.widget.ConstraintLayout>

BlankFragment2.kt

package com.example.fragmentsample

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

class BlankFragment2 : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

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

    companion object {
        @JvmStatic
        fun newInstance() = BlankFragment2()
    }
}

package com.example.fragmentsample

import android.os.Bundle

import androidx.fragment.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

class BlankFragment2 : Fragment() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

}

override fun onCreateView(

inflater: LayoutInflater, container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_blank2, container, false)

}

companion object {

@JvmStatic

fun newInstance() = BlankFragment2()

}

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

<!--fragmentを配置する場所と大きさを決めている-->
    <FrameLayout
        android:id="@+id/fl"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:layout_constraintTop_toTopOf="parent" >
<!--ここにfragmentが動的に配置される-->
        <fragment
            android:name="com.example.fragmentsample.BlankFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </FrameLayout>

<!--押されたら、fragment1に切り替える-->
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="36dp"
        android:text="fragment1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

<!--押されたら、fragment２に切り替える-->
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="52dp"
        android:layout_marginBottom="36dp"
        android:text="fragment2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

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

<FrameLayout

android:id="@+id/fl"

android:layout_width="match_parent"

android:layout_height="600dp"

app:layout_constraintTop_toTopOf="parent" >

<fragment

android:name="com.example.fragmentsample.BlankFragment"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</FrameLayout>

<Button

android:id="@+id/bt1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="32dp"

android:layout_marginBottom="36dp"

android:text="fragment1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent" />

<Button

android:id="@+id/bt2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="52dp"

android:layout_marginBottom="36dp"

android:text="fragment2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.example.fragmentsample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

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

        val btn1 :Button = findViewById(R.id.bt1)
        val btn2 :Button = findViewById(R.id.bt2)

       //ここでfragment切り替えを行う
        btn1.setOnClickListener {
            supportFragmentManager.beginTransaction()
                .replace(R.id.fl , BlankFragment.newInstance())
                .commit()
        }

        btn2.setOnClickListener{
            supportFragmentManager.beginTransaction()
                .replace(R.id.fl , BlankFragment2.newInstance())
                .commit()
        }
    }
}

package com.example.fragmentsample

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.Button

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val btn1 :Button = findViewById(R.id.bt1)

val btn2 :Button = findViewById(R.id.bt2)

//ここでfragment切り替えを行う

btn1.setOnClickListener {

supportFragmentManager.beginTransaction()

.replace(R.id.fl , BlankFragment.newInstance())

.commit()

}

btn2.setOnClickListener{

supportFragmentManager.beginTransaction()

.replace(R.id.fl , BlankFragment2.newInstance())

.commit()

}

fragmentの切り替え処理の順番は

①supportFragmentManager.beginTransaction()

ここで切り替えの準備をします。

詳細はこちらsupportFragmentManager、beginTransaction()

ドキュメントを読んでみると、fragmentの追加、削除、置換をする場合はとりあえず呼ぶことになりそう。

②replace(R.id.fl , BlankFragment2.newInstance())

ここで置換を行う。

第一引数が切り替える対象のFrameLayout

第二引数が切り替えるfragment

③commit

これで確定させる

[Android]Fragmentの使い方サンプルコード付き

Fragmentとは

サンプル

サンプルコード

fragment_blank.xml

BlankFragment.kt

fragment_blank2.xml

BlankFragment2.kt

activity_main.xml

MainActivity.kt

コメントを残すコメントをキャンセル

Fragmentとは

サンプル

サンプルコード

fragment_blank.xml

BlankFragment.kt

fragment_blank2.xml

BlankFragment2.kt

activity_main.xml

MainActivity.kt

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル