ViewPager 和 RadioGroup 组合布局

来源：互联网发布：足球买球让球算法编辑：程序博客网时间：2024/05/19 20:40

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

所做出来的效果就如下图

阅读全文

0 0