Android利用碎片fragment實現底部標題欄(Github模板開源)

来源:https://www.cnblogs.com/geeksongs/archive/2019/12/05/11989421.html
-Advertisement-
Play Games

在安卓開發當中,一個十分重要的佈局則是底部標題欄了,擁有了底部標題欄,我們就擁有了整個軟體UI開發的框架,一般而言,整個軟體的佈局首先就是從底部標題欄開始構建,然後再開始其他模塊的編寫,組成一個完善的軟體,那麼如何才能夠編寫一個底部標題欄呢,我這裡使用了碎片來實現,當然是碎片的動態載入的方式,靜態加 ...


在安卓開發當中,一個十分重要的佈局則是底部標題欄了,擁有了底部標題欄,我們就擁有了整個軟體UI開發的框架,一般而言,整個軟體的佈局首先就是從底部標題欄開始構建,然後再開始其他模塊的編寫,組成一個完善的軟體,那麼如何才能夠編寫一個底部標題欄呢,我這裡使用了碎片來實現,當然是碎片的動態載入的方式,靜態載入的話則不可以達到點擊按鈕切換碎片的功能。

首先先上效果圖:

github項目地址:https://github.com/Geeksongs/ButtonTitile

 

 在每一個底部標題欄上一共有四個分類嗎,分別是主頁,地點,聊天和設置。每一個分類都對應著上方的一個fragment,因此我們需要創建四個fragment來對應下麵的每一個分類,下麵的底部導航欄不是由fragment來實現的,而是直接在主佈局activity_main.xml當中使用imageview和textview組合而成。在activity_main.xml的上方是fragment,因此使用幀佈局framelayout,下麵是activity_main.xml的佈局代碼:

一.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <LinearLayout
        android:id="@+id/tab_linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:background="@color/colorPrimary">
        <LinearLayout
            android:id="@+id/home"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp">

            <ImageView
                android:layout_gravity="center"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/home"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="主頁"
                android:textColor="@drawable/text_color_back" />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/location"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp">

            <ImageView
                android:layout_gravity="center"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/location_view"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="地點"
                android:textColor="@drawable/text_color_back" />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/linear_polymer"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp">

            <ImageView
                android:layout_gravity="center"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/comment"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="聊天"
                android:textColor="@drawable/text_color_back" />

        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/linear_user"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp">

            <ImageView
                android:layout_gravity="center"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/contrast_view" />
            <TextView
                android:layout_gravity="center"
                android:text="設置"
                android:textColor="@drawable/text_color_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </LinearLayout>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tab_linear">

    </FrameLayout>

</RelativeLayout>

編寫好的界面如下:

 

 然後在我們最開始的演示視頻當中大家也看到了我們每點擊一次按鈕,按鈕的顏色就會發生變化,因此我們需要為每一個按鈕編寫選擇器selector,這裡就只展示第一個選擇器"主頁"的selector吧,還有三個按鈕,咱們可以利用同樣的方式建立selector,如果想要瞭解其他按鈕的selector編寫的話,請前往github:https://github.com/Geeksongs/ButtonTitile

二.home.xml

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

其中上面的圖片我均放置在了drawble文件夾當中,這裡強烈推薦阿裡雲矢量圖標庫,在這裡可以找到你想要圖標,網址如下:https://www.iconfont.cn/。然後找到你所需要的圖標之後就可以進行下載啦!

三.fragment1.java

接下來是對碎片fragment1.java代碼的編寫,在這段代碼的編寫當中所需要註意的是我們將會返回整個fragment.xml的view佈局,而不是直接返回一個textview或者imageview之類的控制項,這樣會讓初學者感到十分困惑,為什麼不返回整個fragment所對應的xml界面,代碼如下:

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * A simple {@link Fragment} subclass.
 */
public class Fragment1 extends Fragment {

    private String fragmentText;

    private TextView fragmentTextView;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_fragment1,container,false);
        return view;//返回view佈局
    }
    public Fragment1(String fragmentText) {
        this.fragmentText=fragmentText;
    }
}

其餘幾個fragment的代碼也差不多,只是其構造方法的名稱略有不同,所使用了fragment1(2/3/4),畢竟它們的類名不同嘛。編寫了fragment的Java代碼,是時候編寫fragment的xml代碼了,因為這樣才可以將編寫好的界面傳遞到主界面:activity_main.xml當中,代碼如下:

四.fragment1.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"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/fragment1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30dp"
        android:text="這是第一個碎片" />

</FrameLayout>

由於安卓預設的字體比較小,我就略微修改了一下將字體的大小修改為了30dp,當然你也可以根據自己的需要進行改動,這個fragment文件我們一共需要建立4份,畢竟有四個底部標題欄的按鈕。

五.MainActivity.java

