The Android learning – fragments

Android Learning — six Fragments

Fragment is a KIND of UI Fragment that can be embedded in Acitity. It can make the screen have a more reasonable screen space. Generally, it is used more on tablets.

Simple use of Fragment

Add two FragMets to an Activity and split the screen space between them

Start by creating a new left Fragmet layout, left_fragment_XML, where only one button is placed

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="button"/>

</LinearLayout>
Copy the code

Create a new right Fragment layout called right_fragment_XML, a text box

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#00ff00">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="24sp"
        android:text="This is aright Fragment"/>
</LinearLayout>
Copy the code

Then create the LeftFragmet and RightFragment classes respectively to inherit the Fragment and override the onCreateView() method

package com.example.fragmenttest

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

class LeftFragment:Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup? , savedInstanceState:Bundle?).: View? {
        return inflater.inflate(R.layout.left_fragment,container,false)}}Copy the code

package com.example.fragmenttest

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

class LeftFragment:Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup? , savedInstanceState:Bundle?).: View? {
        return inflater.inflate(R.layout.right_fragment,container,false)}}Copy the code

Finally, the Fragment layout is introduced in the man.xml tag

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <fragment
      android:id="@+id/leftFrag"
      android:name="com.example.fragmenttest.LeftFragment"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>


    <fragment
        android:id="@+id/rightFrag"
        android:name="com.example.fragmenttest.RightFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>




</LinearLayout>
Copy the code

The last run

Dynamically Adding fragments

This means adding fragments dynamically while running your program

First we create a new Fragment to add called anther_rigt_fragment.xml

I’m just changing the color to a yellow background

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff00">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="24sp"
        android:text="This is anther right fragment"/>
</LinearLayout>
Copy the code

Create a new AotherRightFragment class that inherits the Fragment and override the onCreateView() method

kage com.example.fragmenttest

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

class AntherRightFrogment :Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup? , savedInstanceState:Bundle?).: View? {
        return inflater.inflate(R.layout.anther_right_fragement,container,false)}}Copy the code

Then modify the man.xml code to introduce the FrameLayout layout and replace the Fragment layout on the right

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <fragment
      android:id="@+id/leftFrag"
      android:name="com.example.fragmenttest.LeftFragment"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"/>

   <FrameLayout
       android:id="@+id/rightFragment"
       android:layout_width="0dp"
       android:layout_height="match_parent"
        android:layout_weight="1"
       />

</LinearLayout>
Copy the code

Finally, we modify the ManActivity code and set a listener for the button. Click the Button to replace the Fragment

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button:Button=findViewById(R.id.button)
        button.setOnClickListener{
            repalce(AntherRightFrogment())
        }
        repalce(RightFragment())
    }
     private fun repalce(fragment:Fragment){
      // Get the parent of the fragment.
        val fragementManager=supportFragmentManager
      // Start a transaction
        val transaction=fragementManager.beginTransaction()
       // Add and replace fragments
        transaction.replace(R.id.rightFragment,fragment)
        / / return stack
        transaction.addToBackStack(null)
       // Commit the transaction
        transaction.commit()

    }
Copy the code

Implement a return stack in fragments

Press Back to return to the last Fragment

        / / return stack
        transaction.addToBackStack(null)
Copy the code

Fragment life cycle

OnAttach () : Called when Fragment is associated with Activity

OnCreate () : called when the system creates a Fragment

OnCreateView () : call to create the layout (view) of the Fragment

OnActivityCreated () : Ensures that the Activity associated with the Fragment is called when it finishes calling

First we modify the RightFragment code to see the effect

package com.example.fragmenttest

import android.content.Context
import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class RightFragment :Fragment() {companion object{
        const val TAG="RightFragment"
    }
    // called when a Fragment is associated with an Activity
    override fun onAttach(context: Context) {
        super.onAttach(context)
        Log.d(TAG,"onAttach")}override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        Log.d(TAG,"onCteate")}// Called when creating a view for the Fragment to get a loaded layout
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup? , savedInstanceState:Bundle?).: View? {
        Log.d(TAG,"onCreateView")
        return  inflater.inflate(R.layout.right_fragment,container,false)}// Ensure that the Activity associated with the Fragment has been created
    override fun onActivityCreated(savedInstanceState: Bundle?). {
        super.onActivityCreated(savedInstanceState)

        Log.d(TAG,"onActivityCreated")}override fun onStart(a) {
        super.onStart()
        Log.d(TAG,"onStart")}override fun onResume(a) {
        super.onResume()
        Log.d(TAG,"onResume")}override fun onPause(a) {
        super.onPause()
        Log.d(TAG,"onPause")}override fun onStop(a) {
        super.onStop()
        Log.d(TAG,"onStop")}// Called when the view associated with the Fragment is removed
    override fun onDestroyView(a) {
        super.onDestroyView()
        Log.d(TAG,"onDestroyView")}override fun onDestroy(a) {
        super.onDestroy()
        Log.d(TAG,"onDestroy")}// Called when the Fragment is unassociated with the Activity
    override fun onDetach(a) {
        super.onDetach()
        Log.d(TAG,"onDetach")}}Copy the code

Load RightFragment for the first time

Press the Button Button

Press the Back key to return

Press Back again

Use qualifiers

For example, tablets usually use double page characters, because the screen is large and caprine, but our mobile phones are different, because the screen space is small.

Only one page can be displayed, so how can the application automatically determine which page is used? Use our qualifier.

First we modify the activity.main. XML code, leaving only the Fragment on our left with a button button, which can be used as a single page display on our phone.

Modify Android :layout_width=”match_parent “to make it as wide as the parent layout

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <fragment
      android:id="@+id/leftFrag"
      android:name="com.example.fragmenttest.LeftFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_weight="1"/>



</LinearLayout>
Copy the code

Create a new layout-Large folder in the RES directory and add a new activity_main. XML layout in this folder. The code is the previous two-page layout, where only the screen size is changed, and where large is the qualifier. Devices that think large load the layout-large folder layout.

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/leftFrag"
        android:name="com.example.fragmenttest.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <fragment
        android:id="@+id/rightFrage"
        android:name="com.example.fragmenttest.RightFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"/>

</LinearLayout>
Copy the code

Finally run the code on the tablet

On the phone

Minimum width qualifier

So how big is large? Here we map in the minimum width qualifier, which allows us to specify a minimum value for the screen in dp, above which one layout will be loaded, less than which the other will be executed.

Start by creating a layout_SW600DP folder in the RES directory and build the activity_main.xml layout again

The 600DP here is the tipping point, the code is the same and it loads both layouts

The results of this run, of course, depend on the screen you’re running on, but if the width is larger than 600dp, load the activity_main.xml layout in the layout_sw600 directory. If the width is smaller than 600DP, load the default activity_main.xml layout in the Layout directory.