使用TabLayout+ViewPager+Fragment+DataBing实现仿网易新闻主界面效果

在这里首先要感谢http://blog.csdn.net/qdjdeveloper/article/details/71254819

话不多说,先上效果图:

顶部的导航条是可以滑动的,底部的导航条是不能滑动!
那让我们看下具体的实现代码:

1,主界面MainActivity

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;
    private FragmentPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //隐藏系统自带的状态栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //隐藏掉整个ActionBar
        getSupportActionBar().hide();
     /*通过DataBing来绑定布局视图*/
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        //初始化适配器-添加所需要的fragment
        mAdapter = new MainTabAdapter(this);
        binding.viewPager.setAdapter(mAdapter);
        //将TabLayout和ViewPager关联起来
        binding.tabLayout.setupWithViewPager(binding.viewPager);
        binding.viewPager.setOffscreenPageLimit(5);
        initTab();
    }

    /**
     * 设置添加Tab
     */
    private void initTab() {
    /*tab_home为底部导航条布局*/
        binding.tabLayout.getTabAt(0).setCustomView(R.layout.tab_home);
        binding.tabLayout.getTabAt(1).setCustomView(R.layout.tab_hot);
        binding.tabLayout.getTabAt(2).setCustomView(R.layout.tab_category);
        binding.tabLayout.getTabAt(3).setCustomView(R.layout.tab_cart);
        binding.tabLayout.getTabAt(4).setCustomView(R.layout.tab_mine);

        //默认选中的Tab
        binding.tabLayout.getTabAt(0).getCustomView().setSelected(true);

    }
}

2,主界面布局 main_activity

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">
    <!--此layout为DataBing的固定写法-->
    <!--使用DataBing时,其布局中的根布局只能有一个子布局-->
    <LinearLayout
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.qiudengjiao.tablayout.MainActivity">
        <!--不可滑动的ViewPager-->
        <com.example.qiudengjiao.tablayout.view.NoScrollViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </com.example.qiudengjiao.tablayout.view.NoScrollViewPager>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#d6d2d2"/>
        <!--底部导航栏
        -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            app:tabIndicatorColor="#33e0ff"
            app:tabIndicatorHeight="0dp">

        </android.support.design.widget.TabLayout>
    </LinearLayout>
</layout>

3,底部导航条单个item的布局–例如:tab_home

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        //图片选择资源文件
        android:src="@drawable/selector_tab_home" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首页"
        //字体选择资源文件
        android:textColor="@color/selector_tab_text"
        android:textSize="14sp" />

</LinearLayout>

//图片选择资源文件 @drawable/selector_tab_home
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_home" android:state_selected="false"/>
<item android:drawable="@mipmap/icon_home_press" android:state_selected="true"/>
</selector>

//文字选择资源文件 @color/selector_tab_text
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#999999" android:state_selected="false"/>
    <item android:color="#e22b2b" android:state_selected="true"/>
</selector>

4,主界面使用的MainTabAdapter

public class MainTabAdapter extends FragmentPagerAdapter {
    private MainActivity mContext;
    private HomeFragment homeFragment;
    private HotFragment hotFragment;
    private CategoryFragment categoryFragment;
    private CartFragment cartFragment;
    private MineFragment mineFragment;

    public MainTabAdapter(MainActivity mainActivity) {
        super(mainActivity.getSupportFragmentManager());
        this.mContext = mainActivity;

        //初始化Fragment
        homeFragment = new HomeFragment();
        hotFragment = new HotFragment();
        categoryFragment = new CategoryFragment();
        cartFragment = new CartFragment();
        mineFragment = new MineFragment();
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return homeFragment;
        } else if (position == 1) {
            return hotFragment;
        } else if (position == 2) {
            return categoryFragment;
        } else if (position == 3) {
            return cartFragment;
        } else if (position == 4) {
            return mineFragment;
        }
        return null;
    }

    @Override
    public int getCount() {
        return 5;
    }
}

5,第一个Fragment–>HomeFragment

public class HomeFragment extends BaseFragment {
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragment;
    private List<String> mTitle;
    private FragmentHomeBinding mBinding;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false);
        initTabFragment();
        return mBinding.getRoot();
    }
    private void initTabFragment() {

        //初始化Fragment
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();

        //将Fragment装进列表中
        mFragment = new ArrayList<>();
        mFragment.add(fragment1);
        mFragment.add(fragment2);
        mFragment.add(fragment3);

        //将名称添加daoTab列表
        mTitle = new ArrayList<>();
        mTitle.add("Tab1");
        mTitle.add("Tab2");
        mTitle.add("Tab3");

        //为TabLayout添加Tab名称
        mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(0)));
        mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(1)));
        mBinding.topTabLayout.addTab(mBinding.topTabLayout.newTab().setText(mTitle.get(2)));

        mAdapter = new TopAdapter(getActivity().getSupportFragmentManager(), mFragment, mTitle);

        //ViewPager加载Adapter
        mBinding.topViewPager.setAdapter(mAdapter);

        //TabLayout加载ViewPager
        mBinding.topTabLayout.setupWithViewPager(mBinding.topViewPager);
    }
}

6,顶部导航栏适配器

public class TopAdapter extends FragmentPagerAdapter {

    //Fragment列表
    private List<Fragment> mFragment;
    //Tab名列表
    private List<String> mTitle;

    public TopAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        this.mFragment = fragments;
        this.mTitle = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragment.get(position);
    }

    @Override
    public int getCount() {
        return mTitle.size();
    }

    //此方法用来显示Tab上的名字
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitle.get(position);
    }
}

8,其他的一些资源文件就不贴出来了
详见giuhub地址:
https://github.com/willBars/tabLayoutDemo

以上!