Android底部菜單欄實(shí)現(xiàn)的實(shí)例代碼
更新時(shí)間：2018年05月14日 13:57:32 作者：Garvey Lian
這篇文章主要介紹了Android底部菜單欄實(shí)現(xiàn)的實(shí)例代碼，本文通過(guò)使用RadioGroup來(lái)實(shí)現(xiàn)底部導(dǎo)航菜單欄。現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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)文章
Android NDK開(kāi)發(fā)簡(jiǎn)單程序分享（Hello Word!）
本文主要對(duì)Android NDK開(kāi)發(fā)簡(jiǎn)單程序（Hello Word!）的實(shí)現(xiàn)步驟及方法進(jìn)行詳細(xì)介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android WebView中圖片瀏覽及縮放效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細(xì)介紹了RecyclerView上拉加載封裝代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
我們都知道，下載助手，比如360，百度的 手機(jī)助手，下載APP的時(shí)候 ，都可以同時(shí)下載多個(gè)，所以下載肯定是多線程的，所以我們就需要一個(gè)線程工具類(lèi)來(lái)管理我們的線程，這個(gè)工具類(lèi)的核心，就是線程池。接下來(lái)給大家介紹Android版多線程下載 仿下載助手（最新）2015-08-08
這篇文章給大家整理了關(guān)于Android進(jìn)階資深開(kāi)發(fā)必備技能-切面編程的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
Android Flutter實(shí)現(xiàn)五種酷炫文字動(dòng)畫(huà)效果詳解
animated_text_kit這一動(dòng)畫(huà)庫(kù)有多種文字動(dòng)畫(huà)效果，文中將利用它實(shí)現(xiàn)五種酷炫的文字動(dòng)畫(huà)：波浪涌動(dòng)效果、波浪線跳動(dòng)文字組、彩虹動(dòng)效、滾動(dòng)廣告牌效果和打字效果，需要的可以參考一下2022-03-03
PowerManagerService之自動(dòng)滅屏流程解析
這篇文章主要為大家介紹了PowerManagerService之自動(dòng)滅屏流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
總結(jié)Android App內(nèi)存優(yōu)化之圖片優(yōu)化
網(wǎng)上有很多大拿分享的關(guān)于Android性能優(yōu)化的文章，主要是通過(guò)各種工具分析，使用合理的技巧優(yōu)化APP的體驗(yàn)，提升APP的流暢度，但關(guān)于內(nèi)存優(yōu)化的文章很少有看到。下面是我在實(shí)踐過(guò)程中使用的一些方法，很多都是不太成熟的項(xiàng)目，只是將其作為一種處理方式分享給大家。2016-08-08
windows10安裝adb/fastboot驅(qū)動(dòng)超詳細(xì)圖文教程
這篇文章主要介紹了windows10安裝adb/fastboot超詳細(xì)圖文教程,安裝方法也很簡(jiǎn)單，只要adb安裝成功，fastboot就安裝好了，文中給大家介紹了問(wèn)題分析及解決方法，需要的朋友可以參考下2023-01-01
Android自定義控件之圓形進(jìn)度條動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之圓形進(jìn)度條動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07