SmartTabLayout

先添加smarttablayout的依赖

dependencies {
    compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'
}

 

或者上maven下载aar包导入项目下的libs文件夹,添加以下代码到builde.gradle

android {

　　repositories {
   　　 flatDir {
        　　dirs 'libs'
   　　 }
　　}

}

dependencies {
　　

　　　compile(name: '导入文件的名字', ext: 'aar')

}

<?xml version="1.0" encoding="utf-8"?>
<com.ogaclejapan.smarttablayout.SmartTabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:id="@+id/smart_tab"
    app:stl_customTabTextLayoutId="@layout/include_title_tab"
    app:stl_customTabTextViewId="@+id/text_4"
    app:stl_indicatorColor="@android:color/holo_red_dark"
    app:stl_indicatorInterpolation="linear"
    app:stl_indicatorThickness="3dp"
    app:stl_underlineThickness="1dp">

</com.ogaclejapan.smarttablayout.SmartTabLayout>

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text_4"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:paddingLeft="24dp"
    android:paddingRight="24dp"
    android:textColor="@color/tab_color"
    android:textSize="16sp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp">

</TextView>

　　通过 app:stl_customTabTextViewId="TextView的Id" 将SmartTabLayout和textview联系起来.

 

fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabs"
        />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/viewPager"
            />
    </FrameLayout>

</LinearLayout>

主要思路:将smartTablayout添加到frameLayout(tabs)中,然后 smartTab.setViewPager(viewPager) ,将smartTab和ViewPager进行绑定.

 

fragment代码

public class NewsFragment extends Fragment {
    ArrayList<FragmentInfo> pages = new ArrayList<FragmentInfo>();

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInanceState) {

        View mNews_Fragment = inflater.inflate(R.layout.news_fragment,container,false);

        return mNews_Fragment;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        FrameLayout tabs = getActivity().findViewById(R.id.tabs);
        SmartTabLayout smartTab = (SmartTabLayout) View.inflate(getActivity(),R.layout.include_tab,null);
        tabs.addView(smartTab);

        String[] titles = getResources().getStringArray(R.array.news_titles);
        for(int i = 0;i < titles.length;i++){
            if(i==0){
                FragmentInfo fragmentInfo = new FragmentInfo(titles[i], new HotFragment());
                pages.add(fragmentInfo);
            }else{
                FragmentInfo fragmentInfo = new FragmentInfo(titles[i], new EmptyFragment());
                pages.add(fragmentInfo);
            }

        }

//      ViewPager viewPager = mNews_Fragment.findViewById(R.id.viewPager);
        ViewPager viewPager = (ViewPager) getActivity().findViewById(R.id.viewPager);
//　　　　设置ViewPager的数据
        viewPager.setAdapter(new NewsApadter(getFragmentManager(),pages));

//      将samartTab和ViewPager进行绑定
        smartTab.setViewPager(viewPager);

    }
}

 

adapter代码

public class NewsApadter extends FragmentStatePagerAdapter {
    private ArrayList<FragmentInfo> pages;

    public NewsApadter(FragmentManager fm, ArrayList<FragmentInfo> pages) {
        super(fm);
        this.pages = pages;
    }

//  返回标题对应的fragment
    @Override
    public Fragment getItem(int position) {
        return pages.get(position).getFragment();
    }

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

//  返回每个pager对应的标题
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return pages.get(position).getTitle();
    }
}

 

最终效果: