自学内容网 自学内容网

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

1,设计构思:

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

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

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

android:layout_alignParentBottom="true"

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


 2,资源准备:

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

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

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


        左半边如图:

  1.  Name:资源名名称
  2. Asset type:资源类型 (image 图片 ,clip art 剪切画,text 文本)
  3. Clip art:点击用来选择资源
  4. Trim:是否去除透明效果
  5. Padding:外边缘
  6. Foreground:图标颜色
  7. 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);
        });
//下同,这里只举例一个

5,总结:

        到这一步导航栏功能设置完毕,本章需要读者注意是否图形资源成功添加,以及前几章所提到的碎片(Fragment)功能的使用,总体难度不算太高。


原文地址:https://blog.csdn.net/weixin_66815042/article/details/143804968

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!