ViewPager+RadioGroup仿微信主界面

更新時間：2017年12月29日 13:42:09 作者：虎虎之王

這篇文章主要為大家詳細介紹了ViewPager+RadioGroup仿微信主界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下

話不多說，先上圖，如圖效果，可以點擊底部按鈕選擇頁面，也可以滑動頁面進行選擇。

這里寫圖片描述

那么我們下面就來實現(xiàn)一下吧。

首先創(chuàng)建工程WXTest,主界面布局使用ViewPager+RadioGroup來實現(xiàn),界面代碼如下。

<?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="發(fā)現(xiàn)"
    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中進行初始化數(shù)據(jù)

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);

  //給圖標設(shè)置大小
  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 轉(zhuǎn) px
  * @param dp
  * @return
  */
 public int dp2px(int dp) {
  // 1、獲取屏幕密度
  float density = getApplicationContext().getResources().getDisplayMetrics().density;
  // 2、進行乘法操作
  return (int) (dp * density + 0.5);
 }

給ViewPager設(shè)置數(shù)據(jù)我們使用FragmentPagerAdapter ,所以MainActivity需要繼承FragmentActivity。Fragment選擇V4包，可以兼容低版本。
新建BaseFragment繼承Fragment,讓子類實現(xiàn)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;
 }
}

/**
 * 發(fā)現(xiàn)界面
 */
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>();

 //根據(jù)position得到對應(yīng)的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;
   }
   //創(chuàng)建之后保存
   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);
  }

  //根據(jù)position的值 返回對應(yīng)的fragment對象
  @Override
  public Fragment getItem(int position) {
   Fragment fragment = MainFragmentFactory.getFragment(position);
   return fragment;
  }

  //返回ViewPager要顯示的item數(shù)量
  @Override
  public int getCount() {
   return 4;
  }

 }

ViewPager設(shè)置數(shù)據(jù)

 //給ViewPager設(shè)置數(shù)據(jù)
  mViewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager()));

ViewPager頁面選中監(jiān)聽

//界面改變監(jiān)聽
  mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

   }
   //當(dāng)前選中頁面
   @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選中監(jiān)聽

 //RadioGroup選中監(jiān)聽
  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: //發(fā)現(xiàn)
      mViewPager.setCurrentItem(2,false);
      break;
     case R.id.rb_me: //我
      mViewPager.setCurrentItem(3,false);
      break;
     default:
      break;
    }
   }
  });


  //選中微信界面
  mRGContain.check(R.id.rb_wx);

然后運行程序，就可以實現(xiàn)圖中的效果了！

源碼：下載地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: