羊皮书APP（Android版）开发系列（二十七）一分钟轻松修改CheckBox、RadioButton、RatingBar、SeekBar样式
羊皮书APP（Android版）开发系列（二十七）一分钟轻松修改CheckBox、RadioButton、RatingBar、SeekBar样式
热心的程序员
发布于 2018-08-30 10:31:28
发布于 2018-08-30 10:31:28
我们在开发过程中经常会用到CheckBox、RadioButton、RatingBar、SeekBar 这几个控件，而系统默认的样式却不能满足我们的要求，通常我们会直接采用github的开源库来完成，但是，这么一个简单的小功能引入其他的开源库实在不划算，因此还是自己定义样式比较好。
先看下效果图：
效果图
要是实现上图效果，首先我们在colors.xml中定义四种颜色：
<color name="firstColor">#00BCD4</color>
<color name="secondColor">#E91E63</color>
<color name="thirdColor">#FF5722</color>
<color name="fourthColor">#4CAF50</color>然后在styles.xml中定义四种样式：
<style name="FirstControl" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@color/firstColor</item>
<item name="colorControlActivated">@color/firstColor</item>
</style>
<style name="SecondControl" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@color/secondColor</item>
<item name="colorControlActivated">@color/secondColor</item>
</style>
<style name="ThirdControl" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@color/thirdColor</item>
<item name="colorControlActivated">@color/thirdColor</item>
</style>
<style name="GreenControl" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">@color/fourthColor</item>
<item name="colorControlActivated">@color/fourthColor</item>
</style>最后在布局文件中使用这四种样式即可：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/FirstControl" />
<RadioButton
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/SecondControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/ThirdControl" />
<RadioButton
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/GreenControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/FirstControl" />
<CheckBox
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/SecondControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/ThirdControl" />
<CheckBox
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:theme="@style/GreenControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3"
android:rating="1"
android:theme="@style/FirstControl" />
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3"
android:rating="1"
android:theme="@style/SecondControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3"
android:rating="2"
android:theme="@style/ThirdControl" />
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="3"
android:rating="3"
android:theme="@style/GreenControl" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<SeekBar
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:theme="@style/FirstControl" />
<SeekBar
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:theme="@style/SecondControl" />
<SeekBar
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:theme="@style/ThirdControl" />
<SeekBar
android:layout_weight="1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:theme="@style/GreenControl" />
</LinearLayout>
</LinearLayout>总结：通过一个简单的样式定义，即可完成对android原生控件样式的修改，省时省力省资源。赶紧试试吧！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.08.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读