ViewPager 和 RadioGroup 组合布局

1、先写activity_main.xml—-布局上面是一个v4包下的ViewPager布局，下面是一个RadioGroup布局

<RelativeLayout 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"
    tools:context="com.kang.viewpagerdemo.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/m_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RadioGroup
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" 
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:background="#55ff0000">

        <RadioButton
            android:id="@+id/page_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:checked="true"/>

        <RadioButton
            android:id="@+id/page_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <RadioButton
            android:id="@+id/page_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <RadioButton
            android:id="@+id/page_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <RadioButton
            android:id="@+id/page_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

</RelativeLayout>

2、新建一个pager_layout.xml 布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff000000"
        android:src="@drawable/image1" />

    <TextView
        android:id="@+id/tv_tips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#88000000"
        android:textColor="#ffffffff"
        android:textSize="24sp"
        android:text="ABC"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp" />

</RelativeLayout>

3、写一个适配器MyPagerAdapter

public class MyPagerAdapter extends PagerAdapter {
    private List<Integer> list; //数据源
    private LayoutInflater mInflater; //布局加载器

    // 记录移除出去的视图
    private LinkedList<View> caches;
    // 初始化过的视图
    private Map<Integer, View> initItems;

    public MyPagerAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
        caches = new LinkedList<View>();
        initItems = new HashMap<Integer, View>();
        list = new ArrayList<Integer>(10);
        list.add(R.drawable.image1);
        list.add(R.drawable.image2);
        list.add(R.drawable.image3);
        list.add(R.drawable.image4);
        list.add(R.drawable.image5);
    }

    @Override
    public int getCount() {
        return null == list ? 0 : list.size(); // Integer.MAX_VALUE 21亿
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    // 销毁视图(视图从ViewPager中移除出去)
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Log.e("m_tag", "销毁:" + position);
        // 获取销毁的视图对象
        View iv = initItems.get(position);
        container.removeView(iv);
        // 记录到缓存中
        caches.addLast(iv);
    }

    // 视图初始化方法(子视图要添加到ViewPager中)
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ViewHolder holder;
        View layout;
        //缓存为空
        if (caches.isEmpty()) {
            //初始化页面
            layout = mInflater.inflate(R.layout.pager_layout, null);
            holder = new ViewHolder();
            holder.iv = (ImageView) layout.findViewById(R.id.image);
            holder.tv = (TextView) layout.findViewById(R.id.tv_tips);
            layout.setTag(holder);
        }else{
            layout = caches.removeFirst();
            holder = (ViewHolder) layout.getTag();
        }
        //记录初始化过的视图
        initItems.put(position, layout);
        //绑定数据
        holder.iv.setImageResource(list.get(position));
        holder.tv.setText((position+1)+"/"+getCount());
        container.addView(layout);
        return layout;
    }

    class ViewHolder{
        ImageView iv;
        TextView tv;
    }

4、在MainActivity中设置

public class MainActivity extends Activity {
    private ViewPager mPager;
    private RadioGroup mTabs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPager = (ViewPager) findViewById(R.id.m_pager);
        mTabs = (RadioGroup) findViewById(R.id.tabs);
        mTabs.setOnCheckedChangeListener(onTabsChecked);
        // 创建适配器
        MyPagerAdapter adapter = new MyPagerAdapter(this);
        mPager.setAdapter(adapter);
        // 设置ViewPager的页面监听
        mPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // 设置单选按钮组的选择
                ((RadioButton) mTabs.getChildAt(position)).setChecked(true);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    private RadioGroup.OnCheckedChangeListener onTabsChecked = new RadioGroup.OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.page_0:
                // 改变ViewPager的页面切换
                mPager.setCurrentItem(0, true);
                break;
            case R.id.page_1:
                mPager.setCurrentItem(1, true);
                break;
            case R.id.page_2:
                mPager.setCurrentItem(2, true);
                break;
            case R.id.page_3:
                mPager.setCurrentItem(3, true);
                break;
            case R.id.page_4:
                mPager.setCurrentItem(4, true);
                break;
            }
        }
    };
}