如何简单的实现一个tab页title的动画效果

首先我们来看看实现的效果 tab上的title沉下去的效果

先来看看布局

<?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="wrap_content"
    android:background="@color/white"
    android:id="@+id/top_bar"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">
        <RelativeLayout
            android:id="@+id/layout_item_one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/item_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="全部"
                android:layout_centerHorizontal="true"
                android:textColor="@color/mainColor"
                android:layout_centerInParent="true"/>

            <View
                android:id="@+id/item_one_bar"
                android:layout_width="match_parent"
                android:layout_alignParentBottom="true"
                android:layout_height="1px"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="@color/mainColor" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout_item_two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:id="@+id/item_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="待回答"
                android:layout_margin="10dp"
                android:textColor="@color/fontTextColor"
                android:layout_centerInParent="true"/>
            <View
                android:id="@+id/item_two_bar"
                android:layout_width="match_parent"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_height="1px"
                android:background="@color/mainColor"
                android:visibility="gone"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/layout_item_three"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:id="@+id/item_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="已回答"
                android:layout_margin="10dp"
                android:layout_centerInParent="true"
                android:textColor="@color/fontTextColor"/>
            <View
                android:id="@+id/item_three_bar"
                android:layout_width="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_height="1px"
                android:background="@color/mainColor"
                android:layout_alignParentBottom="true"
                android:visibility="gone"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/layout_item_four"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:id="@+id/item_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="已过期"
                android:layout_margin="10dp"
                android:textColor="@color/fontTextColor"
                android:layout_centerInParent="true"/>
            <View
                android:id="@+id/item_four_bar"
                android:layout_width="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_height="1px"
                android:background="@color/mainColor"
                android:layout_alignParentBottom="true"
                android:visibility="gone"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/layout_item_five"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:id="@+id/item_five"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="已拒绝"
                android:layout_margin="10dp"
                android:textColor="@color/fontTextColor"
                android:layout_centerInParent="true"/>
            <View
                android:id="@+id/item_five_bar"
                android:layout_width="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_height="1px"
                android:background="@color/mainColor"
                android:layout_alignParentBottom="true"
                android:visibility="gone"/>
        </RelativeLayout>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_height="1px"
        android:background="#ccc"
        />
</LinearLayout>

是不是发现没什么特别，是的没什么特别 , 下面贴出用到的代码

 /**
     *
     * @param view
     */
    public void onClick(View view){
        resetTabBg();
        switch (view.getId()){
            case R.id.layout_item_one:
                setTabPage(0);
                break;
            case R.id.layout_item_two:
                setTabPage(1);
                break;
            case R.id.layout_item_three:
                setTabPage(2);
                break;
            case R.id.layout_item_four:
                setTabPage(3);
                break;
            case R.id.layout_item_five:
                setTabPage(4);
                break;
        }
    }
    /**
     * 重置每个tab
     */
    private void resetTabBg() {
        int color = getResources().getColor(R.color.fontTextColor);
        mTvItemOne.setTextColor(color);
        mVItemOneBar.setVisibility(View.GONE);
        mTvItemTwo.setTextColor(color);
        mVItemTwoBar.setVisibility(View.GONE);
        mTvItemThree.setTextColor(color);
        mVItemThreeBar.setVisibility(View.GONE);
        mTvItemFour.setTextColor(color);
        mVItemFourBar.setVisibility(View.GONE);
        mTvItemFive.setTextColor(color);
        mVItemFiveBar.setVisibility(View.GONE);
    }

    /**
     * 跳入某个tab页
     * @param i
     */
    private void setTabPage(int i){
        int color = getResources().getColor(R.color.mainColor);
        if(i == 0){
            mTvItemOne.setTextColor(color);
            mVItemOneBar.setVisibility(View.VISIBLE);
        } else if(i == 1){
//            hasNew = false;
//            checkHasNew();
            mTvItemTwo.setTextColor(color);
            mVItemTwoBar.setVisibility(View.VISIBLE);
        } else if(i == 2){
            mTvItemThree.setTextColor(color);
            mVItemThreeBar.setVisibility(View.VISIBLE);
        } else if(i == 3){
            mTvItemFour.setTextColor(color);
            mVItemFourBar.setVisibility(View.VISIBLE);
        } else if(i == 4){
            mTvItemFive.setTextColor(color);
            mVItemFiveBar.setVisibility(View.VISIBLE);
        }
        //切换viewpager页面
        mWdPager.setCurrentItem(i);
    }

就会发现自动有这个效果了，是不是很简单，是的其实这个只是利用了布局的特点而已.

如果你不想有这个类似这个动画的效果，可以直接在代码中选择  setVisibility(View.INVISIBLE); //占位不显示 和xml中  View 中加上android:visibility="invisible"

 <View
  android:id="@+id/item_five_bar"
  android:layout_width="match_parent"
  android:layout_marginLeft="10dp"
  android:layout_marginRight="10dp"
  android:layout_height="1px"
  android:background="@color/mainColor"
  android:layout_alignParentBottom="true"
  android:visibility="invisible"/>