Android底部导航栏创建——ViewPager + RadioGroup

2024-01-28 09:12
文章标签 android 创建 底部 导航 radiogroup viewpager

本文主要是介绍Android底部导航栏创建——ViewPager + RadioGroup，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Android底部导航栏有多种实现方式，本文详解其中的ViewPager + RadioGroup方式的实现步骤。

我们先来看以下看一下最终做出的效果，使大家有个基本概念。

本结构特点：

1，ViewPager部分触摸左右滑动切换页面，RadioGroup部分中的RadioButton随着自己对应的ViewPager页面出现选中时的状态，包括改变背景颜色，

改变文字颜色，改变图片。其他RadioButton则是未被选中时的状态；

2，当用户点击RadioGroup部分中的RadioButton，被点击的RadioButton出现被选中时的颜色，ViewPager界面对应于RadioButton的页面会出现在当前界面。

可以看到，ViewPager和RadioGroup可以双向联动，不是单向传递。

下面我们通过一个实例完全弄懂ViewPager + RadioGroup结构的用法

首先创建出我们界面的布局，上边一个ViewPager，中间 一条分隔线，下边一个RadioGroup

我们在一个Activity的布局中创建如下的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><!--上边为ViewPager--><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><!--中间为一条分割线--><Viewandroid:background="@color/divider"android:layout_width="match_parent"android:layout_height="1dp"/><!--最下边为RadioGroup--><RadioGroupandroid:id="@+id/radioGroup"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><!--第一个RadioButton--><RadioButtonandroid:id="@+id/button_1"android:text="button_1"android:button="@null"android:textColor="@color/radiobutton_color_selector"android:background="@drawable/radiobutton_bg_selector"android:gravity="center"android:layout_weight="1"android:drawableTop="@drawable/radiobutton_pic_selector"android:layout_width="wrap_content"android:layout_height="wrap_content" /><!--第二个RadioButton--><RadioButtonandroid:id="@+id/button_2"android:text="button_2"android:button="@null"android:textColor="@color/radiobutton_color_selector"android:background="@drawable/radiobutton_bg_selector"android:gravity="center"android:layout_weight="1"android:drawableTop="@drawable/radiobutton_pic_selector"android:layout_width="wrap_content"android:layout_height="wrap_content" /><!--第三个RadioButton--><RadioButtonandroid:id="@+id/button_3"android:text="button_3"android:button="@null"android:textColor="@color/radiobutton_color_selector"android:background="@drawable/radiobutton_bg_selector"android:gravity="center"android:layout_weight="1"android:drawableTop="@drawable/radiobutton_pic_selector"android:layout_width="wrap_content"android:layout_height="wrap_content" /><!--第四个RadioButton--><RadioButtonandroid:id="@+id/button_4"android:text="button_4"android:button="@null"android:textColor="@color/radiobutton_color_selector"android:background="@drawable/radiobutton_bg_selector"android:gravity="center"android:layout_weight="1"android:drawableTop="@drawable/radiobutton_pic_selector"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RadioGroup></LinearLayout>

　布局中重要属性说明：

　①ViewPager的android:layout_height属性值为0，android：layout_weight属性值为1。这两个属性值配合使用的意义是：

　　在竖直方向上ViewPager占满父控件的剩余空间，也就是占据LinearLayout中除去分隔线和RadioGroup的剩余空间。

　　关于android:layout_weight属性的详细用法请参考：android:layout_weight属性的使用方法总结 - chironmy - 博客园                      

　②RadioButton的android:button属性值为@null。这个属性值的意义是，去除RadioGroup默认自带显示的小圆圈。

　③RadioButton的android:gravity属性值为center。这个属性值的意义是，使RadioButton的内容（图片和文字）居中。注意，内容默认情况没有居中。

　④RadioGroup的android:orientation属性值为horizontal。意为，水平布置其中的RadioButton。

