ViewPager+RadioGroup实现底部菜单栏（一）

 逆境是成长必经的过程，能勇于接受逆境的人，生命就会日渐的茁壮。

本讲内容：ViewPager+RadioGroup实现底部菜单栏

示例一：可滑动可点击tab

 

下面是res/layout/top.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@color/darkcyan"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信"
        android:textSize="20sp" />

</LinearLayout>

下面是res/layout/bottom.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/id_radioGroup"
    android:background="@color/darkcyan"
    android:orientation="horizontal"
    android:padding="5dp" >

    <RadioButton
        android:id="@+id/id_tab1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:gravity="center"
        android:checked="true"
        android:button="@null"
        android:textColor="@drawable/selector_tab_text_color"
        android:drawableTop="@drawable/selector_tab1_img"
        android:text="微信" />

    <RadioButton
        android:id="@+id/id_tab2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:gravity="center"
        android:button="@null"
        android:textColor="@drawable/selector_tab_text_color"
        android:drawableTop="@drawable/selector_tab2_img"
        android:text="通信录" />

    <RadioButton
        android:id="@+id/id_tab3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:gravity="center"
        android:button="@null"
        android:textColor="@drawable/selector_tab_text_color"
        android:drawableTop="@drawable/selector_tab3_img"
        android:text="朋友" />

    <RadioButton
        android:id="@+id/id_tab4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:gravity="center"
        android:button="@null"
        android:textColor="@drawable/selector_tab_text_color"
        android:drawableTop="@drawable/selector_tab4_img"
        android:text="设置" />

</RadioGroup>

下面是res/layout/activity_main.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" >

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="1.0"/>
    
    <include layout="@layout/bottom"/>

</LinearLayout>

下面是res/drawable/selector_tab1_img文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/tab1_pressed" android:state_checked="true"></item>
	<item android:drawable="@drawable/tab1_normal"></item>
</selector>

下面是res/drawable/selector_tab2_img文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/tab2_pressed" android:state_checked="true"></item>
	<item android:drawable="@drawable/tab2_normal"></item>
</selector>

下面是res/drawable/selector_tab3_img文件

<pre class="java" name="code"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/tab3_pressed" android:state_checked="true"></item>
	<item android:drawable="@drawable/tab3_normal"></item>
</selector>

下面是res/drawable/selector_tab4_img文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/tab4_pressed" android:state_checked="true"></item>
	<item android:drawable="@drawable/tab4_normal"></item>
</selector>

下面是res/drawable/selector_tab_text_color文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_checked="true" android:color="@color/red"/>    
     <item android:color="@color/black"/>
</selector>

下面是res/layout/tab01.xml 布局文件：(tab02、tab03、tab04类似就不写了)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:gravity="center"
        android:text="第一个Tab"
        android:textSize="30sp" />

</LinearLayout>

下面是ViewPagerAdapter.java文件：

public class ViewPagerAdapter extends PagerAdapter {
	
	private List<View> viewList;
	
	public ViewPagerAdapter(List<View> viewList) {
		this.viewList=viewList;
	}

	/**
	 * 获得当前页卡的数量   
	 */
	public int getCount() {
		return viewList.size();
	}

	/**
	 * 判断视图是否由对象产生 
	 */
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}
	
	/**
	 * 实例化页卡  
	 */
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(viewList.get(position));  
		return viewList.get(position);  
	}
	
	/**
	 * 删除页卡   
	 */
	public void destroyItem(ViewGroup container, int position, Object object) {
		container.removeView(viewList.get(position));  
	}
}

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {
	private List<View> viewList;
	private ViewPager pager;
	private ViewPagerAdapter adapter;
	private RadioGroup radioGroup;
	private RadioButton tab1;
	private RadioButton tab2;
	private RadioButton tab3;
	private RadioButton tab4;
	
	private Resources res;  

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		initViews();
	}

	private void initViews() {
		pager=(ViewPager) findViewById(R.id.id_viewPager);
		viewList=getData();
		adapter=new ViewPagerAdapter(viewList);
		pager.setAdapter(adapter);
		pager.setOnPageChangeListener(new TabOnPageChangeListener());
		
		radioGroup=(RadioGroup) findViewById(R.id.id_radioGroup);
		tab1=(RadioButton) findViewById(R.id.id_tab1);
		tab2=(RadioButton) findViewById(R.id.id_tab2);
		tab3=(RadioButton) findViewById(R.id.id_tab3);
		tab4=(RadioButton) findViewById(R.id.id_tab4);
		radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch (checkedId) {
				case R.id.id_tab1:
					pager.setCurrentItem(0);//选择某一页 
					break;
				case R.id.id_tab2:
					pager.setCurrentItem(1);
					break;
				case R.id.id_tab3:
					pager.setCurrentItem(2);
					break;
				case R.id.id_tab4:
					pager.setCurrentItem(3);
					break;
				}
			}
		});
	}
	
	/**
	 * 添加页卡
	 */
	private List<View> getData(){
		viewList=new ArrayList<View>();
		
		LayoutInflater mInflater=LayoutInflater.from(this);
		View tab01=mInflater.inflate(R.layout.tab01, null);
		View tab02=mInflater.inflate(R.layout.tab02, null);
		View tab03=mInflater.inflate(R.layout.tab03, null);
		View tab04=mInflater.inflate(R.layout.tab04, null);
		
		viewList.add(tab01);
		viewList.add(tab02);
		viewList.add(tab03);
		viewList.add(tab04);
		return viewList;
	}
	
	/**
	 * 页卡改变事件
	 */
	public class TabOnPageChangeListener implements OnPageChangeListener{

		//当滑动状态改变时调用
		public void onPageScrollStateChanged(int state) {
			
		}

		//当前页面被滑动时调用 
		public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
			
		}

		//当新的页面被选中时调用  
		public void onPageSelected(int position) {
			switch (position) {
			case 0:
				tab1.setChecked(true);
				break;
			case 1:
				tab2.setChecked(true);
				break;
			case 2:
				tab3.setChecked(true);
				break;
			case 3:
				tab4.setChecked(true);
				break;
			}
		} 
	}
}

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～