Android之RadioGroup+ViewPager制作的底部导航栏
在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法。
首先创建activity_main.xml布局文件,里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment,RadioGroup布局底部导航。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <android.support.v4.view.ViewPager
android:id="@+id/packpage_vPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0" /> <View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/orange_line" /> <RadioGroup
android:id="@+id/main_navi_radiogroup"
style="@style/main_navi_radiogroup"> <RadioButton
android:id="@+id/main_navi_msg_records"
style="@style/main_navi_radiobutton"
android:drawableTop="@drawable/menu_item_msg_records"
android:text="@string/message"/> <RadioButton
android:id="@+id/main_navi_contact"
style="@style/main_navi_radiobutton"
android:drawableTop="@drawable/menu_item_contacts"
android:text="@string/call" /> </RadioGroup> </LinearLayout>
接着再创建两个fragment布局文件
fragment_message.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:textSize="20sp"
android:text="@string/message"/> </LinearLayout>
fragment_call.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="@string/call"
android:textSize="20sp" /> </LinearLayout>
两个fragment布局文件创建完成后,再创建两个Fragment类,MessageFragment和CallFragment,均继承android.support.v4.app.Fragment;
MessageFragment.java
package com.syz.bottommenu; import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; /**
* @author syz
* @date 2016-4-14
*/
public class MessageFragment extends Fragment { private View mView;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if(mView == null){
mView = inflater.inflate(R.layout.fragment_message, container, false);
}
return mView;
} @Override
public void onDestroyView() {
super.onDestroyView();
((ViewGroup) mView.getParent()).removeView(mView);
}
}
CallFragment.Java
package com.syz.bottommenu; import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; /**
* @author syz
* @date 2016-4-14
*/
public class CallFragment extends Fragment { private View mView; @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (mView == null) {
mView = inflater.inflate(R.layout.fragment_call, container, false);
}
return mView;
} @Override
public void onDestroyView() {
super.onDestroyView();
((ViewGroup) mView.getParent()).removeView(mView);
}
}
最后我们在MainActivity中开始布局渲染。
MainActivity.java
package com.syz.bottommenu; import java.util.ArrayList;
import java.util.List; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.RadioGroup; public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener { private ViewPager pager;
private List<Fragment> fragments;
private RadioGroup radioGroup; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
} private void initView() {
pager = (ViewPager) findViewById(R.id.packpage_vPager);
radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);
findViewById(R.id.main_navi_msg_records).setOnClickListener(this);
findViewById(R.id.main_navi_contact).setOnClickListener(this);
fragments = new ArrayList<Fragment>();
fragments.add(new MessageFragment());
fragments.add(new CallFragment()); pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) { @Override
public int getCount() {
return fragments.size();
} @Override
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}
});
// 添加页面切换事件的监听器
pager.setOnPageChangeListener(this);
radioGroup.check(R.id.main_navi_msg_records);
} @Override
public void finish() {
ViewGroup view = (ViewGroup) getWindow().getDecorView();
view.removeAllViews();
super.finish();
} /**
* 这个方法在手指操作屏幕的时候发生变化。有三个值:0(END),1(PRESS) , 2(UP) 。
* 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1,手指抬起时,
* 如果发生了滑动(即使很小),这个值会变为2,然后最后变为0
* 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生,
* 这个时候只会调用这个方法两次,state值分别是1,0 。
* 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 。
*/
@Override
public void onPageScrollStateChanged(int state) { } /**
* 这个方法会在屏幕滚动过程中不断被调用。 有三个参数,第一个position,这个参数要特别注意一下。
* 当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的;
* 如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,
* 只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动),
* 这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。
* 当直接设置setCurrentItem翻页时,如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面),
* 如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面;
* 如果向左翻动,position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况,
* 比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1,然后逐步变成2;
* 我从第三个页面跳到第一个页面,position先是1,然后逐步变成0,并没有出现为2的情况。
* positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0
* 。如果页面向左翻动,这个值不断变小,
* 最后变为0。positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /**
* 这个方法有一个参数position,代表哪个页面被选中。当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长),
* 手指抬起来就会立即执行这个方法,position就是当前滑动到的页面。如果直接setCurrentItem翻页,
* 那position就和setCurrentItem的参数一致,这种情况在onPageScrolled执行方法前就会立即执行。
*/
@Override
public void onPageSelected(int position) {
switch (position) {
case :
radioGroup.check(R.id.main_navi_msg_records);
break;
case :
radioGroup.check(R.id.main_navi_contact);
break; default:
break;
} } @Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.main_navi_contact:
pager.setCurrentItem(,true);
break;
case R.id.main_navi_msg_records:
pager.setCurrentItem(,true);
break; default:
break;
}
} }
从上面的代码中可以看出,这种实现方式非常的简洁,可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然,每个人都有不同看法,不同的实现方式,适合自己的才是最好的。
效果图:
在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法。
首先创建activity_main.xml布局文件,里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment,RadioGroup布局底部导航。
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <android.support.v4.view.ViewPager
- android:id="@+id/packpage_vPager"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_gravity="center"
- android:layout_weight="1.0" />
- <View
- android:layout_width="match_parent"
- android:layout_height="1dp"
- android:background="@color/orange_line" />
- <RadioGroup
- android:id="@+id/main_navi_radiogroup"
- style="@style/main_navi_radiogroup">
- <RadioButton
- android:id="@+id/main_navi_msg_records"
- style="@style/main_navi_radiobutton"
- android:drawableTop="@drawable/menu_item_msg_records"
- android:text="@string/message"/>
- <RadioButton
- android:id="@+id/main_navi_contact"
- style="@style/main_navi_radiobutton"
- android:drawableTop="@drawable/menu_item_contacts"
- android:text="@string/call" />
- </RadioGroup>
- </LinearLayout>
接着再创建两个fragment布局文件
fragment_message.xml
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center"
- android:gravity="center"
- android:textSize="20sp"
- android:text="@string/message"/>
- </LinearLayout>
fragment_call.xml
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center"
- android:gravity="center"
- android:text="@string/call"
- android:textSize="20sp" />
- </LinearLayout>
两个fragment布局文件创建完成后,再创建两个Fragment类,MessageFragment和CallFragment,均继承android.support.v4.app.Fragment;
MessageFragment.java
- package com.syz.bottommenu;
- import android.os.Bundle;
- import android.support.annotation.Nullable;
- import android.support.v4.app.Fragment;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- /**
- * @author syz
- * @date 2016-4-14
- */
- public class MessageFragment extends Fragment {
- private View mView;
- @Override
- public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
- if(mView == null){
- mView = inflater.inflate(R.layout.fragment_message, container, false);
- }
- return mView;
- }
- @Override
- public void onDestroyView() {
- super.onDestroyView();
- ((ViewGroup) mView.getParent()).removeView(mView);
- }
- }
CallFragment.Java
- package com.syz.bottommenu;
- import android.os.Bundle;
- import android.support.annotation.Nullable;
- import android.support.v4.app.Fragment;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- /**
- * @author syz
- * @date 2016-4-14
- */
- public class CallFragment extends Fragment {
- private View mView;
- @Override
- public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
- if (mView == null) {
- mView = inflater.inflate(R.layout.fragment_call, container, false);
- }
- return mView;
- }
- @Override
- public void onDestroyView() {
- super.onDestroyView();
- ((ViewGroup) mView.getParent()).removeView(mView);
- }
- }
最后我们在MainActivity中开始布局渲染。
MainActivity.java
- package com.syz.bottommenu;
- import java.util.ArrayList;
- import java.util.List;
- import android.os.Bundle;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.FragmentActivity;
- import android.support.v4.app.FragmentPagerAdapter;
- import android.support.v4.view.ViewPager;
- import android.support.v4.view.ViewPager.OnPageChangeListener;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.ViewGroup;
- import android.widget.RadioGroup;
- public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {
- private ViewPager pager;
- private List<Fragment> fragments;
- private RadioGroup radioGroup;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- initView();
- }
- private void initView() {
- pager = (ViewPager) findViewById(R.id.packpage_vPager);
- radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);
- findViewById(R.id.main_navi_msg_records).setOnClickListener(this);
- findViewById(R.id.main_navi_contact).setOnClickListener(this);
- fragments = new ArrayList<Fragment>();
- fragments.add(new MessageFragment());
- fragments.add(new CallFragment());
- pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
- @Override
- public int getCount() {
- return fragments.size();
- }
- @Override
- public Fragment getItem(int arg0) {
- return fragments.get(arg0);
- }
- });
- // 添加页面切换事件的监听器
- pager.setOnPageChangeListener(this);
- radioGroup.check(R.id.main_navi_msg_records);
- }
- @Override
- public void finish() {
- ViewGroup view = (ViewGroup) getWindow().getDecorView();
- view.removeAllViews();
- super.finish();
- }
- /**
- * 这个方法在手指操作屏幕的时候发生变化。有三个值:0(END),1(PRESS) , 2(UP) 。
- * 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1,手指抬起时,
- * 如果发生了滑动(即使很小),这个值会变为2,然后最后变为0
- * 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生,
- * 这个时候只会调用这个方法两次,state值分别是1,0 。
- * 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 。
- */
- @Override
- public void onPageScrollStateChanged(int state) {
- }
- /**
- * 这个方法会在屏幕滚动过程中不断被调用。 有三个参数,第一个position,这个参数要特别注意一下。
- * 当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的;
- * 如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,
- * 只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动),
- * 这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。
- * 当直接设置setCurrentItem翻页时,如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面),
- * 如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面;
- * 如果向左翻动,position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况,
- * 比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1,然后逐步变成2;
- * 我从第三个页面跳到第一个页面,position先是1,然后逐步变成0,并没有出现为2的情况。
- * positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0
- * 。如果页面向左翻动,这个值不断变小,
- * 最后变为0。positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致
- */
- @Override
- public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
- }
- /**
- * 这个方法有一个参数position,代表哪个页面被选中。当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长),
- * 手指抬起来就会立即执行这个方法,position就是当前滑动到的页面。如果直接setCurrentItem翻页,
- * 那position就和setCurrentItem的参数一致,这种情况在onPageScrolled执行方法前就会立即执行。
- */
- @Override
- public void onPageSelected(int position) {
- switch (position) {
- case 0:
- radioGroup.check(R.id.main_navi_msg_records);
- break;
- case 1:
- radioGroup.check(R.id.main_navi_contact);
- break;
- default:
- break;
- }
- }
- @Override
- public void onClick(View v) {
- switch (v.getId()) {
- case R.id.main_navi_contact:
- pager.setCurrentItem(1,true);
- break;
- case R.id.main_navi_msg_records:
- pager.setCurrentItem(0,true);
- break;
- default:
- break;
- }
- }
- }
从上面的代码中可以看出,这种实现方式非常的简洁,可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然,每个人都有不同看法,不同的实现方式,适合自己的才是最好的。
效果图:
最后附上源码下载地址:http://download.csdn.net/detail/loveyaozu/9490650
Android之RadioGroup+ViewPager制作的底部导航栏的更多相关文章
- Android (争取做到)最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...
- 使用BottomNavigationView+ViewPager+Fragment的底部导航栏
2019独角兽企业重金招聘Python工程师标准>>> 使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的 ...
- Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题
在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...
- Android底部导航栏创建——ViewPager + RadioGroup
原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...
- Android底部导航栏——FrameLayout + RadioGroup
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...
- [Android]--RadioGroup+RadioButton实现底部导航栏
RadioGroup+RadioButton组合方式打造简单实用的底部导航栏 代码块: <?xml version="1.0" encoding="utf-8&qu ...
- Android底部导航栏(可滑动)----TabLayout+viewPager
[TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...
- android底部导航栏实现
第一种用radiobutton实现 https://wizardforcel.gitbooks.io/w3school-android/content/75.html 布局文件,使用radiogrou ...
- Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
随机推荐
- svn文件管理器的使用
服务器端: 客户端 使用SVN的注意事项 做任何操作之前,先update一下 不要修改其他人的文件 不要在SVN里直接打开.编辑文件 不要在打开.编辑文件的时候,进行操作 SVN客户端的安装,非常简单 ...
- Effective C++ 条款12
复制对象时,勿忘其每个成分 作者在本节条款提醒我们,在多重继承的情况下进行copy或者copy assignment 的operator=的编写时,一定要考虑base 类部分数据的初始化后者复制. 对 ...
- [javase学习笔记]-6.7 封装
这一节我们学习面向对象中的第一个特性,封装(encapsulation) 封装:是指隐藏对象的发生和实现细节,仅对外提供公共訪问方式. 那么什么是隐藏对象的实现细节? 我们来举例学习. 比方我们来定义 ...
- Light OJ 1080 - Binary Simulation
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1080 1080 - Binary Simulation PDF (Englis ...
- php中的页面跳转和重定向
php中的页面跳转和重定向 ThinkPHP中跳转和重定向的区别 跳转: 浏览器认为: 当前URL请求成功, 重新请求新的URL. 浏览器会 记录当前的URL 和 新的URL 在请求历史记录中. 回退 ...
- rest_framework (版本)
请求进来 封装request. 版本限制 认证 权限 节流 版本 self.version_param url中版本的key self.default_version self.is_allowed_ ...
- [poj 2773] Happy 2006 解题报告 (二分答案+容斥原理)
题目链接:http://poj.org/problem?id=2773 题目大意: 给出两个数m,k,要求求出从1开始与m互质的第k个数 题解: #include<algorithm> # ...
- springMVC怎么接收日期类型的参数?
springMVC怎么接收日期类型的参数? springMVC的controller中用实体接受页面传递的参数,并且实体中的属性类型为日期类型,怎么接收呢?如果接收不到会进不到controller中. ...
- 解决夸dll返回dynamic无法访问
public static class DynamicFactory { //创建线程安全(对象不会再同一时刻被多个线程访问)的字典对象 private static ConcurrentDictio ...
- OpenGL编程(四)改变窗口大小时保持图形的原形
前面的例子,当我们通过拖拉的方法改变窗口的长宽比例时,窗口里的图形的长宽也相应地伸缩,导致图形变形.如下图: 正如上图所示,当我们把窗口宽度拉长后,图形就会显得比较胖.同样,当我们把窗口的高度拉长后, ...