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

在討論實現之前，我們先來回憶一下，之前我們是如何實現的。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtaux7C1xMq1z9a3vbeoo6zO0sPHzt63qMrHz8i9+NDQsry+1qOs1Nmx4NC0wt+8raGjtviyvL7Wo6y117K/09DSu7aouN+2yLXEVGFio6zSu7Dj08k0uPa78tXfNbj2o6zSstPQM7j2tcSjrL7fzOXK09Om08O2+Laoo6y2+FRhYsnPt73U8srH0ru49kZyYW1lTGF5b3V0o6zTw9Pa1/fOqmZyYWdtZW50tcTI3cb3oaPU2kFjdGl2aXR51tC0psDtttTTprXEteO798rCvP61xMLfvK2jrNDo0qrX1Ly6v9jWxkZyYWdtZW50tcTP1Mq+0+vS/rLYo6zT0MqxuvK/2NbGsru6w8n11sG74bT4wLTEqsP7xuTD7rXEzsrM4qGjPC9wPg0KPHA+xMfDtNPQw7vT0NK71ta88rWltcS3vbeoo6yx3MPiztLDx9fUvLqx4NC0RnJhZ21lbnTH0Lu7tcTC37ytxNijrMbkyrXKx9PQtcSjrFZpZXdQYWdlctX9ysfV4rj2v9i8/qOs1eLKsbry09DIy87KwcujrNK7sOO3xdTatdeyv7XEtby6vcTayN3H+NPyyse147v3x9C7u7XEo6yyu7vhu6y2r8fQu7ujqM6i0MWz/c3io6mjrFZpZXdQYWdlcsrHu+G7rLavx9C7u7XEo6zEx8O01PXDtL3ivvbV4rj2zsrM4sTYoaO08LC4ysfW2NC0Vmlld1BhZ2Vyo6zM4bmp0ru49rK8tvux5MG/o6zTw9Pav9jWxsrHt/HWp7PWu6y2r8fQu7ujrM2ouf3V4rj2seTBv6OsttS21NOmysK8/rXEuq/K/W9uVG91Y2hFdmVudLrNb25JbnRlcmNlcHRUb3VjaEV2ZW50vfjQ0NbY0LSjrMjnufu4w7Hkwb/J6NbDzqp0cnVlo6y8tNans9a7rLavx9C7u6Os0rK+zcrHVmlld1BhZ2VytcTErMjP0NDOqqOsztLDx8q508O4uMDgtcS3vbeovfjQ0LSmwO2ho8jnufvKx2ZhbHNlo6zO0sPHsru9+NDQtKbA7bvy1d+yu7340NDAub3Yo6y3tbvYZmFsc2W8tL/JoaPV4tH5o6zO0sPHtcRWaWV3UGFnZXLX08DgtcS0+sLrvs2zycHL1eLR+aGjPC9wPg0KPHByZSBjbGFzcz0="brush:java;"> 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進行布局就可以了，如下

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

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

然後Tab按鈕的點擊是有效果的，編寫我們的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實現有木有，有時候系統有的組件，我們需要的功能如果與其相似，可以改造一下直接拿來用，沒必要重復造輪子。