android 底部Tab添加水波纹效果

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

1，有边界的水波纹

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

效果如下图所示：

android 底部Tab添加水波纹效果_第1张图片

2，无边界的Ripple

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

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

3，自定义Ripple

在Drawable 文件夹下创建tab_ripple.xml

<?xml version="1.0" encoding="utf-8"?>

看看视觉效果：

android 底部Tab添加水波纹效果_第2张图片

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

布局源码：

1，相关style：

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

2，布局：

底部bottom 布局：

<?xml version="1.0" encoding="utf-8"?>

相关Activity 布局：

<?xml version="1.0" encoding="utf-8"?>

几个selector:

tab_selector_msg:

tab_selector_contact:

tab_selector_find:

tab_selector_setting:

selector_blue:

<?xml version="1.0" encoding="utf-8"?>

图片么自己找。。。。

主界面代码：

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;    }}

更多相关文章

随机推荐