Android更改系统组件样式

Posted 2022-12-09 YQS_Love

一、问题描述
我们使用android API中的某些组件时，发现它并不是我们想要的样式，比如RatingBar组件显示太大，更改大小之后还是达不到我们想要的结果；ProgressBar也是如此，太瘦了，我想要它变得胖一点（如图1），并且要保留原有功能，只是显示的效果变更一下，并不想自定义组件或者样式，那样工作量太大。

                                    图1 自定义样式的ProgressBar

二、问题分析
其实要想完成图1的效果，很简单的。ProgressBar在不添加任何样式时，是圆形的进度条，如果要变成水平的，需要添加如下样式：

style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Horizontal"

通过一行简短的代码，进度条就变成了图2的效果了。

                                图2 Android原生ProgressBar

但是你会感到很遗憾，这个样式只有API14以上才支持，而且不管你把高度设置为多少dp，这哥们儿就是长不高，就长长。那么下面，我将带你如何去改造这哥们儿。

三、解决方法
既然这个哥们是通过一个样式来变身的，那我们就去这个样式里一探究竟。按住ctrl键，在这个样式上单击鼠标左键，进入这个样式里。然后是不是很惊呆，好多样式啊，你会看到你刚才引用的样式：

    <style name="Widget.DeviceDefault.Light.ProgressBar.Horizontal" parent="Widget.Material.Light.ProgressBar.Horizontal"/>

原来它有个干爹啊！隐藏好深，我们在到它干爹那里去拜访一下，然后你懵逼了，这还有个干爹（如下），是的，没错，关系很复杂吧！

    <style name="Widget.Material.Light.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>

不管它，咋们继续拖关系，死活都要找到幕后元凶。哎呀！总见到庐山真面目了。

<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
        <item name="progressDrawable">@drawable/progress_horizontal_material</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
        <item name="minHeight">16dip</item>
        <item name="maxHeight">16dip</item>
</style>

至此，我们看到了改变ProgressBar的代码，现在我们把他拷贝出来（只拷贝Item项），然后自己定义一个样式，把最小高度和最大高度改成我们想要的。更改后如下（记得在属性前加上“android：”）：

<style name="MyProgressBarStyle">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">30dip</item>
        <item name="android:maxHeight">45dip</item>
</style>

运行结果如图3，呀，这个根本没有改变嘛，而且还变成了老式的，这是什么鬼（小编就是个坑货）。

                                图3 更改过后的ProgressBar样式

接下来就是关键的时刻了，虽然我更改了最低高度，其实是没有效果的，那么原因在哪里呢，原因就在

<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>

这个属性里，我们需要去更改它的内容来达到我们想要的结果。
现在进入到你的SDK目录下,将(sdk\\platforms\\android-20\\data\\res\\drawable.progress_horizontal.xml)这个路径下的文件拷贝出来,然后放到你的drawable资源目录里，然后打开它，在里面进行修改成你想要的样式。我更改的如下：

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- 进度条背景我要变成渐变白 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="0dip" />
            <gradient
                    android:startColor="#d6d6d6"
                    android:centerColor="#fff"
                    android:centerY="0.75"
                    android:endColor="#d6d6d6"
                    android:angle="270"
            />
        </shape>
    </item>
    <!-- 此处我不变 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <!-- 这进度条颜色我还是用蓝的，你可以改为图片、颜色..-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="0dip" />
                <gradient
                        android:startColor="#46b3f2"
                        android:centerColor="#6ec2f3"
                        android:centerY="0.75"
                        android:endColor="#46b3f2"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

最后将

 <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>

这项改为如下即可。

 <item name="android:progressDrawable">@drawable/progress_horizontal</item>

运行结果如图4。

                                    图4 更改ProgressBar样式效果图

三、注意事项

（1）如果出现编译错误，可以查看一下最低sdk版本，将它调到正确为止，某些样式在低版本系统上是不支持的；
（2）以下Item不能省略，省略之后后果不堪设想，想知道后果，自己去尝试吧；

 <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>

（3）你同样可以通过这类方法，去实现你想要的RatingBar组件。
（4）项目源码。
a、布局；

<RelativeLayout 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:gravity="center"
    tools:context="$relativePackage.$activityClass" >

    <ProgressBar
        style="@style/MyProgressBarStyle"
        android:progress="50"
        android:max="100"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_width="200dp"
        android:layout_height="50dp" />

</RelativeLayout>

b、样式；

 <style name="MyProgressBarStyle">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">50dip</item>
    </style>

c、progress_horizontal.xml同上诉讲解中完全相同，不在鳌诉；
d、其余不在鳌诉。

由于小编技术和能力有限，文中难免会出现错误，还望指正，谢谢合作。