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

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

专注于为中小企业提供成都做网站、成都网站制作、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业洛隆免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

在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代码

其余三个界面类似

/**
 * 通讯录界面
 */
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 mSavedFragment = new HashMap();

 //根据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如何仿微信实现主界面”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

名称栏目：ViewPager+RadioGroup如何仿微信实现主界面
标题路径：http://6mz.cn/article/jgosge.html