像今日头条和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;
}
}