zoukankan      html  css  js  c++  java
  • AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言

    大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢

    学习目标

    AndroidStudio制作底部导航栏以及用Fragment实现切换功能,用户点击底部导航栏可以实现三个模块的跳转。

    图片资源

    需要底部导航栏三个点击按钮的图片资源
    main_button_1.png,main_button_2.png,main_button_3.png

    以及点击变换的图片资源
    main_button_1_selected.png,main_button_2_selected.png,main_button_3_selected.png

    以上图片资源都放进drawable文件夹中

    activity_main 布局

    在 MainActivity 页面中主要有两个区域:

    • 一个是放 Fragment 的 main_body
    • 一个是放底部导航栏的 main_bottom_bar

    主要的Fragment代码块:

    <LinearLayout
            android:orientation="vertical"
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--标题栏-->
            <include layout="@layout/main_title_bar" />
            <!--放置Fragment的main_body-->
            <RelativeLayout
                android:id="@+id/main_body"
                android:background="@android:color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </RelativeLayout>
    </LinearLayout>
    

    主要的底部导航栏的代码块:

    <!--实现在底部,水平排列按钮-->
    <LinearLayout
         android:id="@+id/main_bottom_bar"
         android:layout_alignParentBottom="true"
         android:background="#F2F2F2"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="55dp">
        <RelativeLayout
             android:layout_weight="1"
             android:id="@+id/bottom_bar_1_btn"
             android:layout_width="0dp"
             android:layout_height="match_parent">
             <TextView
                 android:id="@+id/bottom_bar_text_1"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true"
                 android:layout_marginBottom="3dp"
                 android:gravity="center"
                 android:singleLine="true"
                 android:text="button_1"
                 android:textColor="#666666"
                 android:textSize="14sp"/>
             <ImageView
                 android:layout_width="27dp"
                 android:layout_height="27dp"
                 android:layout_above="@+id/bottom_bar_text_1"
                 android:layout_alignParentTop="true"
                 android:layout_centerHorizontal="true"
                 android:layout_marginTop="3dp"
                 android:id="@+id/bottom_bar_image_1"
                 android:src="@drawable/main_button_1"/>
         </RelativeLayout>
        ....<!--布局的代码总是繁琐又无聊的,记得要自己补全-->
    </LinearLayout>
    

    实例化控件

    实例化控件一些琐碎的代码:

    //先实例化控件,那我给出自己打的实例化代码
    //来自main_title_bar.xml
        private TextView tv_main_title;//标题
        private TextView tv_back;//返回按钮
        private RelativeLayout title_bar;
    //来自activity_main.xml
        private RelativeLayout main_body;
        private TextView bottom_bar_text_1;
        private ImageView bottom_bar_image_1;
        ...
        private LinearLayout main_bottom_bar;
        private RelativeLayout bottom_bar_1_btn;
        private RelativeLayout ...;
    

    然后

    initView();
    //实例化
    private void initView(){
            //标题显示
            tv_back=findViewById(R.id.tv_back);
            tv_main_title=findViewById(R.id.tv_main_title);
            title_bar=findViewById(R.id.title_bar);
            //底部导航栏
            main_body=findViewById(R.id.main_body);
            bottom_bar_text_1=findViewById(R.id.bottom_bar_text_1);
            bottom_bar_image_1=findViewById(R.id.bottom_bar_image_1);
            ...
            //包含底部 android:id="@+id/main_bottom_bar"
            main_bottom_bar=findViewById(R.id.main_bottom_bar);
            //private RelativeLayout bottom_bar_1_btn;
            bottom_bar_1_btn=findViewById(R.id.bottom_bar_1_btn);
            //添加点击事件
           bottom_bar_1_btn.setOnClickListener(this);
           ...
           //技巧
           //tv_back.setVisibility(View.GONE);
            tv_main_title.setText("课程");
            title_bar.setBackgroundColor(Color.parseColor("#30B4FF"));
    }
    

    底部导航栏状态的切换方法

    给MainActivity加一个setSelectStatus() 方法,方法里用参数index来判断当前选的按钮

    示例代码

    private void setSelectStatus(int index) {
            switch (index){
                case 0:
                  //图片点击选择变换图片,颜色的改变,其他变为原来的颜色,并保持原有的图片
                  bottom_bar_image_1.setImageResource(R.drawable.main_button_1_selected);
                  bottom_bar_text_1.setTextColor(Color.parseColor("#0097F7"));
                  //其他的文本颜色不变
                  bottom_bar_text_2.setTextColor(Color.parseColor("#666666"));
                  bottom_bar_text_3.setTextColor(Color.parseColor("#666666"));
                  //图片也不变
                  bottom_bar_image_2.setImageResource(R.drawable.main_button_2);
                  bottom_bar_image_3.setImageResource(R.drawable.main_button_3);
                 break;
                case 1://同理如上
                 ...
                 break;
                case 2://同理如上
                 ...
                 break;
      }
    }
    

    实现底部导航栏的响应

    导航栏文本颜色和图片切换效果的方法写好了,接下来是点击响应的方法

    给MainActivity加上View.OnClickListener接口

    在生成的 onClick() 方法中加上导航栏区域的响应

    @Override
        public void onClick(View v) {
            switch (v.getId()){
              case R.id.bottom_bar_1_btn:
                    setSelectStatus(0);
                    break;
              case R.id.bottom_bar_2_btn:
                    setSelectStatus(1);
                    break;
              case R.id.bottom_bar_3_btn:
                    setSelectStatus(2);
                    break;
            }
    }
    

    别忘了在initView() 中添加监听器

    bottom_bar_1_btn.setOnClickListener(this);
    

    三个 fragment 的创建

    就是简单的创建三个布局,展现Fragment_1/2/3 即可

    示例代码块

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">
        <TextView
            android:text="Fragment_1"
            android:textColor="@android:color/black"
            android:textSize="50sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    

    然后通过我之前写的插件自动生成三个Fragemnt ,就可以了不用管生成的Fragement_1/2/3.java文件了,
    插件文章
    《 Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率 》

    三个fragment的显示和切换

    在MainActivity里把AppCompatActivity改为FragmentActivity

    把Fragment加到Activity里的代码
    通常用这个来展示,但是代码过长,我们来简化一下

    /*
    * FragmentManager manager = getSupportFragmentManager();
    * FragmentTransaction transaction = manager.beginTransaction();
    * transaction.add(R.id.main_body,new CourseFragment()).commit();
    * */
    

    我们先来添加一个setMain() 方法,来显示打开界面时,显示的初始页面

    /用于打开初始页面
     private void setMain() {
          //getSupportFragmentManager() -> beginTransaction() -> add -> (R.id.main_boy,显示课程 new CourseFragment()
          this.getSupportFragmentManager().beginTransaction().add(R.id.main_body,new CourseFragment()).commit();
     }
    

    上面的代码中可以看到相对来说比较少,那我们就用这个,然后我们来实现点击底部导航栏来切换响应的fragment,我们在onClick()中添加即可。

    case R.id.bottom_bar_1_btn:
                    //添加
                    getSupportFragmentManager().beginTransaction().replace(R.id.main_body,new Button_1Fragment()).commit();
                    setSelectStatus(0);
                    break;
    

    如果觉得不错,那就点个赞吧!❤️

    总结

    • 本文讲了AndroidStudio制作底部导航栏以及用Fragment实现切换功能,界面的布局介绍,如果您还有更好地理解,欢迎沟通
    • 定位:分享 Android&Java知识点,有兴趣可以继续关注
  • 相关阅读:
    显示文件本地文件夹
    Select Dependencies选择依赖项
    搜索小技巧
    783. Minimum Distance Between BST Nodes BST节点之间的最小距离
    5. Longest Palindromic Substring 最长的回文子串
    12. Integer to Roman 整数转罗马数字
    3. Longest Substring Without Repeating Characters 最长的子串不重复字符
    539. Minimum Time Difference 最小时差
    43. Multiply Strings 字符串相乘
    445. Add Two Numbers II 两个数字相加2
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11932652.html
Copyright © 2011-2022 走看看