先上效果图
图一 正常效果 图二点击效果
直接上代码:
tv_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:width="56dp" android:height="56dp">
<shape android:shape="oval">
<gradient android:endColor="@color/tv_style_color_seconde" android:gradientRadius="28dp" android:startColor="@color/tv_style_color_main" android:type="radial" />
</shape>
</item>
<item android:width="56dp" android:height="56dp" android:left="40dp">
<shape android:shape="oval">
<gradient android:endColor="@color/tv_style_color_seconde" android:gradientRadius="28dp" android:startColor="@color/tv_style_color_main" android:type="radial" />
</shape>
</item>
<item android:width="40dp" android:height="28dp" android:left="28dp">
<shape android:shape="rectangle">
<gradient android:angle="90" android:endColor="#FAF3FF" android:startColor="@color/tv_style_color_main" android:type="linear" />
</shape>
</item>
<item android:width="40dp" android:height="28dp" android:left="28dp" android:top="28dp">
<shape android:shape="rectangle">
<gradient android:angle="270" android:endColor="@color/tv_style_color_seconde" android:startColor="@color/tv_style_color_main" android:type="linear" />
</shape>
</item>
<item android:width="88dp" android:height="44dp" android:left="4dp" android:top="2dp">
<shape android:shape="rectangle">
<corners android:radius="24dp" />
<solid android:color="#8A73F5" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="false">
<layer-list>
<item android:width="56dp" android:height="56dp">
<shape android:shape="oval">
<gradient android:endColor="@color/tv_style_color_seconde" android:gradientRadius="28dp" android:startColor="@color/tv_style_color_main" android:type="radial" />
</shape>
</item>
<item android:width="56dp" android:height="56dp" android:left="40dp">
<shape android:shape="oval">
<gradient android:endColor="@color/tv_style_color_seconde" android:gradientRadius="28dp" android:startColor="@color/tv_style_color_main" android:type="radial" />
</shape>
</item>
<item android:width="40dp" android:height="28dp" android:left="28dp">
<shape android:shape="rectangle">
<gradient android:angle="90" android:endColor="#FAF3FF" android:startColor="@color/tv_style_color_main" android:type="linear" />
</shape>
</item>
<item android:width="40dp" android:height="28dp" android:left="28dp" android:top="28dp">
<shape android:shape="rectangle">
<gradient android:angle="270" android:endColor="@color/tv_style_color_seconde" android:startColor="@color/tv_style_color_main" android:type="linear" />
</shape>
</item>
<item android:width="88dp" android:height="44dp" android:left="4dp" android:top="2dp">
<shape android:shape="rectangle">
<corners android:radius="24dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
</item>
</selector>
tv_text_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/colorPress"/>
<item android:state_pressed="false" android:color="@color/colorNormal"/>
</selector>
color文件添加:
<color name="colorPress">#ffffff</color>
<color name="colorNormal">#8A73F5</color>
<color name="tv_style_color_main">#7A63E5</color>
<color name="tv_style_color_seconde">#FFFFFF</color>
TextView布局:
<TextView
android:id="@+id/tv_walk"
android:layout_width="96dp"
android:layout_height="56dp"
android:background="@drawable/tv_bg_selector"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="4dp"
android:text="步行"
android:textColor="@color/tv_text_selector"
android:textSize="28dp" />
PS:一定要设置TextView的点击事件,否则点击前景色和字体颜色不会变化