Android底部菜單欄實(shí)現(xiàn)的實(shí)例代碼
Android 使用RadioGroup 實(shí)現(xiàn)底部導(dǎo)航菜單欄。
一、主界面布局的實(shí)現(xiàn):
先來(lái)張效果圖:

介紹一下總體界面包括的內(nèi)容:底部五個(gè)導(dǎo)航按鈕,主界面包括一個(gè)FrameLayout用來(lái)放五個(gè)Fragment。點(diǎn)擊底部按鈕會(huì)對(duì)應(yīng)跳轉(zhuǎn)到指定的界面。
實(shí)現(xiàn)布局: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="com.garvey.activitys.MainActivity"> <FrameLayout android:id="@+id/id_fragment_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/id_diverline"></FrameLayout> <View android:id="@+id/id_diverline" android:layout_above="@+id/id_bottom_tags" android:layout_width="match_parent" android:layout_height="0.1dp" android:background="#C2C5CE"/> <LinearLayout android:id="@+id/id_bottom_tags" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true" android:background="@drawable/bt_tag_bg" android:orientation="horizontal"> <RadioGroup android:id="@+id/id_navcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:background="@color/transparent" android:gravity="center" android:orientation="horizontal"> <RadioButton android:id="@+id/id_nav_btshouye" android:layout_width="0dp" android:checked="true" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@color/transparent" android:button="@null" android:clickable="true" android:drawablePadding="2dp" android:drawableTop="@drawable/x_nav_menu_sy" android:gravity="center" android:onClick="switchView" android:text="首頁(yè)" android:textColor="@drawable/x_nav_menu_color" android:textSize="10sp" /> <RadioButton android:id="@+id/id_nav_btgouwu" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@color/transparent" android:button="@null" android:clickable="true" android:drawablePadding="2dp" android:drawableTop="@drawable/x_nav_menu_gw" android:gravity="center" android:onClick="switchView" android:text="購(gòu)物" android:textColor="@drawable/x_nav_menu_color" android:textSize="10sp" /> <RadioButton android:id="@+id/id_nav_btfengshang" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@color/transparent" android:button="@null" android:clickable="true" android:drawablePadding="2dp" android:drawableTop="@drawable/x_nav_menu_fs" android:gravity="center" android:onClick="switchView" android:text="風(fēng)尚" android:textColor="@drawable/x_nav_menu_color" android:textSize="10sp" /> <RadioButton android:id="@+id/id_nav_btshequ" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@color/transparent" android:button="@null" android:clickable="true" android:drawablePadding="2dp" android:drawableTop="@drawable/x_nav_menu_sq" android:gravity="center" android:onClick="switchView" android:text="社區(qū)" android:textColor="@drawable/x_nav_menu_color" android:textSize="10sp" /> <RadioButton android:id="@+id/id_nav_btwode" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@color/transparent" android:button="@null" android:clickable="true" android:drawablePadding="2dp" android:drawableTop="@drawable/x_nav_menu_wd" android:gravity="center" android:onClick="switchView" android:text="我的" android:textColor="@drawable/x_nav_menu_color" android:textSize="10sp" /> </RadioGroup> </LinearLayout> </RelativeLayout>
編寫(xiě)selector 用來(lái)設(shè)置點(diǎn)擊后的背景變化:
x_nav_menu_fs.xml,x_nav_menu_gw.xml,x_nav_menu_sq.xml,x_nav_menu_sy.xml,x_nav_menu_wd.xml
例如x_nav_menu_sy.xml文件的書(shū)寫(xiě)為:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/tabitem_0" android:state_checked="true"></item> <item android:drawable="@mipmap/tabitem0"></item> </selector>
編寫(xiě)文字點(diǎn)擊后顏色的變化drawable:x_nav_menu_color.xml
<?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#CF75E9" android:state_checked="true"></item> <item android:color="#989898"></item> </selector>
編寫(xiě)底部菜單欄背景的drawablebt_tag_bg.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFFFFF" /> </shape>
按照上述方式的就完成了底部菜單欄的布局方式,同時(shí)在布局的時(shí)候我們?yōu)槊總€(gè)RadioButton設(shè)置了點(diǎn)擊監(jiān)聽(tīng)器,監(jiān)聽(tīng)方法是:switchView(View view)。
二、布局的代碼實(shí)現(xiàn)
創(chuàng)建五個(gè)fragment,分別對(duì)應(yīng)每個(gè)按鈕的界面,F(xiàn)ragment的代碼非常簡(jiǎn)單,例如下面一個(gè)Fragment:
package com.garvey.modules;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.garvey.babyshop.R;
/**
* 作者: Garvey on 2016/6/13.
* 郵箱: lianjiawei18@163.com
*/
public class ShouYeFragment extends Fragment{
// 緩存Fragment view
private View rootView;
private static ShouYeFragment shouYeFragment;
public ShouYeFragment(){}
public static ShouYeFragment getNewInstance(){
if (shouYeFragment ==null){
shouYeFragment =new ShouYeFragment();
}
return shouYeFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if (rootView == null) {
rootView = inflater.inflate(R.layout.fragment_shouye, container, false);
}
// 緩存的rootView需要判斷是否已經(jīng)被加過(guò)parent,
// 如果有parent需要從parent刪除,要不然會(huì)發(fā)生這個(gè)rootview已經(jīng)有parent的錯(cuò)誤。
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null) {
parent.removeView(rootView);
}
return rootView;
}
@Override
public void onResume() {
super.onResume();
}
}
然后編寫(xiě)MainActivity的代碼,首先確立界面對(duì)應(yīng)的索引:
public static final int VIEW_SHOUYE_INDEX = 0; public static final int VIEW_GOUWU_INDEX = 1; public static final int VIEW_FENGSHANG_INDEX = 2; public static final int VIEW_SHEQU_INDEX = 3; public static final int VIEW_WODE_INDEX = 4; private int temp_position_index = -1;
然后書(shū)寫(xiě)對(duì)應(yīng)的switchView(View view )方法來(lái)實(shí)現(xiàn)對(duì)應(yīng)的界面切換:
public void switchView(View view) {
switch (view.getId()) {
case R.id.id_nav_btshouye:
if (temp_position_index != VIEW_SHOUYE_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, syFragemnt);
mTransaction.commit();
}
temp_position_index = VIEW_SHOUYE_INDEX;
break;
case R.id.id_nav_btgouwu:
if (temp_position_index != VIEW_GOUWU_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, gwFragment);
mTransaction.commit();
}
temp_position_index = VIEW_GOUWU_INDEX;
break;
case R.id.id_nav_btfengshang:
if (temp_position_index != VIEW_FENGSHANG_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, fsFragment);
mTransaction.commit();
}
temp_position_index = VIEW_FENGSHANG_INDEX;
break;
case R.id.id_nav_btshequ:
if (temp_position_index != VIEW_SHEQU_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, sqFragment);
mTransaction.commit();
}
temp_position_index = VIEW_SHEQU_INDEX;
break;
case R.id.id_nav_btwode:
if (temp_position_index != VIEW_WODE_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, wdFragment);
mTransaction.commit();
}
temp_position_index = VIEW_WODE_INDEX;
break;
}
}
MainActivity的總代碼如下:
package com.garvey.activitys;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.RadioGroup;
import com.garvey.babyshop.R;
import com.garvey.modules.FengShangFragment;
import com.garvey.modules.GouWuFragment;
import com.garvey.modules.SheQuFragment;
import com.garvey.modules.ShouYeFragment;
import com.garvey.modules.WoDeFragment;
public class MainActivity extends AppCompatActivity {
/**
* 底部導(dǎo)航欄的widdget
*/
private RadioGroup mNavGroup;
private FragmentTransaction mTransaction;
/**
* 五個(gè)Fragments
*/
Fragment syFragemnt, gwFragment, fsFragment, sqFragment, wdFragment;
public static final int VIEW_SHOUYE_INDEX = 0;
public static final int VIEW_GOUWU_INDEX = 1;
public static final int VIEW_FENGSHANG_INDEX = 2;
public static final int VIEW_SHEQU_INDEX = 3;
public static final int VIEW_WODE_INDEX = 4;
private int temp_position_index = -1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mNavGroup = (RadioGroup) findViewById(R.id.id_navcontent);
syFragemnt = ShouYeFragment.getNewInstance();
gwFragment = GouWuFragment.getNewInstance();
fsFragment = FengShangFragment.getNewInstance();
sqFragment = SheQuFragment.getNewInstance();
wdFragment = WoDeFragment.getNewInstance();
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, syFragemnt);
mTransaction.commit();
}
public void switchView(View view) {
switch (view.getId()) {
case R.id.id_nav_btshouye:
if (temp_position_index != VIEW_SHOUYE_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, syFragemnt);
mTransaction.commit();
}
temp_position_index = VIEW_SHOUYE_INDEX;
break;
case R.id.id_nav_btgouwu:
if (temp_position_index != VIEW_GOUWU_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, gwFragment);
mTransaction.commit();
}
temp_position_index = VIEW_GOUWU_INDEX;
break;
case R.id.id_nav_btfengshang:
if (temp_position_index != VIEW_FENGSHANG_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, fsFragment);
mTransaction.commit();
}
temp_position_index = VIEW_FENGSHANG_INDEX;
break;
case R.id.id_nav_btshequ:
if (temp_position_index != VIEW_SHEQU_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, sqFragment);
mTransaction.commit();
}
temp_position_index = VIEW_SHEQU_INDEX;
break;
case R.id.id_nav_btwode:
if (temp_position_index != VIEW_WODE_INDEX) {
//顯示
mTransaction = getSupportFragmentManager().beginTransaction();
mTransaction.replace(R.id.id_fragment_content, wdFragment);
mTransaction.commit();
}
temp_position_index = VIEW_WODE_INDEX;
break;
}
}
}
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
SimpleCommand實(shí)現(xiàn)上傳文件或視頻功能(四)
這篇文章主要介紹了SimpleCommand實(shí)現(xiàn)上傳文件或視頻功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
Android利用Glide獲取圖片真正的寬高的實(shí)例
本篇文章主要介紹了Android利用Glide獲取圖片真正的寬高的實(shí)例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
Android Bitmap和Drawable的對(duì)比
這篇文章主要介紹了Android Bitmap和Drawable的對(duì)比的相關(guān)資料,需要的朋友可以參考下2017-05-05
Android筆記之:App自動(dòng)化之使用Ant編譯項(xiàng)目多渠道打包的使用詳解
本篇文章介紹了,Android筆記之:App自動(dòng)化之使用Ant編譯項(xiàng)目多渠道打包的使用詳解。需要的朋友參考下2013-04-04
Android端權(quán)限隱私的合規(guī)化處理實(shí)戰(zhàn)記錄
大家應(yīng)該都發(fā)現(xiàn)了,現(xiàn)在很多應(yīng)用市場(chǎng)都要求應(yīng)用上架需要用戶協(xié)議,這篇文章主要給大家介紹了關(guān)于Android端權(quán)限隱私合規(guī)化處理的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Android 軟鍵盤(pán)狀態(tài)并隱藏輸入法的實(shí)例
這篇文章主要介紹了Android 軟鍵盤(pán)狀態(tài)并隱藏輸入法的實(shí)例的相關(guān)資料,這里提供實(shí)例實(shí)現(xiàn)軟鍵盤(pán)切換并隱藏輸入法的鍵盤(pán),需要的朋友可以參考下2017-09-09
Android OkHttp的簡(jiǎn)單使用和封裝詳解
這篇文章主要介紹了Android OkHttp的簡(jiǎn)單使用和封裝詳解的相關(guān)資料,Android OKHttp的簡(jiǎn)單get、post的使用,再到它的封裝,需要的朋友可以參考下2016-12-12
Android基于OpenCV實(shí)現(xiàn)QR二維碼檢測(cè)
QR碼比普通一維條碼具有快速讀取和更大的存儲(chǔ)資料容量,也無(wú)需要像一維條碼般在掃描時(shí)需要直線對(duì)準(zhǔn)掃描儀。因此其應(yīng)用范圍已經(jīng)擴(kuò)展到包括產(chǎn)品跟蹤,物品識(shí)別,文檔管理,庫(kù)存營(yíng)銷(xiāo)等方面。本文講解Android基于OpenCV實(shí)現(xiàn)QR二維碼檢測(cè)的步驟2021-06-06

