几行代码实现tab+fragment+viewpager---还有酷炫的动画效果哦

运行效果:

核心代码展示:

 private void init() {
        ViewGroup tab = (ViewGroup) findViewById(R.id.tab);
        tab.addView(LayoutInflater.from(this).inflate(R.layout.demo_distribute_evenly, tab, false));
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
        FragmentPagerItems pages = new FragmentPagerItems(this);
        pages.add(FragmentPagerItem.of("热门课程", DemoFragment.class));
        pages.add(FragmentPagerItem.of("志愿讲堂", DemoFragment.class));
        pages.add(FragmentPagerItem.of("专家解读", DemoFragment.class));
        pages.add(FragmentPagerItem.of("大学展播", DemoFragment.class));
        FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                getSupportFragmentManager(), pages);
        viewPager.setAdapter(adapter);
        viewPagerTab.setViewPager(viewPager);
    }

几行代码轻松实现tab+fragment+viewpager的效果,动画效果是不是很酷炫呢?

所用库:SmartTabLayout-master
下载地址:https://github.com/ogaclejapan/SmartTabLayout

自定义效果所需要的文件:

demo_distribute_evenly 代码展示

<com.ogaclejapan.smarttablayout.SmartTabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/viewpagertab"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tab_height"
    app:stl_defaultTabTextColor="@color/custom_tab"
    app:stl_distributeEvenly="true"
    app:stl_indicatorColor="#40C4FF"
    app:stl_indicatorCornerRadius="0dp"
    app:stl_indicatorInterpolation="smart"
    app:stl_indicatorThickness="3dp"
    app:stl_defaultTabTextSize="14dp"
    app:stl_dividerColor="#8040C4FF"
    app:stl_dividerThickness="1dp"
    />

更多的自定义设置留意库里面的attrs.xml文件

attrs.xml 代码详情

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="stl_SmartTabLayout">
    <attr name="stl_indicatorAlwaysInCenter" format="boolean"/>
    <attr name="stl_indicatorWithoutPadding" format="boolean"/>
    <attr name="stl_indicatorInFront" format="boolean"/>
    <attr name="stl_indicatorInterpolation" format="enum">
      <enum name="smart" value="0"/>
      <enum name="linear" value="1"/>
    </attr>
    <attr name="stl_indicatorGravity" format="enum">
      <enum name="bottom" value="0"/>
      <enum name="top" value="1"/>
      <enum name="center" value="2"/>
    </attr>
    <attr name="stl_indicatorColor" format="color"/>
    <attr name="stl_indicatorColors" format="reference"/>
    <attr name="stl_indicatorThickness" format="dimension"/>
    <attr name="stl_indicatorWidth" format="dimension">
      <enum name="auto" value="-1"/>
    </attr>
    <attr name="stl_indicatorCornerRadius" format="dimension"/>
    <attr name="stl_overlineColor" format="color"/>
    <attr name="stl_overlineThickness" format="dimension"/>
    <attr name="stl_underlineColor" format="color"/>
    <attr name="stl_underlineThickness" format="dimension"/>
    <attr name="stl_dividerColor" format="color"/>
    <attr name="stl_dividerColors" format="reference"/>
    <attr name="stl_dividerThickness" format="dimension"/>
    <attr name="stl_defaultTabBackground" format="reference"/>
    <attr name="stl_defaultTabTextAllCaps" format="boolean"/>
    <attr name="stl_defaultTabTextColor" format="color|reference"/>
    <attr name="stl_defaultTabTextSize" format="dimension"/>
    <attr name="stl_defaultTabTextHorizontalPadding" format="dimension"/>
    <attr name="stl_defaultTabTextMinWidth" format="dimension"/>
    <attr name="stl_customTabTextLayoutId" format="reference"/>
    <attr name="stl_customTabTextViewId" format="reference"/>
    <attr name="stl_distributeEvenly" format="boolean"/>
    <attr name="stl_clickable" format="boolean"/>
    <attr name="stl_titleOffset" format="dimension">
      <enum name="auto_center" value="-1"/>
    </attr>
    <attr name="stl_drawDecorationAfterTab" format="boolean"/>
  </declare-styleable>
</resources>

效果图xml代码展示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@color/info_bj">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/title_height"
        android:background="@color/home_bag_color"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/youxy_title_text"
            android:textColor="@color/text_color"
            android:textSize="20dp" />

        <ImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@mipmap/main_back"
            android:onClick="back" />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        >
        <LinearLayout
            android:id="@+id/header"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            >
            <FrameLayout
                android:id="@id/tab"
                android:layout_width="match_parent"
                android:layout_height="@dimen/tab_height"
                android:background="@color/white"
                />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:background="@color/info_bj"/>
        <android.support.v4.view.ViewPager
            android:id="@id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/header"
            />
    </LinearLayout>
</LinearLayout>