SpaceTabLayout

介绍：

一个奇特的TabLayout，类似Google Space app的效果。

运行效果：

使用说明：

依赖

compile 'eu.long1:spacetablayout:1.0.4'

XML 实现

In your layout just include this. You can customize the Tab here with text, icons, colors...

 <eu.long1.spacetablayout.SpaceTabLayout
        android:id="@+id/spaceTabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:number_of_tabs="five"
        app:starting_position="three"
        app:tab_color="@color/colorPrimary"
        app:button_color="@color/colorAccent"
        app:text_color="#61FFFFFF"
        app:icon_one="@drawable/ic_hotel_black_24dp"
        app:icon_two="@drawable/design_ic_visibility"
        app:icon_three="@drawable/ic_content_cut_black_24dp"
        app:icon_four="@drawable/ic_check_black_24dp"
        app:icon_five="@drawable/ic_fingerprint_black_24dp"/>

SnackBar behavior

如果你使用CoordinatorLayout作为根布局，你可以添加下面的代码来正确处理SnackBar的behavior

 app:layout_behavior="eu.long1.spacetablayout.SpaceTabLayoutBehavior"

XML Example

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="56dp" />
    <eu.long1.spacetablayout.SpaceTabLayout
        android:id="@+id/spaceTabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="eu.long1.spacetablayout.SpaceTabLayoutBehavior"
        app:number_of_tabs="five"
        app:starting_position="three" />
</android.support.design.widget.CoordinatorLayout>

代码实现

在你的MainActivity.java 中你需要如下初始化SpaceTabLayout：

    SpaceTabLayout tabLayout;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //add the fragments you want to display in a List
            List<Fragment> fragmentList = new ArrayList<>();
            fragmentList.add(new FragmentA());
            fragmentList.add(new FragmentB());
            fragmentList.add(new FragmentC());
            ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
            tabLayout = (SpaceTabLayout) findViewById(R.id.spaceTabLayout);
            //we need the savedInstanceState to get the position
            tabLayout.initialize(viewPager, getSupportFragmentManager(), 
                            fragmentList, savedInstanceState);
        }
        //we need the outState to save the position
        @Override
        protected void onSaveInstanceState(Bundle outState) {
            tabLayout.saveState(outState);
            super.onSaveInstanceState(outState);
        }

属性

        app:number_of_tabs="five"
        app:starting_position="three"
        app:tab_color="@color/colorPrimary"
        app:button_color="@color/colorAccent"
        app:text_color="#61FFFFFF"
        app:icon_one="@drawable/ic_hotel_black_24dp"
        app:icon_two="@drawable/design_ic_visibility"
        app:icon_three="@drawable/ic_content_cut_black_24dp"
        app:icon_four="@drawable/ic_check_black_24dp"
        app:icon_five="@drawable/ic_fingerprint_black_24dp"
        app:text_one="Action"
        app:text_two="Action"
        app:text_three="Action"

你也可以用下面的方法来设置属性

Method	Description
getTabLayout();	Gives you the base RelativeLayout.
setTabColor(@ColorInt int backgroundColor);	Change the color of the Tab.
getCurrentPosition();	Gives you the current tab position.
getButton();	Give you the Floating Action Button View.
setButtonColor(@ColorInt int backgroundColor);	Change the color of the Floating Button.
setOnClickListener(View.OnClickListener l);	Set the same OnClickListener to all positions.
setTabOneOnClickListener(View.OnClickListener ll);	Set the OnClickListener for the first position.
setTabTwoOnClickListener(View.OnClickListener cl);	Set the OnClickListener for the second position.
getTabOneView();	Get you the first base LinearLayout that contains an ImageView or an ImageView and a TextView.
setTabOneView(View tabOneView);	You can set the base layout for the first position.
getTabTwoView();	Get you the second base LinearLayout that contains an ImageView or an ImageView and a TextView.
setTabTwoView(View centerView);	You can set the base layout for the second position.
setTabOneIcon(@DrawableRes int tabOneIcon);	Set the icon for both the first tab and the Action Button when in the first position.
setTabTwoIcon(@DrawableRes int tabTwoIcon);	Set the icon for both the second tab and the Action Button when in the second position.