样式化进度条 Android

Question

我在设置进度条样式时遇到问题。

基本上，我想像这样设置背景样式：

进度如下：

但是，我能得到的壁橱是这样的：（即只有一个黑色边框，周围没有白线）

这意味着当设置进度时，它最终看起来像这样：

真是一团糟！

我正在使用图层列表来尝试实现此效果，但是当我尝试将我的项目分层以取得进展时它不起作用，我花了几个小时尝试各种事情但我没有接近解决方案，我确定它与剪辑功能有关，但这是必需的，否则进度不会改变。

我当前的 XML 在下面，请注意，这将显示绿色进度条，因为它在上面只有黑色边框而不是白色轮廓，当我添加另一个带有白色轮廓的项目时，我丢失整个进度条！：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color and border etc (RED background with 2dp black border and overlaid 1dp white border ) -->
    <item android:id="@android:id/background">
    <shape>
         <solid android:color="#FF0000" />
        <stroke android:width="2dp" android:color="#000000" />
    </shape>

   </item>
       <!-- add our white outline over the top-->
    <item android:id="@android:id/background">
    <shape>
        <stroke android:width="1dp" android:color="#FFFFFF" />
    </shape>

   </item>


       <!-- for the actual progress bar add our colour and border-->
  <item android:id="@android:id/progress"> 
    <clip android:gravity="left">
        <shape>  
            <solid android:color="#00FF00" />
            <stroke android:width="2dp" android:color="#000000" />       
        </shape>    
    </clip>
    </item>    

</layer-list> 

现在，如果我将以下内容添加到上述 xml 的底部，我会丢失整个进度条，并且不会得到预期的白色轮廓。

  <item android:id="@android:id/progress"> 
    <clip android:gravity="left">
        <shape>  
            <stroke android:width="1dp" android:color="#FFFFFF" />       
        </shape>    
    </clip>
    </item>  

有人对我如何实现这一点有任何想法吗？

Answer 1

万一有人最终在这里寻找答案，我无法在 XML 中执行此操作，不得不求助于使用 9 补丁图像来使其工作。一旦你熟悉了 9 补丁图像格式，它就会很好地工作。

我使用了优秀的网络工具：

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

生成我的。

然后像这样编辑 xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
    <nine-patch android:src="@drawable/progressbackground" />
   </item>


    <item android:id="@android:id/progress">
        <clip xmlns:android="http://schemas.android.com/apk/res/android"
            android:clipOrientation="horizontal"
            android:gravity="left">
            <nine-patch android:src="@drawable/progress" />
        </clip>
    </item>


</layer-list> 

而且成功了……

Answer 2

用xml可以做到：

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item >
    <shape android:shape="rectangle">

        <padding android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"/>

        <solid android:color="@android:color/white"/>

    </shape>
</item>
<item >
    <shape android:shape="rectangle">

        <padding android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"/>

        <solid android:color="@android:color/black"/>

    </shape>
</item>
<item >
    <shape android:shape="rectangle">


        <solid android:color="#d4413a"/>

    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <solid android:color="@color/green"/>
        </shape>
    </clip>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="@color/green"/>
        </shape>
    </clip>
</item>

</layer-list>