Android底部导航栏创建

您所在的位置:网站首页 viewpager设置选中 Android底部导航栏创建

Android底部导航栏创建

#Android底部导航栏创建| 来源: 网络整理| 查看: 265

原创文章,引用请注明出处: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文件:

 

 布局中重要属性说明:

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

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

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

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

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

⑦RadioButton的android:drawableTop属性值为@drawable/radiobutton_pic_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对应的布局:

 

在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 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结构我们到此就讲解完成了,感谢阅读!

 

  

  



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3