前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AndroidStudio制作底部导航栏以及用Fragment实现切换功能

AndroidStudio制作底部导航栏以及用Fragment实现切换功能

作者头像
达达前端
发布2019-07-03 12:16:37
7.7K0
发布2019-07-03 12:16:37
举报
文章被收录于专栏:达达前端

前言

大家好,我是 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代码块:

代码语言:javascript
复制
<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>

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

代码语言:javascript
复制
<!--实现在底部,水平排列按钮-->
<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>

实例化控件

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

代码语言:javascript
复制
//先实例化控件,那我给出自己打的实例化代码
//来自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 ...;

然后

代码语言:javascript
复制
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来判断当前选的按钮

示例代码

代码语言:javascript
复制
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() 方法中加上导航栏区域的响应

代码语言:javascript
复制
@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() 中添加监听器

代码语言:javascript
复制
bottom_bar_1_btn.setOnClickListener(this);

三个 fragment 的创建

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

示例代码块

代码语言:javascript
复制
<?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里的代码

通常用这个来展示,但是代码过长,我们来简化一下

代码语言:javascript
复制
/*
* FragmentManager manager = getSupportFragmentManager();
* FragmentTransaction transaction = manager.beginTransaction();
* transaction.add(R.id.main_body,new CourseFragment()).commit();
* */

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

代码语言:javascript
复制
/用于打开初始页面
 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()中添加即可。

代码语言:javascript
复制
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知识点,有兴趣可以继续关注
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.04.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 学习目标
      • 图片资源
        • activity_main 布局
          • 实例化控件
            • 底部导航栏状态的切换方法
              • 实现底部导航栏的响应
                • 三个 fragment 的创建
                  • 三个fragment的显示和切换
                    • 总结
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档