Seekbar hoặc thanh tiến trình với nhiều màu sắc

Question

Tôi muốn tạo ra một thanh như thế này ban đầu khi tiến bộ là không nó sẽ là một phai màu nhưng và như tiến bộ đi trên nó sẽ trở nên tươi sáng trên phần đó (Điều này là tốt nhất tôi có thể giải thích) điều chính là tôi muốn thanh để hiển thị tất cả các màu sắc cùng một lúc.

Answer 1

Clip của bạn "trên" drawable:
hơn bạn "off" drawable:

bằng cách sử dụng 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> 

Từ một Activity, sử dụng

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

hoặc trong xml, sử dụng

android:progressDrawable="@drawable/custom_progress_drawable" 

Và đây là kết quả khi sử dụng android:max="10" trong xml:

Đó là một chút đi, nhưng bạn có thể sử dụng setMax() với một cái gì đó giống như 10000 và làm một số tính toán bù trừ khi gọi setProgress() để làm nó sạch hơn.

Answer 2

Như đã đề xuất, tôi nghĩ bạn nên đi tìm một danh sách lớp và đặt nhiều bản vẽ sau đó. Vấn đề chính về điều này là tôi cần phải được resizeable. Một giải pháp kích thước cố định sẽ khá dễ thực hiện.

Answer 3

Cuối cùng! Tôi đã đi trên một nhiệm vụ để tìm ra điều này cho bạn, vì vậy nếu điều này đủ, cảm thấy tự do để cho tôi rằng tiền thưởng, haha.

---

Hãy thử sử dụng này trong cách bố trí của bạn:

<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> 

mà tham chiếu drawable này (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> 

và hình ảnh này (colorprogress.png)

Những gì nó làm là đặt hình ảnh làm nền của linearlayout, có chứa thanh tiến trình. Thanh tiến trình thêm một mặt nạ đen nửa trong suốt vào hình ảnh để làm cho nó xuất hiện khi đèn tắt.

LƯU Ý: Để có được ảnh hưởng này, tôi đã phải khỉ với thanh tiến trình (tức là lật nó và đặt nó chỉ trong 10 khoảng thời gian. Bạn sẽ phải thực hiện một số phép tính để có được tiến trình phù hợp với Ví dụ: setprogress ((100-trueprogress)/10) Xin lỗi tôi đã không làm phần này cho bạn

Đây là những gì nó sẽ giống như tiến trình 50% (x nhỏ và hình tam giác sẽ biến mất trên thiết bị)

Tôi hy vọng điều này sẽ trả lời câu hỏi của bạn!

Answer 4

Bạn thực sự không thể đặt thanh tiến trình thành các màu khác nhau. Tuy nhiên, bạn chỉ có thể sử dụng on drawable và nhận được hiệu ứng mà bạn muốn. Bạn chỉ có thể áp dụng một lớp mặt nạ. Những gì tôi có nghĩa là thêm một bố trí tương đối mà ban đầu nói dark grey trong suốt tức là gradient chỉ có ONE màu sắc là màu xám đen tối. Bây giờ, sử dụng code để đặt màu gradient ở bên trái theo lập trình. Rõ ràng màu ở bên trái sẽ trong suốt. Tìm hiểu thêm về Linear Gradients. Đó là về nó. Bạn chỉ cần tính toán vị trí từ nơi bắt đầu gradient bên phải, thay vào đó vị trí của gradient trái (transparent) kết thúc.

Phương pháp này hơi thiếu sót và có thể không hoạt động trên TẤT CẢ thiết bị.

Phương pháp hoàn hảo sẽ là tạo nhiều ảnh .9png và đặt hộp thoại tiến trình có thể vẽ được theo chương trình mọi lúc.