Android入門之Fragment的使用教程

更新時(shí)間：2022年12月15日 10:09:26 作者：TGITCIC

Fragment是Android3.0后引入的一個(gè)新的API，他出現(xiàn)的初衷是為了適應(yīng)大屏幕的平板電腦。本文主要來(lái)和大家講講Fragment的使用，感興趣的小伙伴可以了解一下

簡(jiǎn)介

我們的Android入門一步步已經(jīng)進(jìn)入中級(jí)。我們講完了所有的基本組件的基本使用、Activity、Service、BroadCast。今天我們來(lái)到了Fragment篇章。Fragment和Activity比到底是一個(gè)什么樣的存在呢？我們以一個(gè)很小的例子來(lái)說(shuō)通Fragment。

Fragment是什么

Fragment可以套在activity里；
一個(gè)Fragment可以屬于多個(gè)activity；
Fragment可以適配（屏幕尺寸）；
Fragment有自己的生命周期；

因此Fragment可以復(fù)用。Fragment的生命周期如下：

課程目標(biāo)

我們通過(guò)以下這么一個(gè)小例子來(lái)了解一個(gè)Fragment的基本使用

1.我們有一個(gè)全真模擬登錄后的APP主界面，分為topbar，中間有4個(gè)fragment，底部有tabbar；

2.底部的tabbar有4個(gè)按鈕用textview+android:background來(lái)實(shí)現(xiàn)的；

3.每個(gè)底部按鈕被點(diǎn)一次就顯示一個(gè)fragment；

當(dāng)中這塊fragment可是一整塊的，它是可以適匹屏幕的，因此可以在PAD上使用。

我們下面來(lái)看全代碼

項(xiàng)目結(jié)構(gòu)

全局靜態(tài)常量

我們對(duì)res/values下這兩個(gè)文件涉及到了修改，增加了一些全局靜態(tài)常量。這是一個(gè)編程上的好習(xí)慣比如說(shuō)以后我們要碰上國(guó)際化，肯定不能在代碼里寫死一些“字符串”吧？

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="bg_black">#000000</color>
    <color name="bg_white">#FFFFFF</color>
    <color name="bg_topbar">#FCFCFC</color>
    <color name="bg_gray">#00F1F1F1</color>
    <color name="transparent">#00FFFFFF</color>
    <color name="text_gray">#8D7A71</color>
    <color name="text_white">#FFFFFF</color>
    <color name="text_yellow">#FFC800</color>
    <color name="text_topbar">#694E42</color>
    <color name="div_white">#E5E5E5</color>
</resources>

這邊我們是從name="white"后開(kāi)始增加的自定義的屬性。

strings.xml

<resources>
    <string name="app_name">DemoFragmentWithTabBar</string>
    <string name="tab_menu_alert">提醒</string>
    <string name="tab_menu_profile">信息</string>
    <string name="tab_menu_pay">我的</string>
    <string name="tab_menu_setting">設(shè)置</string>
</resources>

項(xiàng)目中用到的圖片

這些圖片主要是這么用的，我來(lái)解釋一下：

1.我們底部有4個(gè)按鈕；

2.每個(gè)按鈕我們定義它沒(méi)有按下去、按下去后的兩個(gè)狀態(tài)，因此有4個(gè)xml，每個(gè)xml中含各兩個(gè)按鈕狀態(tài)定義的selector；

因此一共8個(gè)圖片。

用于定義4個(gè)按鈕按下去和沒(méi)有按下去時(shí)狀態(tài)的Selector XML

因?yàn)槲覀冇?個(gè)按鈕，每個(gè)按鈕我們定義它沒(méi)有按下去、按下去后的兩個(gè)狀態(tài)，因此有4個(gè)xml，每個(gè)xml中含各兩個(gè)按鈕狀態(tài)定義的selector，這就有4個(gè)xml，每個(gè)xml內(nèi)容差不多；

同時(shí)每個(gè)按鈕上有文字，而文字也分按下去和沒(méi)有按下去時(shí)。對(duì)于文字的狀態(tài)顯示我們可以共用一個(gè)selector xml；

我們用textview中的drawTop屬性控制中在textview的text的上方匯制一個(gè)透明區(qū)域，然后把圖片位于text上方來(lái)制作出下方4個(gè)按鈕的tabbar效果，因此這一個(gè)透明區(qū)域的樣式是一樣的，因此可以4個(gè)按鈕共用一個(gè)用用匯制透明區(qū)域的selector xml；

所以總計(jì)有6個(gè)xml，我們來(lái)一個(gè)個(gè)看。

用來(lái)定義下部4個(gè)“按鈕”每個(gè)文字上方透明放置圖片區(qū)域的tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="#FFC4C4C4" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</selector>

用來(lái)定義下部4個(gè)“按鈕”每個(gè)文字按下去和沒(méi)有按下去時(shí)的效果的tab_menu_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/text_yellow" android:state_selected="true" />
    <item android:color="@color/text_gray" />
</selector>

提醒-tab_menu_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_channel_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_channel_normal" />
</selector>

信息-tab_menu_message.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_message_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_message_normal" />
</selector>

我的-tab_menu_better.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_better_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_better_normal" />
</selector>

設(shè)置-tab_menu_settings.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_my_pressed" android:state_selected="true" />
    <item android:drawable="@mipmap/tab_my_normal" />
</selector>

下面我們來(lái)看我們的Fragment

Fragment

fg_content.xml

<?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="@color/bg_white">
 
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=""
        android:textColor="@color/text_yellow"
        android:textSize="20sp"/>
 
</LinearLayout>

SimpleFragment.java

