android 底部Tab添加水波纹效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dhl_1986/article/details/80898970

  像今日头条和360手机助手底部Tab 都会添加一些水波纹效果，这样能增加用户体验，这里浅谈添加Ripple 的三种方式：

 1，有边界的水波纹

  android:background="?android:attr/selectableItemBackground"

效果如下图所示：

2，无边界的Ripple

  android:background="?android:attr/selectableItemBackgroundBorderless"

很明显，无边家的效果好一些。

3，自定义Ripple

在Drawable 文件夹下创建tab_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue">
</ripple>

看看视觉效果：

ripple 颜色改成蓝色，效果又好看一些。

布局源码：

1，相关style：

 <!-- Tab layout style -->
    <style name="TabItem_Layout">
        <item name = "android:layout_height">wrap_content</item>
        <item name = "android:layout_width">0dp</item>
        <item name = "android:layout_weight">1</item>
        <item name = "android:orientation">vertical</item>
        <item name= "android:background">@drawable/tab_ripple</item>
        <item name="android:gravity">center</item>
    </style>
    <!--  Tab textView style -->
    <style name="TabItem_tv">
        <item name = "android:layout_height">wrap_content</item>
        <item name = "android:layout_width">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:textSize">12sp</item>
        <item name="android:paddingBottom">2dp</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:textColor">@color/selector_blue</item>
    </style>
    <!--  Tab imageView style -->
    <style name="TabItem_image">
        <item name = "android:layout_height">25dp</item>
        <item name = "android:layout_width">25dp</item>
    </style>

style 相关抽取能让xml 更简洁。

2，布局：

底部bottom 布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    tools:context="com.dhl.mdstudy.BottomRippleActivity">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="#FFDEDEDE"
        android:orientation="horizontal"
       android:padding="3dp" >
    <LinearLayout
        style="@style/TabItem_Layout"
        android:id="@+id/tab_menu_01"
        >
        <ImageView
            style="@style/TabItem_image"
            android:background="@drawable/tab_selector_msg"
            />
    <TextView
        style="@style/TabItem_tv"
        android:text="消息"
       />
    </LinearLayout>

    <LinearLayout
        style="@style/TabItem_Layout"
        android:id="@+id/tab_menu_02"
        >
        <ImageView
            style="@style/TabItem_image"
            android:background="@drawable/tab_selector_contact"
            />
        <TextView
            style="@style/TabItem_tv"
            android:text="通讯录"
          />
    </LinearLayout>

    <LinearLayout
        style="@style/TabItem_Layout"
        android:id="@+id/tab_menu_03"
        >
        <ImageView
            style="@style/TabItem_image"
            android:background="@drawable/tab_selector_find"
            />
        <TextView
            style="@style/TabItem_tv"
            android:text="发现"
             />

    </LinearLayout>
        <LinearLayout
          style="@style/TabItem_Layout"
            android:id="@+id/tab_menu_04"
            >
            <ImageView
                style="@style/TabItem_image"
                android:background="@drawable/tab_selector_setting"
                />
            <TextView
                style="@style/TabItem_tv"
                android:text="设置"
                />
        </LinearLayout>
    </RadioGroup>
</LinearLayout>

相关Activity 布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dhl.mdstudy.BottomRippleActivity">
    <include
        android:id="@+id/bottom_lay"
        layout="@layout/bottom_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_above="@+id/bottom_lay"
        android:background="@color/gray" />
</RelativeLayout>

几个selector:

tab_selector_msg:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/msg_on"/>
    <item android:state_focused="true" android:drawable="@drawable/msg_on"/>
    <item android:state_pressed="true" android:drawable="@drawable/msg_on"/>
    <item android:drawable="@drawable/msg"></item>
</selector>

tab_selector_contact:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/contact_on"/>
    <item android:state_focused="true" android:drawable="@drawable/contact_on"/>
    <item android:state_pressed="true" android:drawable="@drawable/contact_on"/>
    <item android:drawable="@drawable/contact"></item>
</selector>

tab_selector_find:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/find_on"/>
    <item android:state_focused="true" android:drawable="@drawable/find_on"/>
    <item android:state_pressed="true" android:drawable="@drawable/find_on"/>
    <item android:drawable="@drawable/find"></item>
</selector>

tab_selector_setting:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/setting_on"/>
    <item android:state_focused="true" android:drawable="@drawable/setting_on"/>
    <item android:state_pressed="true" android:drawable="@drawable/setting_on"/>
    <item android:drawable="@drawable/setting"></item>
</selector>

selector_blue:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="@color/blue"></item>
    <item android:state_checked="true" android:color="@color/blue"></item>
    <item android:color="@color/gray"></item>

</selector>

图片么自己找。。。。

主界面代码：

package com.dhl.mdstudy;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class BottomRippleActivity extends AppCompatActivity {

    private LinearLayout tab_menu_01,tab_menu_02,tab_menu_03,tab_menu_04 ;
    private View currentBtn ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_ripple);
        bindViews();
    }
     private void  bindViews()
    {
        tab_menu_01 = (LinearLayout) findViewById(R.id.tab_menu_01);
        tab_menu_02 = (LinearLayout)findViewById(R.id.tab_menu_02) ;
        tab_menu_03 = (LinearLayout)findViewById(R.id.tab_menu_03);
        tab_menu_04 = (LinearLayout)findViewById(R.id.tab_menu_04);
        tab_menu_01.setSelected(true);
        currentBtn = tab_menu_01;
        tab_menu_01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tab_menu_01.setSelected(true);
                setCurrentBtn(tab_menu_01);
                //currentBtn = tab_menu_01;
            }
        });
        tab_menu_02.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tab_menu_02.setSelected(true);
                setCurrentBtn(tab_menu_02);
            }
        });
        tab_menu_03.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tab_menu_03.setSelected(true);
                setCurrentBtn(tab_menu_03);
            }
        });
        tab_menu_04.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tab_menu_04.setSelected(true);
                setCurrentBtn(tab_menu_04);
            }
        });
    }

    private void setCurrentBtn(View view)
    {

        if(currentBtn !=null)
        {
            if(currentBtn == view)
            {
                return ;
            }
            currentBtn.setSelected(false);
        }

        currentBtn = view;
    }
}