2013-05-07 161 views
12

enter image description here多种颜色

我想创建这样一个栏开始时进度为零它会在颜色褪色,但和进步的推移它会成为一部分明亮搜索栏或进度条(这最好我可以解释一下)主要的是我想要酒吧同时显示所有颜色。

+0

因为你应该创建9个补丁映像。 – TheFlash 2013-05-07 07:38:34

+0

在我看来,最好创建一个自定义ProgressBar并根据它的进度设置不同的图像/颜色。 – hardartcore 2013-05-07 09:04:41

+0

看看这可以帮助http://miroprocessordev.blogspot.in/2012/09/android-how-to-change-progress-bar.html – Android 2013-05-07 09:22:44

回答

16

夹你的 “上” 绘制:enter image description here
在你的 “关” 绘制:由enter image description here

使用res/drawable/custom_progress_drawable.xml

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

    <!-- Background --> 
    <item 
     android:id="@android:id/background" 
     android:drawable="@drawable/custom_progress_bar_off"/> 

    <!-- Secondary progress - this is optional --> 
    <item android:id="@android:id/secondaryProgress"> 
     <clip android:drawable="@drawable/custom_progress_bar_secondary" /> 
    </item> 

    <!-- Progress --> 
    <item android:id="@android:id/progress"> 
     <clip android:drawable="@drawable/custom_progress_bar_on" /> 
    </item> 

</layer-list> 

Activity,使用

Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme()); 
myProgressBar.setProgressDrawable(progressDrawable); 

或xml,请使用

android:progressDrawable="@drawable/custom_progress_drawable" 

而这里的结果以XML使用android:max="10"时:

enter image description here

这是一个有点过,但调用setProgress()时,让你可以使用setMax()的东西更像是10000,并做一些抵消计算它更干净。

+0

感谢您的好和简单的解决方案... – 2013-05-17 10:34:04

+1

只是为了添加一些信息http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList 根据这个,你应该把最大的10.000 注意:默认级别为0,已完全剪切,因此图像不可见。级别为10,000时,图像不会被剪切并完全可见。 – desgraci 2014-05-13 16:44:36

+0

如何将此ProgressBar设置为垂直条而不是水平条? – 2016-03-25 21:35:51

0

就像已经建议,我认为你应该去一个层次列表,然后设置多个drawables。 这个问题的主要问题是我需要调整大小。一个固定大小的解决方案将很容易实现。

6

终于!我去了一个任务,为你解决这个问题,所以如果这足够了,随时给我这个赏金,哈哈。


尝试在你的布局使用此:

<View android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".20"/> 

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="0dip" 
       android:orientation="horizontal" 
       android:gravity="center" 
       android:layout_weight="0.62"> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
       <ProgressBar style="?android:attr/progressBarStyleHorizontal" 
        android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight="0.94" 
        android:progressDrawable="@drawable/progressmask" 
        android:progress="0" 
        android:max="10" 
        android:rotation="180"/> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
      </LinearLayout> 
    <View 
     android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".18"/> 
</LinearLayout> 

它引用该绘制(progressmask.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="50dip" /> 
     <gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" /> 
     <stroke android:width="1dp" android:color="#00000000" /> 
    </shape> 
</item> 
<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <corners android:radius="50dip" /> 
      <gradient android:startColor="#aa000000" android:endColor="#aa000000" 
       android:angle="270" /> 
      <stroke android:width="1dp" android:color="#00000000" /> 
     </shape> 
    </clip> 
</item> 
</layer-list> 

该图像(colorprogress.png)

enter image description here

它所做的是将图像设置为包含进度条的线性布局的背景。进度条为图像添加一个半透明的黑色遮罩,使其看起来灯光熄灭。

注意:为了获得这种效果,我必须用进度条猴子(即翻转它,并设置它只有10个间隔。你将不得不做一些数学,以获得进展与排队图像。即setprogress((100-trueprogress)/ 10)。对不起,我没有为你做这部分。

这是什么看起来像进展50%(小x和三角形将消失在设备上)

enter image description here

我希望这回答您的问题!

+0

谢谢你的解决方案,但上面的答案很简单..再次感谢.. – 2013-05-17 10:35:08

+1

啊,真的。我不得不承认,@UberPrinny的答案比我的好得多。 – dberm22 2013-05-17 11:17:31

0

实际上不能将进度条设置为不同的颜色。但是,您只能使用on可绘制并获得所需的效果。你可以应用一个图层蒙版。我的意思是添加一个相对布局,最初说dark grey,即渐变只有一种颜色是深灰色。现在,使用code以编程方式在左侧设置渐变颜色。显然,左边的颜色将是透明的。了解更多关于Linear Gradients。就是这样。您只需计算右侧渐变开始的位置,而不是左侧渐变(transparent)结束的位置。

此方法存在一些缺陷,可能无法在所有设备上使用。

完美的方法是创建多个.9png图像,并且每次都以编程方式设置进度对话框的绘图。