　⑤RadioButton的android:textColor属性值为@color/radiobutton_color_selector，是一个颜色状态选择器。颜色状态选择器就是一个定义在res/color目录

      下的xml文件，color目录需要我们手动创建。颜色状态选择器的代码如下：　　

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#f00" android:state_checked="true"/>

    <item android:color="#f00" android:state_pressed="true"/>

    <item android:color="#f00" android:state_selected="true"/>

    <!--没被选中时的颜色-->

    <item android:color="#000"/>

</selector>

关于状态选择器的更详细知识，请参考文章http://www.cnblogs.com/baipengzhan/p/6284682.html                       

⑥RadioButton的android:background属性值为@drawable/radiobutton_bg_selector，这一个背景状态选择器，用来改变背景颜色，代码如下：

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@color/radiobutton_bg_selected"/>

    <item android:state_checked="true" android:drawable="@color/radiobutton_bg_selected"/>

    <item android:state_pressed="true" android:drawable="@color/radiobutton_bg_selected"/>

    <!--未被选中-->

    <item android:drawable="@color/radiobutton_bg_normal" />

</selector>

这个状态选择器是放置在res/drawable目录下的一个普通状态选择器，该选择器的属性android:drawable的属性值不能直接设置颜色，

颜色要封装在values目录下的colors.xml文件中，否则出错。

⑦RadioButton的android:drawableTop属性值为@drawable/radiobutton_pic_selector，是一个普通的状态选择器，用来改变图片，代码如下：

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@mipmap/ic_selected"/>

    <item android:state_checked="true" android:drawable="@mipmap/ic_selected"/>

    <item android:state_pressed="true" android:drawable="@mipmap/ic_selected"/>

    <!--未被选中-->

    <item android:drawable="@mipmap/ic_launcher"/>

</selector>

该状态选择器同样放置在res/drawable目录下，选择器的属性值android:drawable属性值变为了图片，注意代码写到此处时，系统可能不会提示，

需要手动将该属性值添加进来。

更多关于状态选择器的知识请参考文章http://www.cnblogs.com/baipengzhan/p/6284682.html  

创建出ViewPager页面盛放的Fragment 

我们创建出对应于四个RadioButton的四个Fragment，每个Fragment中盛放一个TextView。下边只列出一个Fragment的写法，剩余的相似，请各位朋友自己写写哦。

public class Fragment_1 extends Fragment {private View mView;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {//注意View对象的重复使用，以便节省资源if(mView == null) {mView = inflater.inflate(R.layout.fragment_1_layout,container,false);}return mView;}
}

Fragment_1对应的布局：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:gravity="center"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <!--创建TextView-->

    <TextView

        android:text="pager_1"

        android:textSize="28sp"

        android:textColor="#00f"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

在Activity中进行主要逻辑处理

我们在Activity中主要进行的工作如下：

①监听ViewPager，改变RadioGroup中的RadioButton；

②监听RadioGroup中的RadioButton，改变ViewPager；

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

package com.example.chironmy.bottomnavigation;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.view.ViewGroup;

import android.widget.RadioButton;

import android.widget.RadioGroup;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{

    private ViewPager viewPager;

    private RadioGroup radioGroup;

    private RadioButton button_1;

    private RadioButton button_2;

    private RadioButton button_3;

    private RadioButton button_4;

    private Fragment_1 fragment_1;

    private Fragment_2 fragment_2;

    private Fragment_3 fragment_3;

    private Fragment_4 fragment_4;

    private List<Fragment> list;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //初始化界面

        initView();

    }

    //初始化界面

    private void initView() {

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        radioGroup = (RadioGroup) findViewById(R.id.radioGroup);

        //找到四个按钮

        button_1 = (RadioButton) findViewById(R.id.button_1);

        button_2 = (RadioButton) findViewById(R.id.button_2);

        button_3 = (RadioButton) findViewById(R.id.button_3);

        button_4 = (RadioButton) findViewById(R.id.button_4);

        //创建Fragment对象及集合

        fragment_1 = new Fragment_1();

        fragment_2 = new Fragment_2();

        fragment_3 = new Fragment_3();

        fragment_4 = new Fragment_4();

        //将Fragment对象添加到list中

        list = new ArrayList<>();

        list.add(fragment_1);

        list.add(fragment_2);

        list.add(fragment_3);

        list.add(fragment_4);

        //给viewPager设置适配器，以显示内容

        MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(adapter);

        //设置RadioGroup开始时设置的按钮，设置第一个按钮为默认值

        radioGroup.check(R.id.button_1);

        //设置Viewpager第一次显示的页面

        viewPager.setCurrentItem(0,true);

        //设置按钮点击监听

        button_1.setOnClickListener(this);

        button_2.setOnClickListener(this);

        button_3.setOnClickListener(this);

        button_4.setOnClickListener(this);

        //设置ViewPager页面监听

        viewPager.addOnPageChangeListener(this);

    }

