本文共 4574 字，大约阅读时间需要 15 分钟。

1、最终效果展示

附：中间部分可以左右滑动

2、核心类和布局

（1）activity_main主页面布局

（2）底部导航栏部分bottom布局

（3）MainActivity.java

/** * 使用FragmentActivity，它是基于Fragment实现的活动类 */public class MainActivity extends FragmentActivity implements View.OnClickListener {    //声明ViewPager    private ViewPager mViewPager;    //适配器    private FragmentPagerAdapter mAdapter;    //装载Fragment的集合    private List
   
     mFragments;    //三个Tab对应的布局    private LinearLayout mTab1,mTab2,mTab3;    //三个Tab对应的ImageButton    private ImageButton mImg1,mImg2,mImg3;        @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initViews();//初始化控件        selectTab(0);//初始页面为主页面        initEvents();//初始化事件        initDatas();//初始化数据    }    //初始化控件    private void initViews(){        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);                mTab1 = (LinearLayout) findViewById(R.id.id_tab1);        mTab2 = (LinearLayout) findViewById(R.id.id_tab2);        mTab3 = (LinearLayout) findViewById(R.id.id_tab3);                mImg1 = (ImageButton) findViewById(R.id.id_tab_img1);        mImg2 = (ImageButton) findViewById(R.id.id_tab_img2);        mImg3 = (ImageButton) findViewById(R.id.id_tab_img3);    }    private void initEvents(){        //设置三个Tab的点击事件        mTab1.setOnClickListener(this);        mTab2.setOnClickListener(this);        mTab3.setOnClickListener(this);    }    private void initDatas(){        mFragments=new ArrayList<>();        //将三个Fragment加入集合中        mFragments.add(new HomeFragment());        mFragments.add(new RecommendFragment());        mFragments.add(new MineFragment());        //初始化适配器        mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int position) {                return mFragments.get(position);            }            @Override            public int getCount() {                return mFragments.size();            }        };        //设置ViewPager的适配器        mViewPager.setAdapter(mAdapter);        //设置ViewPager的切换监听        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            //页面滚动事件            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            //页面选中事件            @Override            public void onPageSelected(int position) {                //设置position对应的集合中的fragment                mViewPager.setCurrentItem(position);                resetImgs();                selectTab(position);            }            //页面滚动状态改变事件            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    @Override    public void onClick(View view) {        //先将三个ImageButton置为灰色        resetImgs();        switch (view.getId()){            case R.id.id_tab1:                selectTab(0);                break;            case R.id.id_tab2:                selectTab(1);                break;            case R.id.id_tab3:                selectTab(2);                break;        }    }    //将三个ImageButton设置为灰色    private void resetImgs() {        mImg1.setImageResource(R.drawable.icon1);        mImg2.setImageResource(R.drawable.icon2);        mImg3.setImageResource(R.drawable.icon3);    }    private void selectTab(int i) {        //根据点击的Tab设置对应的ImageButton为选中的颜色        switch (i) {            case 0:                mImg1.setImageResource(R.drawable.icon1_selected);                break;            case 1:                mImg2.setImageResource(R.drawable.icon2_selected);                break;            case 2:                mImg3.setImageResource(R.drawable.icon3_selected);                break;        }        //设置当前点击的Tab所对应的页面        mViewPager.setCurrentItem(i);    }}
   

3、三个fragment，都一样

（1）新建三个blank fragment，我自己的是HomeFragment，RecommendFragment，MineFragment

/** * 首页HomeFragment */public class HomeFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_home, container, false);    }}

（2）三个fragment的布局文件也都一样

附：在此之前也试过另一种办法，可参考：