利用RadioButton以及ViewPager实现仿小米联系人页面

来源：互联网发布：老九门百度云同步网络编辑：程序博客网时间：2024/05/20 04:31

在日常的生活中，我们经常会遇到那些手势滑动切换页面，并且下面的或者上面的图标也随着变换，或者手动切换的例子，可以参考手机的通讯录，QQ和微信页面

要怎么实现这两个功能呢？有什么东西能滑动并且能填充多个Layout?毫无疑问，第一个想到的应该是ViewPager。那下面的按钮是怎么实现跟随变化ViewPager变化的呢?很简单，利用横向的RadioGroup,里面包裹多个RadioButton对象就可以了。那怎样实现是手势滑动切换布局还是点击切换布局呢？大家应该都知道，ViewPager本身就是手势滑动切换的，既然要点击切换，我们就修改ViewPager的OnTouchEvent就好了。

下面来实现类似于通讯录的代码,首先贴上xml文件,觉得代码冗杂的开发者可以自己定义一个style样式，减小体积。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <RadioGroup        android:id="@+id/rg_main"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:background="#6bdf5e"        android:gravity="center"        >        <RadioButton            android:id="@+id/rb_tonghua"            android:padding="16dp"            android:gravity="center"            android:layout_gravity="center_vertical"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:button="@null"            android:text="通话"            android:textColor="@drawable/selector_tabhost_text"            />        <RadioButton            android:id="@+id/rb_lianxiren"            android:padding="16dp"            android:layout_gravity="center_vertical"            android:gravity="center"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:button="@null"            android:text="联系人"            android:textColor="@drawable/selector_tabhost_text"            />        <RadioButton            android:id="@+id/rb_huangye"            android:padding="16dp"            android:gravity="center"            android:layout_gravity="center_vertical"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="wrap_content"            android:button="@null"            android:text="黄页"            android:textColor="@drawable/selector_tabhost_text"            />    </RadioGroup>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager_main"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        >    </android.support.v4.view.ViewPager></LinearLayout>

以上的xml代码的根布局是一个垂直的线性布局，里面有一个ViewPager和一个水平的RadioGroup,RadioGoup里含有三个RadioButton

接下来就是Java文件。

public class MainActivity extends AppCompatActivity {    ViewPager viewPager;    RadioGroup radioGroup;    ArrayList<TabHostBasePage> tabHostBasePages;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_act_main);        initData();        initView();    }    private void initData(){        tabHostBasePages=new ArrayList<TabHostBasePage>();        TabHostBasePage tabHostBasePage_tonghua=new TabHostBasePage(MainActivity.this);        tabHostBasePage_tonghua.textView.setText("通话");        tabHostBasePages.add(tabHostBasePage_tonghua);        TabHostBasePage tabHostBasePage_lianxiren=new TabHostBasePage(MainActivity.this);        tabHostBasePage_lianxiren.textView.setText("联系人");        tabHostBasePages.add(tabHostBasePage_lianxiren);        TabHostBasePage tabHostBasePage_huangye=new TabHostBasePage(MainActivity.this);        tabHostBasePage_huangye.textView.setText("黄页");        tabHostBasePages.add(tabHostBasePage_huangye);    }    private void initView(){        viewPager=(ViewPager)findViewById(R.id.viewpager_main);        radioGroup=(RadioGroup)findViewById(R.id.rg_main);        radioGroup.check(R.id.rb_tonghua);//默认勾选黄页        viewPager.setAdapter(new ViewPagerAdapter());        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                switch (position){                    case 0:                        radioGroup.check(R.id.rb_tonghua);                        break;                    case 1:                        radioGroup.check(R.id.rb_lianxiren);                        break;                    case 2:                        radioGroup.check(R.id.rb_huangye);                        break;                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {                switch (checkedId){                    case R.id.rb_tonghua:                        viewPager.setCurrentItem(0);                        break;                    case R.id.rb_lianxiren:                        viewPager.setCurrentItem(1);                        break;                    case R.id.rb_huangye:                        viewPager.setCurrentItem(2);                        break;                }            }        });    }    class ViewPagerAdapter extends PagerAdapter{        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(tabHostBasePages.get(position).view);            return tabHostBasePages.get(position).view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View)object);        }        @Override        public int getCount() {            return tabHostBasePages.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }    }}

以上是MainActivity的Java代码。在这个代码里，首先我们初始化了在MainActivity的布局文件，1.设置为RadioGroup设置初始化选中 2.实现一个ViewPagerAdapter对象

，一般而言，如果不要求实现伪循环，初始化ViewPager实现以上四个方法就可以了，而且isViewFromObject这个方法基本是这样写死的，getCount方法获取page的数量就可以了，destoryItem就是从容器中移除布局，容器就是ViewGourp。ViewPager有个预加载机制，就是会初始化当前页面和前一页面、之后第一个页面，我们View的初始化可以放在这里，但是建议把data数据放在ViewPager的监听事件中，以免由于预加载机制出现的混乱情况3.为RadioGroup和ViewPager设置监听事件，当page滑动的时候设置RadioGroup,当RadioGroup点击的时候，设置当前Page。ArrayList<TabHostBasePage> 封装了我们的每一个Page,下面上我们TabHostBaserPage的代码

public class TabHostBasePage {//这里的成员方法都设置为public的 方便与activity通信    public Activity activity;//方便与activity通信,activity本身就是一个Contenxt对象    public View view;//封装Layout的View    public TextView textView;    public TabHostBasePage(Activity activity) {        this.activity = activity;        initView();    }    public void initView(){        view= LayoutInflater.from(activity).inflate(R.layout.layout_tabs_page,null);        textView=(TextView) view.findViewById(R.id.textView_tabspage);    }    public void initData(){    }}

TabHostPage的布局文件就只有一个textView，这里就不贴上来了。以上就是实现一个利用RadioButton以及ViewPager实现仿小米联系人页面的详细流程。

PS：发现了一个小问题，在我们利用tab切换标签的时候，如果跨越太大，中间的page页面会有一闪而过的现象，解决方法就是将这一句话viewPager.setCurrentItem(int position); 修改为viewPager.setCurrentItem(int postion,false);即可

0 0