第一種用radiobutton實現
https://wizardforcel.gitbooks.io/w3school-android/content/75.html
布局文件，使用radiogroup
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/ly_top_bar" android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/colorPrimary"/> <RadioGroup android:layout_width="match_parent" android:layout_height="56dp" android:id="@+id/rg_tab_bar" android:layout_alignParentBottom="true" android:orientation="horizontal"> <RadioButton android:id="@+id/rbb_1" style="@style/tab_menu_item" android:drawableTop="@drawable/qq" android:text="@string/jihua"/> <RadioButton android:id="@+id/rbb_2" style="@style/tab_menu_item" android:drawableTop="@drawable/pp" android:text="@string/dating"/> <RadioButton android:id="@+id/rbb_3" style="@style/tab_menu_item" android:drawableTop="@drawable/oo" android:text="@string/wode"/> </RadioGroup> <View android:id="@+id/div_tab_bar" android:layout_width="match_parent" android:layout_height="2px" android:layout_above="@id/rg_tab_bar" /> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/div_tab_bar" android:layout_below="@id/ly_top_bar"> </FrameLayout> </RelativeLayout>
activity文件,每個界面是一個fragment
package com.example.administrator.miaomiao; import android.graphics.drawable.Drawable; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; public class allactivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener { private RadioGroup rg_tab_bar; private RadioButton rb_1; private RadioButton rb_2; private RadioButton rb_3; //Fragment Object private Fragment1 fg1; private Fragment2 fg2; private Fragment3 fg3; private FragmentManager fManager; // private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_allactivity); fManager = getSupportFragmentManager(); rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar); rg_tab_bar.setOnCheckedChangeListener(this); //獲取第一個單選按鈕，並設置其為選中狀態 rb_1 = (RadioButton) findViewById(R.id.rbb_1); rb_2 = (RadioButton) findViewById(R.id.rbb_2); rb_3 = (RadioButton) findViewById(R.id.rbb_3); rb_1.setChecked(true); initView(); } @Override public void onCheckedChanged(RadioGroup group, int checkedId) { FragmentTransaction fTransaction = fManager.beginTransaction(); hideAllFragment(fTransaction); switch (checkedId){ case R.id.rbb_1: if(fg1 == null){ fg1 = new Fragment1(); fTransaction.add(R.id.ly_content,fg1, "Fragment1"); }else{ fTransaction.show(fg1); } break; case R.id.rbb_2: if(fg2 == null){ fg2 = new Fragment2(); fTransaction.add(R.id.ly_content,fg2, "Fragment2"); }else{ fTransaction.show(fg2); } break; case R.id.rbb_3: if(fg3 == null){ fg3 = new Fragment3(); fTransaction.add(R.id.ly_content,fg3, "Fragment3"); }else{ fTransaction.show(fg3); } break; } fTransaction.commit(); } //隱藏所有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(fg3 != null)fragmentTransaction.hide(fg3); } private void initView() { //定義底部標簽圖片大小和位置 Drawable drawable_news = getResources().getDrawable(R.drawable.qq); //當這個圖片被繪制時，給他綁定一個矩形 ltrb規定這個矩形 drawable_news.setBounds(0, 0, 40, 40); //設置圖片在文字的哪個方向 rb_1.setCompoundDrawables(null, drawable_news, null, null); //定義底部標簽圖片大小和位置 Drawable drawable_live = getResources().getDrawable(R.drawable.pp); //當這個圖片被繪制時，給他綁定一個矩形 ltrb規定這個矩形 drawable_live.setBounds(0, 0, 40, 40); //設置圖片在文字的哪個方向 rb_2.setCompoundDrawables(null, drawable_live, null, null); //定義底部標簽圖片大小和位置 Drawable drawable_tuijian = getResources().getDrawable(R.drawable.oo); //當這個圖片被繪制時，給他綁定一個矩形 ltrb規定這個矩形 drawable_tuijian.setBounds(0, 0, 40, 40); //設置圖片在文字的哪個方向 rb_3.setCompoundDrawables(null, drawable_tuijian, null, null); } }
第二種在github上搜的，博客地址為https://www.jianshu.com/p/ce8e09cda486。
因為公司好多項目會用到底部導航欄，大都千篇一律，無非2-5個Tab（可能會有些點擊動畫、紅點提示或者中間多個加號）總是重復相同的操作...所以...很懶的我希望幾行代碼就能實現這個效果（少敲一行是一行）
效果圖
輕松實現.gif
實現
- 依賴
Step 1. Add it in your root build.gradle at the end of repositories:
allprojects { repositories { ... maven { url 'https://jitpack.io' } } } Step 2. Add the dependency
implementation 'com.github.forvv231:EasyNavigation:1.0.3'
1、基礎版
xml
<com.next.easynavigation.view.EasyNavigationBar android:id="@+id/navigationBar" android:layout_width="match_parent" android:layout_height="match_parent"> </com.next.easynavigation.view.EasyNavigationBar> 注：因EasyNavigationBar包含ViewPager，需設置充滿
Activity
private String[] tabText = {"首頁", "發現", "消息", "我的"}; //未選中icon private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.message, R.mipmap.me}; //選中時icon private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.message1, R.mipmap.me1}; private List<android.support.v4.app.Fragment> fragments = new ArrayList<>(); navigationBar = findViewById(R.id.navigationBar); fragments.add(new FirstFragment()); fragments.add(new SecondFragment()); fragments.add(new FirstFragment()); fragments.add(new SecondFragment()); navigationBar.titleItems(tabText) .normalIconItems(normalIcon) .selectIconItems(selectIcon) .fragmentList(fragments) .fragmentManager(getSupportFragmentManager()) .build(); 怎么樣 是不是很Easy啊(￣▽￣)~*
2、加號版本
private String[] tabText = {"首頁", "發現", "", "消息", "我的"}; //未選中icon private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.add_image, R.mipmap.message, R.mipmap.me}; //選中時icon private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.add_image, R.mipmap.message1, R.mipmap.me1}; navigationBar.titleItems(tabText) .normalIconItems(normalIcon) .selectIconItems(selectIcon) .fragmentList(fragments) .mode(EasyNavigationBar.MODE_ADD) .fragmentManager(getSupportFragmentManager()) .build(); - 資源數組中添加文字和圖片，不需要文字可傳空串
- mode設置為EasyNavigationBar.MODE_ADD
基礎版和加號版本.png
3、中間添加自定義view
View view = LayoutInflater.from(this).inflate(R.layout.custom_add_view, null); navigationBar.titleItems(tabText) .normalIconItems(normalIcon) .selectIconItems(selectIcon) .fragmentManager(getSupportFragmentManager()) .fragmentList(fragments) .mode(EasyNavigationBar.MODE_ADD_VIEW) .addCustomView(view) .addLayoutRule(EasyNavigationBar.RULE_CENTER) .build(); - addCustomView添加自定義好的view
-
mode設置為EasyNavigationBar.MODE_ADD_VIEW
自定義中間按鈕
屬性
- 什么？不過癮？看看下面給你提供可以更改的屬性，滿足你的需求（xml也可設置）
navigationBar.titleItems(tabText) //必傳 Tab文字集合 .normalIconItems(normalIcon) //必傳 Tab未選中圖標集合 .selectIconItems(selectIcon) //必傳 Tab選中圖標集合 .fragmentList(fragments) //必傳 fragment集合 .fragmentManager(getSupportFragmentManager()) //必傳 .iconSize(20) //Tab圖標大小 .tabTextSize(10) //Tab文字大小 .tabTextTop(2) //Tab文字距Tab圖標的距離 .normalTextColor(Color.parseColor("#666666")) //Tab未選中時字體顏色 .selectTextColor(Color.parseColor("#333333")) //Tab選中時字體顏色 .scaleType(ImageView.ScaleType.CENTER_INSIDE) //同 ImageView的ScaleType .navigationBackground(Color.parseColor("#80000000")) //導航欄背景色 .onTabClickListener(new EasyNavigationBar.OnTabClickListener() { //Tab點擊事件 return true 頁面不會切換 @Override public boolean onTabClickEvent(View view, int position) { return false; } }) .smoothScroll(false) //點擊Tab Viewpager切換是否有動畫 .canScroll(false) //Viewpager能否左右滑動 .mode(EasyNavigationBar.MODE_ADD) //默認MODE_NORMAL 普通模式 //MODE_ADD 帶加號模式 .anim(Anim.ZoomIn) //點擊Tab時的動畫 .addIconSize(36) //中間加號圖片的大小 .addLayoutHeight(100) //包含加號的布局高度 背景透明 所以加號看起來突出一塊 .navigationHeight(40) //導航欄高度 .lineHeight(100) //分割線高度 默認1px .lineColor(Color.parseColor("#ff0000")) .addLayoutRule(EasyNavigationBar.RULE_BOTTOM) //RULE_CENTER 加號居中addLayoutHeight調節位置 EasyNavigationBar.RULE_BOTTOM 加號在導航欄靠下 .addLayoutBottom(10) //加號到底部的距離 .hasPadding(true) //true ViewPager布局在導航欄之上 false有重疊 .hintPointLeft(-3) //調節提示紅點的位置hintPointLeft hintPointTop（看文檔說明） .hintPointTop(-3) .hintPointSize(6) //提示紅點的大小 .msgPointLeft(-10) //調節數字消息的位置msgPointLeft msgPointTop（看文檔說明） .msgPointTop(-10) .msgPointTextSize(9) //數字消息中字體大小 .msgPointSize(18) //數字消息紅色背景的大小 .addAlignBottom(true) //加號是否同Tab文字底部對齊 RULE_BOTTOM時有效；