    @Override

    public void finish() {

        ViewGroup viewGroup = (ViewGroup) getWindow().getDecorView();

        viewGroup.removeAllViews();

        super.finish();

    }

    //创建ViewPager盛放Fragment的适配器类

    public class MyViewPagerAdapter extends FragmentPagerAdapter {

        public MyViewPagerAdapter(FragmentManager fm) {

            super(fm);

        }

        //返回每个position对应的Fragment对象

        @Override

        public Fragment getItem(int position) {

            return list.get(position);

        }

        //返回list的长度，也就是Fragment对象的个数

        @Override

        public int getCount() {

            return list.size();

        }

    }

    //处理点击的方法

    @Override

    public void onClick(View v) {

        //我们根据参数的id区别不同按钮

        //不同按钮对应着不同的ViewPager页面

        switch (v.getId()) {

            case R.id.button_1:

                viewPager.setCurrentItem(0,true);

                break;

            case R.id.button_2:

                viewPager.setCurrentItem(1,true);

                break;

            case R.id.button_3:

                viewPager.setCurrentItem(2,true);

                break;

            case R.id.button_4:

                viewPager.setCurrentItem(3,true);

                break;

            default:

                break;

        }

    }

    //处理页面变化的方法

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //本文章中我们使用这个方法，本方法处理页面变化后，也就是切换了不同的页面后所做的操作

    @Override

    public void onPageSelected(int position) {

        //根据当前展示的ViewPager页面，使RadioGroup对应的按钮被选中

        switch (position) {

            case 0:

                radioGroup.check(R.id.button_1);

                break;

            case 1:

                radioGroup.check(R.id.button_2);

                break;

            case 2:

                radioGroup.check(R.id.button_3);

                break;

            case 3:

                radioGroup.check(R.id.button_4);

                break;

            default:

                break;

        }

    }

    @Override

    public void onPageScrollStateChanged(int state) {

    }

}

注意：在onClick方法中，viewPager的setCurrentItem方法中的第二个参数的意义是：

　　　　　　　　　　　　当该参数为true时，viewPager换页时是平滑的换页，会有页面移动的效果；

　　　　　　　　　　　　该参数为false时，viewPager换页效果没有平滑的移动，页面会直接出现。

　　　　　　　　　　　　该方法有一个参数的重载方法，默认有平滑换页效果。　　

以上代码中很多可以优化，比如xml文件中大量的属性可以提取样式，等等，这里列出只是为了方便更多水平的读者读懂，请谅解。

这篇关于Android底部导航栏创建——ViewPager + RadioGroup的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/653171。

相关文章

【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
android-opencv-jni

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
顺序表之创建，判满，插入，输出

顺序表之创建，判满，插入，输出

文章目录 🍊自我介绍🍊创建一个空的顺序表，为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了，满了返回值1，否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以：点赞+关注+评论+收藏（一键四连）哦~ 🍊自我介绍   Hello,大家好，我是小珑也要变强（也是小珑），我是易编程·终身成长社群的一名“创始团队·嘉宾”
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Maven创建项目中的groupId, artifactId, 和 version的意思

Maven创建项目中的groupId, artifactId, 和 version的意思

文章目录 groupIdartifactIdversionname groupId 定义：groupId 是 Maven 项目坐标的第一个部分，它通常表示项目的组织或公司的域名反转写法。例如，如果你为公司 example.com 开发软件，groupId 可能是 com.example。作用：groupId 被用来组织和分组相关的 Maven artifacts，这样可以避免
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2