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

从上面的代码中可以看出,这种实现方式非常的简洁,可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然,每个人都有不同看法,不同的实现方式,适合自己的才是最好的。

效果图:

Android之RadioGroup+ViewPager制作的底部导航栏       Android之RadioGroup+ViewPager制作的底部导航栏

在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法。

首先创建activity_main.xml布局文件,里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment,RadioGroup布局底部导航。

[html] view plain copy
 

print?

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6. <android.support.v4.view.ViewPager
  7. android:id="@+id/packpage_vPager"
  8. android:layout_width="match_parent"
  9. android:layout_height="0dp"
  10. android:layout_gravity="center"
  11. android:layout_weight="1.0" />
  12. <View
  13. android:layout_width="match_parent"
  14. android:layout_height="1dp"
  15. android:background="@color/orange_line" />
  16. <RadioGroup
  17. android:id="@+id/main_navi_radiogroup"
  18. style="@style/main_navi_radiogroup">
  19. <RadioButton
  20. android:id="@+id/main_navi_msg_records"
  21. style="@style/main_navi_radiobutton"
  22. android:drawableTop="@drawable/menu_item_msg_records"
  23. android:text="@string/message"/>
  24. <RadioButton
  25. android:id="@+id/main_navi_contact"
  26. style="@style/main_navi_radiobutton"
  27. android:drawableTop="@drawable/menu_item_contacts"
  28. android:text="@string/call" />
  29. </RadioGroup>
  30. </LinearLayout>

接着再创建两个fragment布局文件

fragment_message.xml

[html] view plain copy
 

print?

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6. <TextView
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:layout_gravity="center"
  10. android:gravity="center"
  11. android:textSize="20sp"
  12. android:text="@string/message"/>
  13. </LinearLayout>

fragment_call.xml

[html] view plain copy
 

print?

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6. <TextView
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:layout_gravity="center"
  10. android:gravity="center"
  11. android:text="@string/call"
  12. android:textSize="20sp" />
  13. </LinearLayout>

两个fragment布局文件创建完成后,再创建两个Fragment类,MessageFragment和CallFragment,均继承android.support.v4.app.Fragment;

MessageFragment.java

[java] view plain copy
 

print?

  1. package com.syz.bottommenu;
  2. import android.os.Bundle;
  3. import android.support.annotation.Nullable;
  4. import android.support.v4.app.Fragment;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. /**
  9. * @author syz
  10. * @date 2016-4-14
  11. */
  12. public class MessageFragment extends Fragment {
  13. private View mView;
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  16. if(mView == null){
  17. mView = inflater.inflate(R.layout.fragment_message, container, false);
  18. }
  19. return mView;
  20. }
  21. @Override
  22. public void onDestroyView() {
  23. super.onDestroyView();
  24. ((ViewGroup) mView.getParent()).removeView(mView);
  25. }
  26. }

CallFragment.Java

[java] view plain copy
 

print?

  1. package com.syz.bottommenu;
  2. import android.os.Bundle;
  3. import android.support.annotation.Nullable;
  4. import android.support.v4.app.Fragment;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. /**
  9. * @author syz
  10. * @date 2016-4-14
  11. */
  12. public class CallFragment extends Fragment {
  13. private View mView;
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  16. if (mView == null) {
  17. mView = inflater.inflate(R.layout.fragment_call, container, false);
  18. }
  19. return mView;
  20. }
  21. @Override
  22. public void onDestroyView() {
  23. super.onDestroyView();
  24. ((ViewGroup) mView.getParent()).removeView(mView);
  25. }
  26. }

最后我们在MainActivity中开始布局渲染。

MainActivity.java

[java] view plain copy
 