下麵是主活動的Java代碼:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{






    LinearLayout homeLinear;

    LinearLayout listLinear;

    LinearLayout polyLinear;

    LinearLayout userLinear;

    Fragment1 fragmentHome;
    Fragment2 fragmentList;
    Fragment3 fragmentPoly;
    Fragment4 fragmentUser;
    private FragmentManager mfragmentManger;


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













        homeLinear= (LinearLayout) findViewById(R.id.home);
        listLinear= (LinearLayout) findViewById(R.id.location);
        polyLinear= (LinearLayout) findViewById(R.id.linear_polymer);
        userLinear= (LinearLayout) findViewById(R.id.linear_user);
        homeLinear.setOnClickListener(this);
        listLinear.setOnClickListener(this);
        polyLinear.setOnClickListener(this);
        userLinear.setOnClickListener(this);
        mfragmentManger = getSupportFragmentManager();
        homeLinear.performClick();




    }
    @Override
    public void onClick(View view) {
        FragmentTransaction fragmentTransaction = mfragmentManger.beginTransaction();//只能是局部變數,不能為全局變數,否則不能重覆commit
        //FragmentTransaction只能使用一次
        hideAllFragment(fragmentTransaction);
        switch (view.getId()){
            case R.id.home:
                setAllFalse();
                homeLinear.setSelected(true);
                if (fragmentHome==null){
                    fragmentHome=new Fragment1("Home");
                    fragmentTransaction.add(R.id.fragment_frame,fragmentHome);
                }else{
                    fragmentTransaction.show(fragmentHome);
                }
                break;
            case R.id.location:
                setAllFalse();
                listLinear.setSelected(true);
                if(fragmentList==null){
                    fragmentList=new Fragment2("List");
                    fragmentTransaction.add(R.id.fragment_frame,fragmentList);
                }else {
                    fragmentTransaction.show(fragmentList);
                }
                break;
            case R.id.linear_polymer:
                setAllFalse();
                polyLinear.setSelected(true);
                if(fragmentPoly==null){
                    fragmentPoly=new Fragment3("Polymer");
                    fragmentTransaction.add(R.id.fragment_frame,fragmentPoly);
                }else {
                    fragmentTransaction.show(fragmentPoly);
                }
                break;
            case R.id.linear_user:
                setAllFalse();
                userLinear.setSelected(true);
                if(fragmentUser==null){
                    fragmentUser=new Fragment4("User");
                    fragmentTransaction.add(R.id.fragment_frame,fragmentUser);
                }else {
                    fragmentTransaction.show(fragmentUser);
                }
                break;
        }
        fragmentTransaction.commit();//記得必須要commit,否則沒有效果
}
    private void hideAllFragment(FragmentTransaction fragmentTransaction) {
        if(fragmentHome!=null){
            fragmentTransaction.hide(fragmentHome);
        }
        if(fragmentList!=null){
            fragmentTransaction.hide(fragmentList);
        }
        if(fragmentPoly!=null){
            fragmentTransaction.hide(fragmentPoly);
        }
        if(fragmentUser!=null){
            fragmentTransaction.hide(fragmentUser);
        }

    }
    private void setAllFalse() {
        homeLinear.setSelected(false);
        listLinear.setSelected(false);
        polyLinear.setSelected(false);
        userLinear.setSelected(false);
    }


}

咱們的底部標題欄就這樣完美地實現啦,對於代碼和整個工程佈局還不太明白的地方可以參見github源碼:https://github.com/Geeksongs/ButtonTitile,歡迎star呀!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1:masterha_check_repl 副本集方面報錯 replicates is not defined in the configuration file! 具體信息如下: 分析:MHA 漂移過後,我們知道配置信息中 主節點的信息就不在了,我們需要及時維護,否則/usr/local/bin/ ...
  • 有人在社區問到:C#調用Oracle中自定義函數的返回值時,無法正常調用。但在PL/SQL中正常調用返回。 ...
  • Navicat Keygen - 註冊機是怎麼工作的? 1. 關鍵詞解釋. Navicat激活公鑰 這是一個2048位的RSA公鑰,Navicat使用這個公鑰來完成相關激活信息的加密和解密。 這個公鑰被作為 RCData 類型的資源儲存在 navicat.exe 當中。資源名為"ACTIVATION ...
  • ElasticSearch 用Scroll(對應資料庫的游標) 一次查出全部數據 ...
  • SQLite 的 DELETE 語句用於刪除表中已有的記錄。可以使用帶有 WHERE 子句的 DELETE 查詢來刪除選定行,否則所有的記錄都會被刪除。 SQLite 要清空表記錄,只能使用Delete來刪除全部表數據。但是與別的資料庫不同,SQlite在為表創建自增列後,會將表自增列的當前序號保存 ...
  • 參考51CTO博客 問題描述:使用scn號恢復誤刪數據 1.查詢系統閃回的scn值以及當前日誌的scn值,因為我這個是測試,創建的表是在在後邊,所以scn值要大於下邊這兩個scn值,所以對我恢複數據沒有用,如果我創建的數據是在下邊這兩個SCN值之前,也就是比這兩個時間點SCN值小,就可以用這兩個sc ...
  • #!/bin/bash env echo "Download msyql5.7 rpm..." sudo yum install wget wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm ... ...
  • 使用CameraLibrary項目,在部分手機或平板上不能正常使用,要報“打開相機失敗”查看debug日誌顯示“setParameters failed”。 找到CameraView.java中的setCameraParameters方法,註釋掉 //自動聚焦模式 //parameters.setF ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...