話不多說(shuō),先上圖,如圖效果,可以點(diǎn)擊底部按鈕選擇頁(yè)面,也可以滑動(dòng)頁(yè)面進(jìn)行選擇。

那么我們下面就來(lái)實(shí)現(xiàn)一下吧。
首先創(chuàng)建工程WXTest,主界面布局使用ViewPager+RadioGroup來(lái)實(shí)現(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中進(jìn)行初始化數(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); //給圖標(biāo)設(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、進(jìn)行乘法操作 return (int) (dp * density + 0.5); } 給ViewPager設(shè)置數(shù)據(jù)我們使用FragmentPagerAdapter ,所以MainActivity需要繼承FragmentActivity。Fragment選擇V4包,可以兼容低版本。
新建BaseFragment繼承Fragment,讓子類實(shí)現(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>
其余三個(gè)界面類似
/** * 通訊錄界面 */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來(lái)存儲(chǔ)頁(yè)面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得到對(duì)應(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的值 返回對(duì)應(yīng)的fragment對(duì)象 @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頁(yè)面選中監(jiān)聽
//界面改變監(jiān)聽 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //當(dāng)前選中頁(yè)面 @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);然后運(yùn)行程序,就可以實(shí)現(xiàn)圖中的效果了!
源碼:下載地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注