print?

  1. package com.syz.bottommenu;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.support.v4.app.FragmentActivity;
  7. import android.support.v4.app.FragmentPagerAdapter;
  8. import android.support.v4.view.ViewPager;
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;
  10. import android.view.View;
  11. import android.view.View.OnClickListener;
  12. import android.view.ViewGroup;
  13. import android.widget.RadioGroup;
  14. public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {
  15. private ViewPager pager;
  16. private List<Fragment> fragments;
  17. private RadioGroup radioGroup;
  18. @Override
  19. protected void onCreate(Bundle savedInstanceState) {
  20. super.onCreate(savedInstanceState);
  21. setContentView(R.layout.activity_main);
  22. initView();
  23. }
  24. private void initView() {
  25. pager = (ViewPager) findViewById(R.id.packpage_vPager);
  26. radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);
  27. findViewById(R.id.main_navi_msg_records).setOnClickListener(this);
  28. findViewById(R.id.main_navi_contact).setOnClickListener(this);
  29. fragments = new ArrayList<Fragment>();
  30. fragments.add(new MessageFragment());
  31. fragments.add(new CallFragment());
  32. pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
  33. @Override
  34. public int getCount() {
  35. return fragments.size();
  36. }
  37. @Override
  38. public Fragment getItem(int arg0) {
  39. return fragments.get(arg0);
  40. }
  41. });
  42. // 添加页面切换事件的监听器
  43. pager.setOnPageChangeListener(this);
  44. radioGroup.check(R.id.main_navi_msg_records);
  45. }
  46. @Override
  47. public void finish() {
  48. ViewGroup view = (ViewGroup) getWindow().getDecorView();
  49. view.removeAllViews();
  50. super.finish();
  51. }
  52. /**
  53. * 这个方法在手指操作屏幕的时候发生变化。有三个值:0(END),1(PRESS) , 2(UP) 。
  54. * 当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1,手指抬起时,
  55. * 如果发生了滑动(即使很小),这个值会变为2,然后最后变为0
  56. * 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生,
  57. * 这个时候只会调用这个方法两次,state值分别是1,0 。
  58. * 当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 。
  59. */
  60. @Override
  61. public void onPageScrollStateChanged(int state) {
  62. }
  63. /**
  64. * 这个方法会在屏幕滚动过程中不断被调用。 有三个参数,第一个position,这个参数要特别注意一下。
  65. * 当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的;
  66. * 如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,
  67. * 只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动),
  68. * 这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。
  69. * 当直接设置setCurrentItem翻页时,如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面),
  70. * 如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面;
  71. * 如果向左翻动,position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况,
  72. * 比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1,然后逐步变成2;
  73. * 我从第三个页面跳到第一个页面,position先是1,然后逐步变成0,并没有出现为2的情况。
  74. * positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0
  75. * 。如果页面向左翻动,这个值不断变小,
  76. * 最后变为0。positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致
  77. */
  78. @Override
  79. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  80. }
  81. /**
  82. * 这个方法有一个参数position,代表哪个页面被选中。当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长),
  83. * 手指抬起来就会立即执行这个方法,position就是当前滑动到的页面。如果直接setCurrentItem翻页,
  84. * 那position就和setCurrentItem的参数一致,这种情况在onPageScrolled执行方法前就会立即执行。
  85. */
  86. @Override
  87. public void onPageSelected(int position) {
  88. switch (position) {
  89. case 0:
  90. radioGroup.check(R.id.main_navi_msg_records);
  91. break;
  92. case 1:
  93. radioGroup.check(R.id.main_navi_contact);
  94. break;
  95. default:
  96. break;
  97. }
  98. }
  99. @Override
  100. public void onClick(View v) {
  101. switch (v.getId()) {
  102. case R.id.main_navi_contact:
  103. pager.setCurrentItem(1,true);
  104. break;
  105. case R.id.main_navi_msg_records:
  106. pager.setCurrentItem(0,true);
  107. break;
  108. default:
  109. break;
  110. }
  111. }
  112. }

从上面的代码中可以看出,这种实现方式非常的简洁,可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然,每个人都有不同看法,不同的实现方式,适合自己的才是最好的。

效果图:

Android之RadioGroup+ViewPager制作的底部导航栏       Android之RadioGroup+ViewPager制作的底部导航栏

最后附上源码下载地址:http://download.csdn.net/detail/loveyaozu/9490650

上一篇:前端学习笔记汇总(之merge方法)


下一篇:jmeter 逻辑控制器Logic Controller详解