巧用ViewPager与RadioGroup结合

ViewPager的运用给一些android项目的UI增添一些色彩，我今天就把结合ViewPager和RadioGroup，并且集成LinearLayout写的一个项目中运用到的类似控件的例子分享出来。

首先我们要将这个控件开发出来，并且能够在其他地方运用，代码如下：

package com.gutao.form;

import com.gutao.activity.R;
import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Color;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class TabView extends LinearLayout {

	private RadioGroup tabGroup;
	private ViewPager mViewPager;
	private MyAdapter adapter;
	private int currentItem;
	private PagerTabStrip pagerTabStrip;
	
	private List<RadioButton> mTabs = new ArrayList<RadioButton>();
	
	private List<View> mListViews = new ArrayList<View>();
	
	public TabView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public TabView(Context context) {
		super(context);
		init();
	}
	
	private void init() {
		this.setOrientation(LinearLayout.VERTICAL);
		
		tabGroup = new RadioGroup(this.getContext());
		tabGroup.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT,0));
		tabGroup.setPadding(5, 0, 5, 0);
		tabGroup.setGravity(Gravity.CENTER_HORIZONTAL);
		tabGroup.setOrientation(LinearLayout.HORIZONTAL);
		
		tabGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				RadioButton tab = (RadioButton) group.findViewById(checkedId);
				int tag = (Integer) tab.getTag();
				mViewPager.setCurrentItem(tag);
			}
		});
		
		this.addView(tabGroup);
		
		mViewPager = new ViewPager(this.getContext());
		
		mViewPager.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT,1));

		adapter = new MyAdapter();
		
		mViewPager.setAdapter(adapter);
		
		mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			public void onPageSelected(int arg0) {
				
				if(!mTabs.get(arg0).isChecked()) {
					mTabs.get(arg0).setChecked(true);
				}
				
				currentItem = arg0;
			}
			
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		this.addView(mViewPager);
	}

	public void addTabs(String title, View view) {
		RadioButton tabButton = getTabButton(title);
		tabButton.setTag(mTabs.size());
		tabGroup.addView(tabButton);
		mTabs.add(tabButton);
		tabButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			
			public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
				if(isChecked) {
					buttonView.setTextColor(Color.parseColor("#ffffff"));
					buttonView.setBackgroundResource(R.drawable.layer_button);
					buttonView.setPadding(10,10,10,10);
				} else {
					buttonView.setTextColor(Color.parseColor("#666666"));
					buttonView.setBackgroundResource(R.drawable.tab_button);
					buttonView.setPadding(10,10,10,10);
				}
			}
		});
		mListViews.add(view);
	}
	
	
	public void setCurrentItem(int item) {
		this.currentItem = item;
		mViewPager.setCurrentItem(currentItem);
		if(!mTabs.get(currentItem).isChecked()) {
			mTabs.get(item).setChecked(true);
		}
	}
	private RadioButton getTabButton(String title) {
		RadioButton tab = new RadioButton(this.getContext());
		tab.setText(title);
		tab.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,0));
		tab.setMinimumWidth(100);
		tab.setGravity(Gravity.CENTER);
		tab.setButtonDrawable(getResources().getDrawable(android.R.color.transparent));
		tab.setBackgroundResource(R.drawable.tab_button);
		tab.setPadding(10,10,10,10);
		tab.setTextColor(Color.parseColor("#666666"));
		tab.setTextSize(20);
		return tab;
	}
	class MyAdapter extends PagerAdapter{

		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewGroup) container).removeView(mListViews.get(position));
		}
		
		@Override
		public int getCount() {
			return mListViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == (arg1);
		}
		
		@Override
		public Object instantiateItem(View container, int position) {
			 ((ViewGroup) container).addView(mListViews.get(position),0);
			return mListViews.get(position);
		}
	}
	public int getCurrentItem() {
		return currentItem;
	}
}

下面就是acitivity中来运用，首先来看布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="#e6e6e6">

    <com.gutao.form.TabView
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:id="@+id/tab" android:layout_weight="1">
        
    </com.gutao.form.TabView>
    
 
</LinearLayout>

再来看activity：

public class MainActivity extends Activity {
	TabView tabViewPager;
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		tabViewPager = (TabView) findViewById(R.id.tab);
		
		LinearLayout layout = new LinearLayout(this);
		layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
				LayoutParams.FILL_PARENT));
		layout.setOrientation(LinearLayout.VERTICAL);
		ImageView image1 = new ImageView(this);
		image1.setImageResource(R.drawable.fj3);
		image1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		image1.setAdjustViewBounds(true);
		layout.addView(image1);
		
		LinearLayout layout1 = new LinearLayout(this);
		layout1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
				LayoutParams.FILL_PARENT));
		layout1.setOrientation(LinearLayout.VERTICAL);
		ImageView image2 = new ImageView(this);
		image2.setAdjustViewBounds(true);
		image2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		image2.setImageResource(R.drawable.fj1);
		layout1.addView(image2);
		
		
		LinearLayout layout2 = new LinearLayout(this);
		layout2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
				LayoutParams.FILL_PARENT));
		layout2.setOrientation(LinearLayout.VERTICAL);
		ImageView image3 = new ImageView(this);
		image3.setAdjustViewBounds(true);
		image3.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		image3.setImageResource(R.drawable.fj3);
		layout2.addView(image3);
		if(tabViewPager != null && layout != null && layout1 != null && layout2 != null) {
			tabViewPager.addTabs("栏 目1", layout);
			tabViewPager.addTabs("栏 目2", layout1);
			tabViewPager.addTabs("栏 目3", layout2);
		}
			
		tabViewPager.setCurrentItem(0);
	}

}

其中添加进去的layout、layout1、layout2只要是view就可以。这样就可以实现在一个activity里面显示多个view页面，而且你可以点击RadioButton，也可以进行滑动的选择你想要到的页面。