话不多说,先上图,如图效果,可以点击底部按钮选择页面,也可以滑动页面进行选择。

那么我们下面就来实现一下吧。
首先创建工程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" style="@style/BottomTabStyle" android:checked="true" android:text="微信" android:drawableTop="@drawable/tab_radiobutton_wx_selector" android:textColor="@color/txt_tab_selector" /> <RadioButton android:id="@+id/rb_book" style="@style/BottomTabStyle" android:checked="true" android:text="通讯录" android:drawableTop="@drawable/tab_radiobutton_book_selector" android:textColor="@color/txt_tab_selector" /> <RadioButton android:id="@+id/rb_discover" style="@style/BottomTabStyle" 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" style="@style/BottomTabStyle" 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);然后运行程序,就可以实现图中的效果了!
源码:下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。
新闻热点
疑难解答