这篇文章将为大家详细讲解有关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如何仿微信实现主界面”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
