Android底部Tab頁基於ViewPager的實現

標籤：android   tablet   viewpager   底部導航   

在眾多主流App中，包括QQ，等，為了和ios的UI保持統一，很多App使用的都是底部導航，當然在Android中也並不反對這種設計。這篇文章使用ViewPager實現這種效果。首先看實現吧。中包含了ViewPager的嵌套。

在討論實現之前，我們先來回憶一下，之前我們是如何?的。

之前的實現方法，我們無法是先進行布局，再編寫邏輯。而布局，底部有一定高度的Tab，一般由4個或者5個，也有3個的，具體視應用而定，而Tab上方則是一個FrameLayout，用於作為fragment的容器。在Activity中處理對應的點擊事件的邏輯，需要自己控制Fragment的顯示與隱藏，有時候控制不好甚至會帶來莫名其妙的問題。

那麼有沒有一種簡單的方法，避免我們自己編寫Fragment切換的邏輯呢，其實是有的，ViewPager正是這個控制項，這時候有人問了，一般放在底部的導航內容地區是點擊切換的，不會滑動切換（除外），ViewPager是會滑動切換的，那麼怎麼解決這個問題呢。答案是重寫ViewPager，提供一個布爾變數，用於控制是否支援滑動切換，通過這個變數，對對應事件的函數onTouchEvent和onInterceptTouchEvent進行重寫，如果該變數設定為true，即支援滑動切換，也就是ViewPager的預設行為，我們使用父類的方法進行處理。如果是false，我們不進行處理或者不進行攔截，返回false即可。這樣，我們的ViewPager子類的代碼就成了這樣。

public class CustomViewPager extends ViewPager {    private boolean isCanScroll = false;    public CustomViewPager(Context context) {        super(context);    }    public CustomViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    public boolean isCanScroll() {        return isCanScroll;    }    public void setCanScroll(boolean isCanScroll) {        this.isCanScroll = isCanScroll;    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        if (isCanScroll) {            return super.onTouchEvent(ev);        } else {            return false;        }    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        if (isCanScroll) {            return super.onInterceptTouchEvent(ev);        } else {            return false;        }    }}

使用我們自己的ViewPager代替預設的ViewPager進行布局就可以了，如下

    <com.kltz.tabdemo.view.CustomViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        >    </com.kltz.tabdemo.view.CustomViewPager>

然後我們簡單進行底部Tab的布局

<RadioGroup        android:id="@+id/radio"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="#e8e8e8"        android:orientation="horizontal">        <RadioButton            android:id="@+id/tab1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@drawable/btn"            android:button="@drawable/btn"            android:gravity="center"            android:text="Tab1"            />        <RadioButton            android:id="@+id/tab2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@drawable/btn"            android:button="@null"            android:gravity="center"            android:text="Tab2"            />        <RadioButton            android:id="@+id/tab3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@drawable/btn"            android:button="@null"            android:gravity="center"            android:text="Tab3"            />        <RadioButton            android:id="@+id/tab4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@drawable/btn"            android:button="@null"            android:gravity="center"            android:text="Tab4"            />    </RadioGroup>

上面兩段布局外圍是一個線性布局，使用了layout_weight屬性控制了內容地區的高度。

然後Tab按鈕的點擊是有效果的，編寫我們的Selector作為按鈕的背景，這裡隨便選了兩個顏色，實際開發中用對應圖片代替。

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true" android:drawable="@color/accent_material_light"/>    <item android:drawable="@color/abc_search_url_text_normal"/></selector>

最後來看看我們簡單的邏輯處理，對RadioGroup設定監聽，當點擊了之後判斷是哪一個Button，將ViewPager顯示為對應的頁，使用setCurrentItem函數，第二個參數傳false，代表無切換動畫。

public class MainActivity extends AppCompatActivity{    private CustomViewPager mViewPager;    private RadioGroup mRadioGroup;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        mViewPager= (CustomViewPager) findViewById(R.id.viewpager);        mRadioGroup= (RadioGroup) findViewById(R.id.radio);        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int i) {                return BaseFragment.newInstance(i);            }            @Override            public int getCount() {                return 4;            }        });        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                switch (checkedId) {                    case R.id.tab1:                        mViewPager.setCurrentItem(0, false);                        break;                    case R.id.tab2:                        mViewPager.setCurrentItem(1, false);                        break;                    case R.id.tab3:                        mViewPager.setCurrentItem(2, false);                        break;                    case R.id.tab4:                        mViewPager.setCurrentItem(3, false);                        break;                }            }        });    }}

很簡單的Tab實現有木有，有時候系統有的組件，我們需要的功能如果與其相似，可以改造一下直接拿來用，沒必要重複造輪子。

源碼下載

http://download.csdn.net/detail/sbsujjbcy/8881617

如果你覺得對你有協助，點個贊吧！

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android底部Tab頁基於ViewPager的實現