Android利用碎片fragment實(shí)現(xiàn)底部標(biāo)題欄(Github模板開源)
fragment特點(diǎn)
- Fragment與Activity相似，有自己的生命周期，布局。相當(dāng)于一個(gè)迷你的Activity
- Fragment可以作為Activity的組成部分，一個(gè)Activity可以有多個(gè)Fragment
- 一個(gè)Fragment可以被多個(gè)Activity重用
- 在Activity運(yùn)行時(shí)可動(dòng)態(tài)地加入、移除、交換Fragment
- 一個(gè)具有自己生命周期的控件,有自己的處理輸入事件的能力
- 依賴于Activity，能互相通信和托管。
在安卓開發(fā)當(dāng)中，一個(gè)十分重要的布局則是底部標(biāo)題欄了，擁有了底部標(biāo)題欄，我們就擁有了整個(gè)軟件UI開發(fā)的框架，一般而言，整個(gè)軟件的布局首先就是從底部標(biāo)題欄開始構(gòu)建，然后再開始其他模塊的編寫，組成一個(gè)完善的軟件，那么如何才能夠編寫一個(gè)底部標(biāo)題欄呢，我這里使用了碎片來實(shí)現(xiàn)，當(dāng)然是碎片的動(dòng)態(tài)加載的方式，靜態(tài)加載的話則不可以達(dá)到點(diǎn)擊按鈕切換碎片的功能。
首先先上效果圖：
github項(xiàng)目地址：https://github.com/Geeksongs/ButtonTitile
在每一個(gè)底部標(biāo)題欄上一共有四個(gè)分類嗎，分別是主頁，地點(diǎn)，聊天和設(shè)置。每一個(gè)分類都對(duì)應(yīng)著上方的一個(gè)fragment，因此我們需要?jiǎng)?chuàng)建四個(gè)fragment來對(duì)應(yīng)下面的每一個(gè)分類，下面的底部導(dǎo)航欄不是由fragment來實(shí)現(xiàn)的，而是直接在主布局activity_main.xml當(dāng)中使用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="地點(diǎn)"
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="設(shè)置"
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>
編寫好的界面如下：
然后在我們最開始的演示視頻當(dāng)中大家也看到了我們每點(diǎn)擊一次按鈕，按鈕的顏色就會(huì)發(fā)生變化，因此我們需要為每一個(gè)按鈕編寫選擇器selector,這里就只展示第一個(gè)選擇器"主頁"的selector吧，還有三個(gè)按鈕，咱們可以利用同樣的方式建立selector，如果想要了解其他按鈕的selector編寫的話，請(qǐng)前往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文件夾當(dāng)中，這里強(qiáng)烈推薦阿里云矢量圖標(biāo)庫，在這里可以找到你想要圖標(biāo)，網(wǎng)址如下：https://www.iconfont.cn/。然后找到你所需要的圖標(biāo)之后就可以進(jìn)行下載啦！
三.fragment1.java
接下來是對(duì)碎片fragment1.java代碼的編寫，在這段代碼的編寫當(dāng)中所需要注意的是我們將會(huì)返回整個(gè)fragment.xml的view布局，而不是直接返回一個(gè)textview或者imageview之類的控件，這樣會(huì)讓初學(xué)者感到十分困惑，為什么不返回整個(gè)fragment所對(duì)應(yīng)的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;
}
}
其余幾個(gè)fragment的代碼也差不多，只是其構(gòu)造方法的名稱略有不同，所使用了fragment1(2/3/4)，畢竟它們的類名不同嘛。編寫了fragment的Java代碼，是時(shí)候編寫fragment的xml代碼了，因?yàn)檫@樣才可以將編寫好的界面?zhèn)鬟f到主界面：activity_main.xml當(dāng)中，代碼如下：
四.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="這是第一個(gè)碎片" />
</FrameLayout>
由于安卓默認(rèn)的字體比較小，我就略微修改了一下將字體的大小修改為了30dp，當(dāng)然你也可以根據(jù)自己的需要進(jìn)行改動(dòng)，這個(gè)fragment文件我們一共需要建立4份，畢竟有四個(gè)底部標(biāo)題欄的按鈕。
五.MainActivity.java
下面是主活動(dòng)的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();//只能是局部變量，不能為全局變量，否則不能重復(fù)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);
}
}
咱們的底部標(biāo)題欄就這樣完美地實(shí)現(xiàn)啦，對(duì)于代碼和整個(gè)工程布局還不太明白的地方可以參見github源碼：https://github.com/Geeksongs/ButtonTitile，歡迎star呀！
總結(jié)
以上所述是小編給大家介紹的Android利用碎片fragment實(shí)現(xiàn)底部標(biāo)題欄(Github模板開源)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
二維碼，我們也稱作QRCode，QR表示quick response即快速響應(yīng)，在很多App中我們都能見到二維碼的身影，最常見的莫過于微信了。下面通過本文給大家講解Android 二維碼掃描和生成二維碼功能，需要的朋友參考下吧2017-12-12
這篇文章主要為大家介紹了SharedPreference 初始化源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本篇文章主要介紹了Android使用百度語音識(shí)別的示例代碼，詳細(xì)介紹了使用百度語音識(shí)別，完成語音識(shí)別的功能，有興趣的可以了解一下。2017-02-02
Android中利用viewflipper動(dòng)畫切換屏幕效果
這篇文章主要介紹了Android中利用viewflipper動(dòng)畫切換屏幕效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
android實(shí)現(xiàn)QQ微信側(cè)滑刪除效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)QQ微信側(cè)滑刪除效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
本文主要對(duì)RecyclerView的使用進(jìn)行了詳細(xì)介紹，文章結(jié)尾附上源碼下載，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Android進(jìn)階Hook攔截系統(tǒng)實(shí)例化View過程實(shí)現(xiàn)App換膚功能
這篇文章主要為大家介紹了Android進(jìn)階Hook攔截系統(tǒng)實(shí)例化View過程實(shí)現(xiàn)App換膚功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Android開發(fā)實(shí)現(xiàn)的IntentUtil跳轉(zhuǎn)多功能工具類【包含視頻、音頻、圖片、攝像頭等操作功能】
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)的IntentUtil跳轉(zhuǎn)多功能工具類,該封裝類還包含視頻、音頻、圖片、攝像頭等操作功能,需要的朋友可以參考下2017-11-11
Material Design系列之Behavior實(shí)現(xiàn)支付密碼彈窗和商品屬性選擇效果
這篇文章主要為大家詳細(xì)介紹了Material Design系列之Behavior實(shí)現(xiàn)支付密碼彈窗和商品屬性選擇效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Android實(shí)現(xiàn)花瓣飄落效果的步驟，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-04-04