ToolBar下面放置一个TabLayout踩过的坑

由于使用了DrawerLayout+Navigation,所以会有一个ToolBar。接着我就想在toolBar下放置一个tab在最底下的TabLayout，没想到，踩到了不少的坑

主要xmL文件

app_bar_main.xml//这里是第一层布局,

content_main.xml//这里是第二层布局，放着viewPager和tabLayout

news_fragment.xml//第三层，有三个类似这样的布局，用于不同page的展示

java文件

MainActivity.java//这个应该不用多说

NewsFragment.java//有三个类似这样的文件，主要定义里面的fragment内容，现在只有textview

MyfragmentPagerAdapter.java//实现viewPager说需要的一个Adapter

app_bar_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!--AppBarLayout必须是CoordinatorLayout直接子View-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--有一些参数使用系统默认参数-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_height="40dp"
            android:layout_width="match_parent"
            android:background="#485"
            app:layout_scrollFlags="scroll|enterAlways"
            >
            <TextView
                android:id="@+id/toolBarTitle"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:gravity="center"
                android:textSize="25sp"
                android:textColor="#fff"
                />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
   
    <include layout="@layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>

content_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:showIn="@layout/app_bar_main"
    android:paddingBottom="40dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"><!--显示在toolbar下面-->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_tab"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyCustomTabLayout"
        />
</LinearLayout>

app：layout_behavior="..."这一句话很重要，就是因为没有它导致viewPager的内容把上方的toolBar给覆盖掉了

还有TabLayout中的style="@style/MyCustomTabLayout"自定义tab的下划线颜色和允许使用图片资源作为tab

style设置如下

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">#488484</item>
    <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
</style>

还有就是fragment

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="ns_fragmentew">
</TextView>

fragment.java文件非常简单

public class NewsFragment extends Fragment {

    public static NewsFragment newInstance()
    {
        NewsFragment newsFragment = new NewsFragment();
        return newsFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.news_fragment,container,false);
        return view;
    }
}

然后定义一个需要用到的Adapter

public class MainFragmentPagerAdapter extends FragmentPagerAdapter{
    final int PAGE_COUNT = 3;
    private int[] imageResId ={
            R.drawable.news,
            R.drawable.write,
            R.drawable.calendar
    };
    private Context context;
    public MainFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context= context;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment ;
        switch (position)
        {
            case 0:
                fragment = NewsFragment.newInstance();
                break;
            case 1:
                fragment = WriteFragment.newInstance();
                break;
            case 2:
                fragment = CalendarFragment.newInstance();
                break;
            default:
                return null;
        }
        return fragment;
    }

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

    //设置标题,icon
    @Override
    public CharSequence getPageTitle(int position)
    {
        Drawable image = context.getResources().getDrawable(imageResId[position]);
        image.setBounds(0,0,image.getIntrinsicWidth(),image.getIntrinsicHeight());
        SpannableString sb =  new SpannableString(" ");
        ImageSpan imageSpan = new ImageSpan(image,ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan,0,1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;//需要在style那里设置textAllCaps为false才能吧ImageSpan渲染出来
        //return tabTitles[position];
    }

}

接下来是MainActivity.java//只给部分代码，其他无关代码较多

首先是一些变量

//设置TabLayout
private MainFragmentPagerAdapter mainFragmentPagerAdapter;
private ViewPager viewPager;
private TabLayout tabLayout;
//设置标题
public TextView textView ;

然后是实现

textView = (TextView) findViewById(R.id.toolBarTitle);
/**
 * 配置TabLayout
 */
mainFragmentPagerAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(),this);
viewPager = (ViewPager) findViewById(R.id.viewpager_tab);
viewPager.setAdapter(mainFragmentPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
//设置监听器
tabLayout.addOnTabSelectedListener(this);//该监听器用于更新标题

监听器

/**
 * tab监听
 * @param tab
 */
@Override
public void onTabSelected(TabLayout.Tab tab) {
    switch (tab.getPosition())
            {
                case 0:
                    textView.setText("趣闻");
                    break;
                case 1:
                    textView.setText("随笔");
                    break;
                case 2:
                    textView.setText("日历");
                    break;
            }
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}

之前脑抽，没考虑到用监听器，通过异步在Adapter中传输标题信息传回主界面，最后发现一开始可以更新标题，但更新了一两次之后就不再更新了。。。

目测是ViewPager的原因，并不是通过getItem来实时更新fragment，所以这种想法失败

http://www.open-open.com/lib/view/open1488526061638.html//深度解析TabLayout的一篇文章