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

時間  2019-12-09
標籤 android 利用 碎片 fragment 實現 底部 標題欄 github 模板 開源 欄目 Android 简体版
原文   原文鏈接

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

首先先上效果圖：android

github項目地址：https://github.com/Geeksongs/ButtonTitilegit

 

 在每個底部標題欄上一共有四個分類嗎，分別是主頁，地點，聊天和設置。每個分類都對應着上方的一個fragment，所以咱們須要建立四個fragment來對應下面的每個分類，下面的底部導航欄不是由fragment來實現的，而是直接在主佈局activity_main.xml當中使用imageview和textview組合而成。在activity_main.xml的上方是fragment，所以使用幀佈局framelayout，下面是activity_main.xml的佈局代碼：github

一.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>

編寫好的界面以下：
app

 

 而後在咱們最開始的演示視頻當中你們也看到了咱們每點擊一次按鈕，按鈕的顏色就會發生變化，所以咱們須要爲每個按鈕編寫選擇器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/。而後找到你所須要的圖標以後就能夠進行下載啦！
ide

三.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份，畢竟有四個底部標題欄的按鈕。this

五.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呀！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程