ViewPager+RadioGroup如何仿微信实现主界面

这篇文章将为大家详细讲解有关ViewPager+RadioGroup如何仿微信实现主界面，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

如图效果，可以点击底部按钮选择页面，也可以滑动页面进行选择。

那么我们下面就来实现一下吧。

首先创建工程WXTest,主界面布局使用ViewPager+RadioGroup来实现,界面代码如下。

<?xml version="1.0" encoding="utf-8"?> <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"     >   <android.support.v4.view.ViewPager    android:id="@+id/view_pager"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1"    >   </android.support.v4.view.ViewPager>   <TextView    android:id="@+id/division_line"    android:layout_width="match_parent"    android:layout_height="1dp"    android:background="#333333"    android:layout_above="@+id/rg_contain"    />   <RadioGroup    android:id="@+id/rg_contain"    android:layout_width="match_parent"    android:layout_height="48dp"    android:layout_alignParentBottom="true"    android:gravity="center"    android:background="#ffffff"    android:orientation="horizontal" >    <RadioButton     android:id="@+id/rb_wx"          android:checked="true"     android:text="微信"     android:drawableTop="@drawable/tab_radiobutton_wx_selector"     android:textColor="@color/txt_tab_selector"     />    <RadioButton     android:id="@+id/rb_book"          android:checked="true"     android:text="通讯录"     android:drawableTop="@drawable/tab_radiobutton_book_selector"     android:textColor="@color/txt_tab_selector"     />    <RadioButton     android:id="@+id/rb_discover"          android:checked="true"     android:text="发现"     android:drawableTop="@drawable/tab_radiobutton_discover_selector"     android:textColor="@color/txt_tab_selector"     />    <RadioButton     android:drawableTop="@drawable/tab_radiobutton_me_selector"     android:id="@+id/rb_me"          android:checked="true"     android:text="我"     android:textColor="@color/txt_tab_selector"     />   </RadioGroup> </LinearLayout>

在MainActivity中进行初始化数据

mViewPager = (ViewPager) findViewById(R.id.view_pager);   mRGContain = (RadioGroup) findViewById(R.id.rg_contain);   mRBWX = (RadioButton) findViewById(R.id.rb_wx);   mRBBook = (RadioButton) findViewById(R.id.rb_book);   mRBDiscover = (RadioButton) findViewById(R.id.rb_discover);   mRBMe = (RadioButton) findViewById(R.id.rb_me);   //给图标设置大小   Drawable drawableRbWX = mRBWX.getCompoundDrawables()[1];   drawableRbWX.setBounds(0,0, dp2px(24),dp2px(24));   mRBWX.setCompoundDrawables(null,drawableRbWX,null,null);   Drawable drawableRbBook = mRBBook.getCompoundDrawables()[1];   drawableRbBook.setBounds(0,0, dp2px(24), dp2px(24));   mRBBook.setCompoundDrawables(null,drawableRbBook,null,null);   Drawable drawableRbDiscover = mRBDiscover.getCompoundDrawables()[1];   drawableRbDiscover.setBounds(0,0, dp2px(24), dp2px(24));   mRBDiscover.setCompoundDrawables(null,drawableRbDiscover,null,null);   Drawable drawableRbMe = mRBMe.getCompoundDrawables()[1];   drawableRbMe.setBounds(0,0, dp2px(24), dp2px(24));   mRBMe.setCompoundDrawables(null,drawableRbMe,null,null);  /**   * dp 转 px   * @param dp   * @return   */  public int dp2px(int dp) {   // 1、获取屏幕密度   float density = getApplicationContext().getResources().getDisplayMetrics().density;   // 2、进行乘法操作   return (int) (dp * density + 0.5);  }

给ViewPager设置数据我们使用FragmentPagerAdapter ,所以MainActivity需要继承FragmentActivity。Fragment选择V4包，可以兼容低版本。
新建BaseFragment继承Fragment,让子类实现initView()方法。

public abstract class BaseFragment extends Fragment {  @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   return initView(inflater,container,savedInstanceState);  }  public abstract View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState); }

微信界面

public class WXFragment extends BaseFragment {  @Override  public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   View view = inflater.inflate(R.layout.wx_fragment, container,false);   return view;  } }

wx_fragment.xml代码

<?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">  <TextView   android:gravity="center"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:text="微信"   android:textSize="15dp"   /> </LinearLayout>

其余三个界面类似

/**  * 通讯录界面  */ public class BookFragment extends BaseFragment {  @Override  public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   View view = inflater.inflate(R.layout.book_fragment, container,false);   return view;  } } /**  * 发现界面  */ public class DiscoverFragment extends BaseFragment {  @Override  public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   View view = inflater.inflate(R.layout.discover_fragment, container,false);   return view;  } } /**  * 我界面  */ public class MeFragment extends BaseFragment {  @Override  public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {   View view = inflater.inflate(R.layout.me_fragment, container,false);   return view;  } }

然后使用MainFragmentFactory来存储页面Fragment

package com.example.wxtest.fragment; import java.util.HashMap; public class MainFragmentFactory {  private static HashMap<Integer, BaseFragment> mSavedFragment = new HashMap<Integer, BaseFragment>();  //根据position得到对应的fragment  public static BaseFragment getFragment(int position) {   BaseFragment fragment = mSavedFragment.get(position);   if(fragment == null) {    switch (position) {     case 0:      fragment = new WXFragment();      break;     case 1:      fragment = new BookFragment();      break;     case 2:      fragment = new DiscoverFragment();      break;     case 3:      fragment = new MeFragment();      break;    }    //创建之后保存    mSavedFragment.put(position, fragment);   }   return fragment;  }  public static void deleteFragment(){   for (int i = 0 ; i < 4 ; i++){    mSavedFragment.remove(i);   }  } }

适配器

 /**   * 适配器   */  class MainFragmentAdapter extends FragmentPagerAdapter {   public MainFragmentAdapter(FragmentManager fm) {    super(fm);   }   //根据position的值 返回对应的fragment对象   @Override   public Fragment getItem(int position) {    Fragment fragment = MainFragmentFactory.getFragment(position);    return fragment;   }   //返回ViewPager要显示的item数量   @Override   public int getCount() {    return 4;   }  }

ViewPager设置数据

 //给ViewPager设置数据   mViewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager()));

ViewPager页面选中监听

//界面改变监听   mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    //当前选中页面    @Override    public void onPageSelected(int position) {     switch (position){      case 0:       mRGContain.check(R.id.rb_wx);       break;      case 1:       mRGContain.check(R.id.rb_book);       break;      case 2:       mRGContain.check(R.id.rb_discover);       break;      case 3:       mRGContain.check(R.id.rb_me);       break;      default:       break;     }    }    @Override    public void onPageScrollStateChanged(int state) {    }   });

RadioGroup选中监听

 //RadioGroup选中监听   mRGContain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {     switch (checkedId){      case R.id.rb_wx: //微信       mViewPager.setCurrentItem(0,false);       break;      case R.id.rb_book: //通讯录       mViewPager.setCurrentItem(1,false);       break;      case R.id.rb_discover: //发现       mViewPager.setCurrentItem(2,false);       break;      case R.id.rb_me: //我       mViewPager.setCurrentItem(3,false);       break;      default:       break;     }    }   });   //选中微信界面   mRGContain.check(R.id.rb_wx);

然后运行程序，就可以实现图中的效果了！

关于“ViewPager+RadioGroup如何仿微信实现主界面”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。