Android开发–自定义动态导航栏的实现
最近自己用2周的时间和队友零基础尝试开发了一个简单的安卓应用，自己完成了前端和后台的编写，现在把在开发过程中遇到的知识点整理一下，最开始的是导航栏的实现
内容概括
结构组成 设计App的时候准备以四个模块来完成App的设计，因此，在一开始的界面设计了一个MainActivity和4个Fragment来实现模块之间的切换，这里方便学习，已将部分代码省略，注重于动态导航栏的实现
App导航栏效果展示 这里可以看到背景变化的导航栏以及自定义图标：
设计思路
新建4个Fragment对应的对象
定义一个FragmentManager对象管理器来对Fragment对象进行管理
自定义函数hideFragments(FragmentTransaction fragmentTransaction)来实现对当前的Fragment隐藏的功能
自定义函数setChioceItem(int index)调用hideFragments(FragmentTransaction fragmentTransaction)和FragmentTransaction的提交实现Fragment之间的转换
实际开发中，为了让我们的导航栏更加的精美以及实现动态切换效果，特地引入了一个外接控件AHBottomNavigationItem来代替Button等常规控件
设置控件AHBottomNavigationItem的点击响应的事件来实现界面的切换
代码实现
xml文件的构成
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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" android:background="@color/color_tab_1"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <!--2. 存放四个Fragment--> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/white"></FrameLayout> <TextView android:layout_marginTop="45dp" android:layout_height="wrap_content" android:layout_width="wrap_content" /> </LinearLayout> </ScrollView> <com.aurelhubert.ahbottomnavigation.AHBottomNavigation android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginTop="10dp" android:layout_gravity="bottom" android:layout_weight="1" app:selectedBackgroundVisible="true" /> </android.support.design.widget.CoordinatorLayout>MainActivity构成
package com.example.outlier.test; import android.os.Bundle; import android.os.Handler; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.content.ContextCompat; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.util.Log; import java.util.ArrayList; import com.aurelhubert.ahbottomnavigation.AHBottomNavigation; import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem; public class MainActivity extends AppCompatActivity { //这个变量表明当前是否处于登陆状态 private static boolean stateLogged = false; public static boolean getStateLogged() { return stateLogged; } public static void setStateLogged(boolean i) { stateLogged = i; } //定义Fragement对象 private Fragment fg1; private Fragment fg2; private Fragment fg3; private Fragment fg4; // 定义FragmentManager对象管理器 private FragmentManager fragmentManager; private ArrayList<AHBottomNavigationItem> bottomNavigationItems = new ArrayList<>(); private Handler handler = new Handler(); // UI private AHBottomNavigation bottomNavigation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.hide(); } fragmentManager = getSupportFragmentManager(); setChioceItem(0); initUI(); action(); } @Override protected void onDestroy() { super.onDestroy(); handler.removeCallbacksAndMessages(null); } /** * Init UI */ private void initUI() { bottomNavigation = (AHBottomNavigation) findViewById(R.id.bottom_navigation); AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.tab_1, R.drawable.buttonhome_06, R.color.color_tab_1); AHBottomNavigationItem item2 = new AHBottomNavigationItem(R.string.tab_2, R.drawable.buttonhome_08, R.color.color_tab_2); AHBottomNavigationItem item3 = new AHBottomNavigationItem(R.string.tab_3, R.drawable.buttonhome_11, R.color.color_tab_1); AHBottomNavigationItem item4 = new AHBottomNavigationItem(getString(R.string.tab_4), ContextCompat.getDrawable(this, R.drawable.buttonhome_03), ContextCompat.getColor(this, R.color.color_tab_2)); bottomNavigationItems.add(item1); bottomNavigationItems.add(item2); bottomNavigationItems.add(item3); bottomNavigationItems.add(item4); bottomNavigation.addItems(bottomNavigationItems); bottomNavigation.setTranslucentNavigationEnabled(true); bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() { @Override public boolean onTabSelected(int position, boolean wasSelected) { switch (position) { case 0: setChioceItem(0); break; case 1: setChioceItem(1); break; case 2: setChioceItem(2); break; case 3: setChioceItem(3); break; default: break; } return true; } }); } public void action() { bottomNavigation.setColored(true); bottomNavigation.restoreBottomNavigation(true); bottomNavigation.setSelectedBackgroundVisible(true); AHBottomNavigation.TitleState state = AHBottomNavigation.TitleState.ALWAYS_SHOW; bottomNavigation.setTitleState(state); } /** * 设置点击选项卡的事件处理 * * @param index 选项卡的标号：0, 1, 2, 3 */ private void setChioceItem(int index) { FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); hideFragments(fragmentTransaction); switch (index) { case 0: // firstImage.setImageResource(R.drawable.XXXX); 需要的话自行修改 // firstLayout.setBackgroundColor(gray); // 如果fg1为空，则创建一个并添加到界面上 if (fg1 == null) { fg1 = new FirstFragment(); Log.e("", "" + fg1); fragmentTransaction.add(R.id.content, fg1); } else { // 如果不为空，则直接将它显示出来 fragmentTransaction.show(fg1); } break; case 1: if (fg2 == null) { fg2 = new SecondPage(); fragmentTransaction.add(R.id.content, fg2); } else { fragmentTransaction.show(fg2); } break; case 2: // thirdImage.setImageResource(R.drawable.XXXX); // thirdLayout.setBackgroundColor(gray); if (fg3 == null) { fg3 = new ThirdFragment(); fragmentTransaction.add(R.id.content, fg3); } else { fragmentTransaction.show(fg3); } break; case 3: // fourthImage.setImageResource(R.drawable.XXXX); // fourthLayout.setBackgroundColor(gray); if (fg4 == null) { fg4 = new FourthFragment(); fragmentTransaction.add(R.id.content, fg4); } else { fragmentTransaction.show(fg4); } break; } fragmentTransaction.commit(); // 提交 } /** * 隐藏Fragment * * @param fragmentTransaction */ private void hideFragments(FragmentTransaction fragmentTransaction) { if (fg1 != null) { fragmentTransaction.hide(fg1); } if (fg3 != null) { fragmentTransaction.hide(fg3); } if (fg2 != null) { fragmentTransaction.hide(fg2); } if (fg4 != null) { fragmentTransaction.hide(fg4); } } }分析xml文件的构成：
这里我们实现切换`Fragment`的布局是`content`这一个帧布局 然后`show_main_title`是自己定义的一个标题栏，**上面xml代码已经删除** 至于上面的`ragment_cycle_viewpager_content`是实现一个轮播图，上面的代码里面**已经去掉了** `bottom_navigation`是我们定义的点击之后切换`Fragment`的控件分析Activity的实现代码
这里我们按照设计思路的来：
新建4个Fragment对应的对象
private Fragment fg1; private Fragment fg2; private Fragment fg3; private Fragment fg4;定义一个FragmentManager对象管理器来对Fragment对象进行管理
private FragmentManager fragmentManager;自定义函数hideFragments(FragmentTransaction fragmentTransaction)来实现对当前的Fragment隐藏的功能
private void hideFragments(FragmentTransaction fragmentTransaction) { if (fg1 != null) { fragmentTransaction.hide(fg1); } if (fg3 != null) { fragmentTransaction.hide(fg3); } if (fg2 != null){ fragmentTransaction.hide(fg2); } if (fg4 != null) { fragmentTransaction.hide(fg4); } }自定义函数setChioceItem(int index)调用hideFragments(FragmentTransaction fragmentTransaction)和FragmentTransaction的提交实现Fragment之间的转换
private void setChioceItem(int index) {FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); hideFragments(fragmentTransaction); switch (index) { case 0: // firstImage.setImageResource(R.drawable.XXXX); 需要的话自行修改 // firstLayout.setBackgroundColor(gray); // 如果fg1为空，则创建一个并添加到界面上 if (fg1 == null) { fg1 = new FirstFragment(); Log.e("",""+fg1); fragmentTransaction.add(R.id.content, fg1); } else { // 如果不为空，则直接将它显示出来 fragmentTransaction.show(fg1);
} title_text_tv.setText("走山看水行天下"); icon_back.setVisibility(View.INVISIBLE); control.setVisibility(View.VISIBLE); break; case 1: title_text_tv.setText("行程"); icon_back.setVisibility(View.INVISIBLE); control.setVisibility(View.GONE); if (fg2 == null) { fg2 = new SecondPage(); fragmentTransaction.add(R.id.content, fg2); } else { fragmentTransaction.show(fg2); } break; case 2: // thirdImage.setImageResource(R.drawable.XXXX); // thirdLayout.setBackgroundColor(gray); if (fg3 == null) { fg3 = new ThirdFragment(); fragmentTransaction.add(R.id.content, fg3); } else { fragmentTransaction.show(fg3); } title_text_tv.setText("点评"); icon_back.setVisibility(View.INVISIBLE); control.setVisibility(View.GONE); break; case 3: // fourthImage.setImageResource(R.drawable.XXXX); // fourthLayout.setBackgroundColor(gray); if (fg4 == null) { fg4 = new FourthFragment(); fragmentTransaction.add(R.id.content, fg4); } else { fragmentTransaction.show(fg4); } title_text_tv.setText("我的"); icon_back.setVisibility(View.INVISIBLE); control.setVisibility(View.GONE); break;} fragmentTransaction.commit(); // 提交 } ```
实际开发中，为了让我们的导航栏更加的精美以及实现动态切换效果，特地引入了一个外接控件AHBottomNavigationItem来代替Button等常规控件 bottomNavigation = (AHBottomNavigation) findViewById(R.id.bottom_navigation); AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.tab_1, R.drawable.buttonhome_06, R.color.color_tab_1); AHBottomNavigationItem item2 = new AHBottomNavigationItem(R.string.tab_2, R.drawable.buttonhome_08, R.color.color_tab_2); AHBottomNavigationItem item3 = new AHBottomNavigationItem(R.string.tab_3, R.drawable.buttonhome_11, R.color.color_tab_1); AHBottomNavigationItem item4 = new AHBottomNavigationItem(getString(R.string.tab_4), ContextCompat.getDrawable(this, R.drawable.buttonhome_03), ContextCompat.getColor(this, R.color.color_tab_2)); bottomNavigationItems.add(item1); bottomNavigationItems.add(item2); bottomNavigationItems.add(item3); bottomNavigationItems.add(item4); bottomNavigation.addItems(bottomNavigationItems); bottomNavigation.setTranslucentNavigationEnabled(true); 设置控件AHBottomNavigationItem的点击响应的事件来实现界面的切换 bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() { @Override public boolean onTabSelected(int position, boolean wasSelected) { switch (position) { case 0: setChioceItem(0); break; case 1: setChioceItem(1); break; case 2: setChioceItem(2); break; case 3: setChioceItem(3); break; default: break; } return true; } });} ```
1. ***注意***： *这里的导航栏需要一个包的导入，在gradle文件中加入：* ``` compile 'com.aurelhubert:ahbottomnavigation:2.0.6' ``` *位置是：* 最后最后：
方便大家的学习：
代码地址：http://download.csdn.net/detail/qq_34861102/9922478 原文地址：http://blog.csdn.net/qq_34861102/article/details/76737673
升级自定义标题栏实现：http://blog.csdn.net/qq_34861102/article/details/76772717
