设计进度条的样式

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>