当前位置：首页 > article >正文

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

article 2024/11/25 15:15:43

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"?>
<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"
>
    <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;
    @Override
    protected 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);
        });
//下同，这里只举例一个