Java安卓导航栏设计开发（实战篇）—

1，设计构思：

导航栏应当具备以下条件：

点击导航栏中的按钮，以用来切换界面
点击导航栏应当只显示目前界面变色图标
导航栏应当附贴到全部界面的最下方

——既然需要附贴到最下方，可以使用【相对布局 <RelativeLayout>】中的属性：

android:layout_alignParentBottom="true"

——如果我们需要让程序灵活，切换的界面应当用【Fragment】而不是【Activity】，因此父布局应当继承【AppCompatActivity】而不是【Activity】

2，资源准备：

在编程之前，我们应当要找合适的图片资源以用来充当按钮图标

如果你也觉得baidu很烦还有水印，那么不妨试试Android自带的icon(图标)库：

右键res文件夹-->新建(N)-->Image Assets：

左半边如图：

Name：资源名名称
Asset type：资源类型 (image 图片，clip art 剪切画，text 文本)
Clip art：点击用来选择资源
Trim：是否去除透明效果
Padding：外边缘
Foreground：图标颜色
Background：图标背景颜色

3，XML：

当你的mipmap图形文件资源添加好后：

于是我们就可以用【RelativeLayout】装一个【LinearLayout】然后自定义【底部导航栏】了，个人觉得这是最基础的办法，其代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns: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"
><LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/fragment_part"android:orientation="vertical"android:gravity="center"/><LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:orientation="horizontal"android:gravity="center"><ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/ic_add_circle"android:adjustViewBounds="true"android:maxHeight="38dp"android:id="@+id/add_fragment_button"android:background="@color/white"/><ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/ic_data"android:adjustViewBounds="true"android:maxHeight="38dp"android:id="@+id/data_fragment_button"android:background="@color/white"/><ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/ic_info"android:adjustViewBounds="true"android:maxHeight="38dp"android:id="@+id/info_fragment_button"android:background="@color/white"/><ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/ic_more"android:adjustViewBounds="true"android:maxHeight="38dp"android:id="@+id/more_fragment_button"android:background="@color/white"/></LinearLayout></RelativeLayout>

我在【相对布局】中有放置了两个【线性布局】，上面一个用来放【碎片Fragment】，下面则是【导航栏】，下面的线性布局中有定义了4个横向占比一模一样的【图像按钮】，这一步读者应该能看懂源代码。

4，Java：

TODO:

点击后要求图片变颜色，并且不能同时两个图片换颜色
点击后跳转Fragment

先来定义变颜色模块：

思路很简单，点击后将【所有图片】归为【初始图片】，然后再把【被点击图片】变成【有色的】即可

首先，让我们先把所有图片资源找到并实例化：

    private ImageButton add_fragment_button;private ImageButton data_fragment_button;private ImageButton info_fragment_button;private ImageButton more_fragment_button;@Overrideprotected void onCreate(@Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_menu);data_fragment_button = findViewById(R.id.data_fragment_button);add_fragment_button = findViewById(R.id.add_fragment_button);info_fragment_button = findViewById(R.id.info_fragment_button);more_fragment_button = findViewById(R.id.more_fragment_button);ImageButton[] imageButtons = { add_fragment_button , data_fragment_button , info_fragment_button , more_fragment_button };int[] res = { R.mipmap.ic_add_circle , R.mipmap.ic_data , R.mipmap.ic_info , R.mipmap.ic_more };/*省略若干个代码*/}

其次在定义【初始化所有图片函数】：

public void resetAllImageSource( ImageButton[] imageButtons , int[] res ){if (imageButtons.length != res.length )throw new IllegalArgumentException("图像按钮与资源数量不匹配");for ( int i = 0 ; i < imageButtons.length ; i++)imageButtons[i].setImageResource(res[i]);}

再然后设置点击更换【Fragment】事务函数：

public void changeFragment(int id , Fragment fragment){FragmentManager fragmentManager = getSupportFragmentManager();FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();fragmentTransaction.add(id , fragment);fragmentTransaction.commit();}

之后给【图片按钮】设置【监听事件】，并且调用以上俩函数：

add_fragment_button.setOnClickListener(view -> {resetAllImageSource(imageButtons , res);add_fragment_button.setImageResource(R.mipmap.ic_add_circle_colored);addFragment addFragment = new addFragment();changeFragment( R.id.fragment_part , addFragment);});
//下同，这里只举例一个