package org.mk.android.demobar;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class SimpleFragment extends Fragment {
 
    private String content;
 
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
        Bundle bundle = getArguments();
        String content = bundle.getString("content");
        txt_content.setText(content);
        return view;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">
 
    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/bg_topbar">
 
        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="@color/text_topbar"
            android:text="信息"/>
 
 
        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="@color/div_white"
            android:layout_alignParentBottom="true"/>
 
    </RelativeLayout>
 
 
 
    <LinearLayout
        android:id="@+id/ly_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_white"
        android:orientation="horizontal">
 
        <TextView
            android:id="@+id/txt_notification"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_notification"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_alert"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />
 
        <TextView
            android:id="@+id/txt_message"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_message"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_profile"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />
 
        <TextView
            android:id="@+id/txt_better"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_better"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_pay"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp" />
 
        <TextView
            android:id="@+id/txt_setting"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/tab_menu_bg"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/tab_menu_setting"
            android:gravity="center"
            android:padding="5dp"
            android:text="@string/tab_menu_setting"
            android:textColor="@drawable/tab_menu_text"
            android:textSize="16sp"/>
 
    </LinearLayout>
 
    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:background="@color/div_white"
        android:layout_above="@id/ly_tab_bar"/>
 
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ly_top_bar"
        android:layout_above="@id/div_tab_bar"
        android:id="@+id/ly_content">
 
    </FrameLayout>
 
</RelativeLayout>

MainActivity.java

package org.mk.android.demobar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    //UI Object
    private TextView txt_topbar;
    private TextView txt_notification;
    private TextView txt_message;
    private TextView txt_better;
    private TextView txt_setting;
    private FrameLayout ly_content;
 
    //Fragment Object
    private SimpleFragment fg1, fg2, fg3, fg4;
    private FragmentManager fManager;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        bindViews();
        txt_notification.performClick();   //模擬一次點(diǎn)擊，既進(jìn)去后選擇第一項(xiàng)
    }
 
    //UI組件初始化與事件綁定
    private void bindViews() {
        txt_topbar = (TextView) findViewById(R.id.txt_topbar);
        txt_notification = (TextView) findViewById(R.id.txt_notification);
        txt_message = (TextView) findViewById(R.id.txt_message);
        txt_better = (TextView) findViewById(R.id.txt_better);
        txt_setting = (TextView) findViewById(R.id.txt_setting);
        ly_content = (FrameLayout) findViewById(R.id.ly_content);
 
        txt_notification.setOnClickListener(this);
        txt_message.setOnClickListener(this);
        txt_better.setOnClickListener(this);
        txt_setting.setOnClickListener(this);
    }
 
    //重置所有文本的選中狀態(tài)
    private void setSelected() {
        txt_notification.setSelected(false);
        txt_message.setSelected(false);
        txt_better.setSelected(false);
        txt_setting.setSelected(false);
    }
 
    //隱藏所有Fragment
    private void hideAllFragment(FragmentTransaction fragmentTransaction) {
        if (fg1 != null) fragmentTransaction.hide(fg1);
        if (fg2 != null) fragmentTransaction.hide(fg2);
        if (fg3 != null) fragmentTransaction.hide(fg3);
        if (fg4 != null) fragmentTransaction.hide(fg4);
    }
 
 
    @Override
    public void onClick(View v) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        switch (v.getId()) {
            case R.id.txt_notification:
                setSelected();
                txt_notification.setSelected(true);
                if (fg1 == null) {
                    fg1 = new SimpleFragment();
                    String content = "第一個(gè)Fragment";
                    Bundle bd = new Bundle();
                    bd.putString("content", content);
                    fg1.setArguments(bd);
                    fTransaction.add(R.id.ly_content, fg1);
                } else {
                    fTransaction.show(fg1);
                }
                break;
            case R.id.txt_message:
                setSelected();
                txt_message.setSelected(true);
                if (fg2 == null) {
                    fg2 = new SimpleFragment();
                    String content = "第二個(gè)Fragment";
                    Bundle bd = new Bundle();
                    bd.putString("content", content);
                    fg2.setArguments(bd);
                    fTransaction.add(R.id.ly_content, fg2);
                } else {
                    fTransaction.show(fg2);
                }
                break;
            case R.id.txt_better:
                setSelected();
                txt_better.setSelected(true);
                if (fg3 == null) {
                    fg3 = new SimpleFragment();
                    String content = "第三個(gè)Fragment";
                    Bundle bd = new Bundle();
                    bd.putString("content", content);
                    fg3.setArguments(bd);
                    fTransaction.add(R.id.ly_content, fg3);
                } else {
                    fTransaction.show(fg3);
                }
                break;
            case R.id.txt_setting:
                setSelected();
                txt_setting.setSelected(true);
                if (fg4 == null) {
                    fg4 = new SimpleFragment();
                    String content = "第四個(gè)Fragment";
                    Bundle bd = new Bundle();
                    bd.putString("content", content);
                    fg4.setArguments(bd);
                    fTransaction.add(R.id.ly_content, fg4);
                } else {
                    fTransaction.show(fg4);
                }
                break;
        }
        fTransaction.commit();
    }
}

核心代碼思路導(dǎo)讀

剛打開(kāi)APP，我們模擬一次點(diǎn)擊，使用組件的performClick觸發(fā)，從而點(diǎn)擊“提醒”按鈕因此來(lái)顯示第一個(gè)fragment；

每次點(diǎn)擊先把當(dāng)前所有的fragment“隱藏”再顯示相應(yīng)的那個(gè)被按鈕點(diǎn)下去后需要顯示的fragment