Tablayout + ViewPager + fragment 实现底部或顶部导航栏

  之前老是在不停的写代码.找代码.找资料.总感觉脑子里面什么都没有.写过的东西有时候瞬间就忘记了,看来是时候系统的分析自己曾经写过或者用过的代码了.

今天来了解一下顶部或底部导航栏的实现,导航栏的实现有很多方法,比如TabHost+ViewPager..actionBar+viewPager 还有就是今天所用的TabLayout+ViewPager来实现,TabLayout是Google在2015年大会上发布Matrail Design的其中一个控件,用起来还是很简单的.

首先我们要导入依赖compile 'com.android.support:design:22.2.0'    可能刚开始使用AS不是很了解,22.2.0是因为我们compileSdkVersion用了22

所以用到23的朋友就要相应的改成compile 'com.android.support:design:23.4.0'，然后就可以编写我们布局文件了。

 

 <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/include_bar"
        app:tabIndicatorColor="@color/main_tab_indicator_color"
        />
        <!--app:tabIndicatorHeight="0dp"-->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabLayout" />
</RelativeLayout>

app：tabIndicatorColor是TabLayout指示器的颜色，就是我们滑动的时候跟着的那条线。app：tabIndicatorheight是指示器的高度，当我们用来作为底座导航栏的时候就要设置为0隐藏掉了。

 

然后我们就可以编写我们的Activity了，首先需要我们准备几个Fragment，根据你需要几个tab来决定。然后需要为ViewPager构建一个Adapter

我这边用到了四个Fragment，因为每个Fragment的内容差别很大就创建了四个，如果内容区别不是很大的话可以用一个Fragment，调用。newInstance的方法时候来判断即可。

 

public class FindResourceFragmentAdapter extends FragmentPagerAdapter{
    private Context context;
    final  int PAGE_NUMBER = 4;
    private String tabStr[] = new String[]{"科研机构","专家个人","中介机构","技术供需"};

    public FindResourceFragmentAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }
    public View getTabView(int position) {
        return classCagegoryTabView(context, position);
    }

    @Override
    public Fragment getItem(int position) {

        switch (position){
            case 0:
                if(institutionFragment == null){
                    institutionFragment =  InstitutionFragment.newInstance("科研机构","");
                }
                return institutionFragment;
            case 1:
                if(expertFragment == null){
                    expertFragment = ExpertFragment.newInstance("专家个人");
                }
                return expertFragment;
            case 2:
                if(agentFragment == null){
                    agentFragment = AgentFragment.newInstance("中介机构","");
                }
                return agentFragment;
            case 3:
                if(buyFragment == null){
                    buyFragment = BuyFragment.newInstance("技术供需","");
                }
                return buyFragment;

        }
        return null;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return tabStr[position];
    }
}

      我这个标题是写死的，可根据需要网络获取。getTabView根据position显示title。 getItem就是用来切换Fragment的。getCount返回title的size。getPageTitle返回当前的title。

 

setTabMode当tab标签不超过四个时候用MODE_FIED

 

 viewPager = (ViewPager) findViewById(R.id.viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        adapter = new FindResourceFragmentAdapter(getSupportFragmentManager(),this);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(adapter.getTabView(i));
            }
            tab.setTag(i + "");
            //默认初始化第一条显示样式
            View view = tab.getCustomView();
            if (i == 0) {
//                view.setBackgroundResource(R.drawable.);//选中
            } else if (i == tabLayout.getTabCount() - 1) {0
//                view.setBackgroundResource(R.drawable.class_tabbar_unselect_full);//未选中
            } else {
//                view.setBackgroundResource(R.drawable.class_tabbar_unselect_wrap);//未选中
            }
        }
        tabLayout.setOnTabSelectedListener(this);
        final TabLayout.TabLayoutOnPageChangeListener listener =
                new TabLayout.TabLayoutOnPageChangeListener(tabLayout);
        viewPager.addOnPageChangeListener(listener);
        viewPager.setCurrentItem(0);
        isTabSelected(tabLayout.getTabAt(0), true);

tabLayout.setOnTabSelectedListener(this);
final TabLayout.TabLayoutOnPageChangeListener listener =
        new TabLayout.TabLayoutOnPageChangeListener(tabLayout);
viewPager.addOnPageChangeListener(listener);
viewPager.setCurrentItem(0);
isTabSelected(tabLayout.getTabAt(0), true);

  private void isTabSelected(TabLayout.Tab tab, boolean selected) {
        View view = tab.getCustomView();
        String tag = tab.toString();
        if (selected) {
//            view.setBackgroundResource(R.drawable.class_tabbar_select);//
        } else {
            if ((tabLayout.getTabCount() - 1 + "").equals(tag)) {
//                view.setBackgroundResource(R.drawable.class_tabbar_unselect_full);
            } else {
//                view.setBackgroundResource(R.drawable.class_tabbar_unselect_wrap);
            }
        }
    }

isSelected方法主要是用来完成项目需求的，用来区分选择和不选中的区别

 

  因为不是一个单纯的demo，整个项目有点大，我把相关文件上传一下，如有时间专门写个Demo

  部分主要文件下载http://download.csdn.net/my

 

 

 

ActionBar 

+ 

ViewPager

 

ActionBar 

+ 

ViewPager