原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html

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.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/> <!--中间为一条分割线-->
<View
android:background="@color/divider"
android:layout_width="match_parent"
android:layout_height="1dp"/> <!--最下边为RadioGroup-->
<RadioGroup
android:id="@+id/radioGroup"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"> <!--第一个RadioButton-->
<RadioButton
android: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-->
<RadioButton
android: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-->
<RadioButton
android: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-->
<RadioButton
android: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属性的详细用法请参考:http://www.cnblogs.com/baipengzhan/p/Android_layout_weight.html

 ②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目录需要我们手动创建。颜色状态选择器的代码如下:  

<?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,这一个背景状态选择器,用来改变背景颜色,代码如下:

<?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,是一个普通的状态选择器,用来改变图片,代码如下:

<?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
@Override
public 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对应的布局:

<?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;

代码如下:

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文件中大量的属性可以提取样式,等等,这里列出只是为了方便更多水平的读者读懂,请谅解。

好啦,ViewPager + RadioGroup结构我们到此就讲解完成了,感谢阅读!

  

  

Android底部导航栏创建——ViewPager + RadioGroup的更多相关文章

  1. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  2. Android底部导航栏

    Android底部导航栏 今天简单写了一个底部导航栏,封装了一个库,用法比较简单 效果图 Github地址:https://github.com/kongqw/KqwBottomNavigation ...

  3. Android底部导航栏(可滑动)----TabLayout+viewPager

    [TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...

  4. android底部导航栏实现

    第一种用radiobutton实现 https://wizardforcel.gitbooks.io/w3school-android/content/75.html 布局文件,使用radiogrou ...

  5. Android 底部导航栏实现一 Fragment-replace

    [效果](这里下载的软件收费的试用有水印) [推荐]这里推荐一个图标网http://iconfont.cn/.以上图标来自此图标网 [项目结构] [步骤] ①创建布局文件,写底部导航栏 <?xm ...

  6. android底部导航栏小结

    android自带的有TabHost,但好像无法满足要求, 本文只记录使用 TabLayout + Fragment  和 android 自带的 BottomNavigationView + Fra ...

  7. Android 底部导航栏的xml

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  8. Android 五种方式实现Android底部导航栏

    https://segmentfault.com/a/1190000007697941

  9. Android_ViewPager+Fragment实现页面滑动和底部导航栏

    1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...

随机推荐

  1. MYSQL主从同步故障一例及解决过程

    公司里有两个mysql服务器做主从同步,某天Nagios发来报警短信,mysqla is down...赶紧联系机房,机房的人反馈来的信息是 HARDWARE ERROR 后面信息省略,让机房记下错误 ...

  2. HDU 5130 Signal Interference(计算几何 + 模板)

    HDU 5130 Signal Interference(计算几何 + 模板) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=5130 Descripti ...

  3. HDU 5860 Death Sequence(递推)

    HDU 5860 Death Sequence(递推) 题目链接http://acm.split.hdu.edu.cn/showproblem.php?pid=5860 Description You ...

  4. URL中文参数乱码的一个解决办法

      浏览器对有中文参数的url大部分都用utf-8编码,但我也曾经遇见过用GB2312编码的:如果遇见这样情况,那么接受到的参数就会出现乱码.乱码情况视服务器解码方式,Asp.Net网站一般默认为ut ...

  5. svn中“clean up”死循环问题解决办法

    SVN在使用update命令时,提示使用"clean up "命令,在使用clean up命令时报错"Previous operation has not finishe ...

  6. java中多态的使用

    一.动手动脑 public class ParentChildTest { public static void main(String[] args) { Parent parent=new Par ...

  7. UILabel属性小解

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  8. fiddler抓包使用①

    链接:http://jingyan.baidu.com/article/3a2f7c2e0d5f2126aed61175.html   设置好代理后,有的设备需要访问"192.168.1.1 ...

  9. JQuery:以name为条件查找

    例如:$(":input[name='keleyi']") 表示查找的是name为keleyi的表单. var a=$(t).prev(":input[name='dis ...

  10. powder designer 转数据库

    1.打开“file new model”