Cách tạo hoặc thay đổi một cách có thể vẽ được bằng các đường kẻ có các màu khác nhau

Question

Tôi phải vẽ đường 3dp để thể hiện mức hoàn thành trong trò chơi quizz.

Dòng này phải có 2 màu. Ví dụ: nếu người dùng đã hoàn thành 40% cấp độ, dòng sẽ có màu đỏ cho 40% đầu tiên của dòng, 60% còn lại là màu xám.

Tôi đã cố gắng làm điều đó với một drawable:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape android:shape="line" > 
      <size android:height="3dp" android:width="40dp"/> 
      <stroke 
       android:width="1dp" 
       android:color="#FFFC10" /> 
     </shape> 
    </item> 
    <item android:left="40dp"> 
     <shape android:shape="line" > 
      <size android:height="3dp" android:width="60dp" /> 
      <stroke 
       android:width="1dp" 
       android:color="#DDDDDD" /> 
     </shape> 
    </item> 
</layer-list> 

Và sau đó tôi hiển thị nó với một ImageView:

<ImageView 
       android:id="@+id/row_completion_bar" 
       android:src="@drawable/completion_bar" 
       android:layout_width="100dp" 
       android:layout_height="3dp" /> 

... nhưng bây giờ, tôi phải đương nhiên có thể thay đổi tỷ lệ 40%/60% này tùy thuộc vào hoàn thành người dùng actuel.

Câu hỏi đầu tiên: cách tốt nhất hiệu quả nhất để làm điều đó là gì? Thay đổi drawable tại thời gian chạy? hoặc tạo một drawable mới khi chạy trong Java?

Câu hỏi thứ hai: cách thực hiện? Tôi đã cố gắng cả hai cách (tái drawable này trong mã java/thay đổi drawable xml trong thời gian chạy) và không thành công :-(

Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

vì vậy đây là một tùy chỉnh drawable bạn có thể sử dụng:

class LineDrawable extends Drawable { 
    private Paint mPaint; 

    public LineDrawable() { 
     mPaint = new Paint(); 
     mPaint.setStrokeWidth(3); 
    } 

    @Override 
    public void draw(Canvas canvas) { 
     int lvl = getLevel(); 
     Rect b = getBounds(); 
     float x = b.width() * lvl/10000.0f; 
     float y = (b.height() - mPaint.getStrokeWidth())/2; 
     mPaint.setColor(0xffff0000); 
     canvas.drawLine(0, y, x, y, mPaint); 
     mPaint.setColor(0xff00ff00); 
     canvas.drawLine(x, y, b.width(), y, mPaint); 
    } 

    @Override 
    protected boolean onLevelChange(int level) { 
     invalidateSelf(); 
     return true; 
    } 

    @Override 
    public void setAlpha(int alpha) { 
    } 

    @Override 
    public void setColorFilter(ColorFilter cf) { 
    } 

    @Override 
    public int getOpacity() { 
     return PixelFormat.TRANSLUCENT; 
    } 
} 

và mã kiểm tra:.

View v = new View(this); 
final LineDrawable d = new LineDrawable(); 
d.setLevel(4000); 
v.setBackgroundDrawable(d); 
setContentView(v); 
OnTouchListener l = new OnTouchListener() { 
    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
     int lvl = (int) (10000 * event.getX()/v.getWidth()); 
     d.setLevel(lvl); 
     return true; 
    } 
}; 
v.setOnTouchListener(l); 

Answer 2

tôi tìm thấy một cách để làm điều này không biết nếu đó là cách hiệu quả nhất, nhưng ở đây nó là:

Tôi đã sử dụng RelativeLayout để siêu lớp ImageView với màu nền.

trong Layout.xml:

<RelativeLayout style="@style/CompletionBar"> 

<ImageView 
    android:id="@+id/row_completion_bar_0" 
    style="@style/CompletionBar0" /> 

<ImageView 
    android:id="@+id/row_completion_bar_1" 
    style="@style/CompletionBar1" />  

</RelativeLayout> 

trong styles.xml:

<!-- Completion Bar (Relative Layout) --> 
<style name="CompletionBar"> 
    <item name="android:layout_width">wrap_content</item> 
    <item name="android:layout_height">wrap_content</item> 
</style> 

<!-- Completion Bar 0 (ImageView) --> 
<style name="CompletionBar0"> 
    <item name="android:layout_width">100dp</item> 
    <item name="android:layout_height">2dp</item> 
    <item name="android:background">#CCCCCC</item> 
</style> 

<!-- Completion Bar 1 (ImageView) --> 
<style name="CompletionBar1"> 
    <item name="android:layout_width">40dp</item> 
    <item name="android:layout_height">2dp</item> 
    <item name="android:background">#555555</item> 
</style> 

trong file java:

ImageView cb1 = (ImageView)row.findViewById(R.id.row_completion_bar_1); 
cb1.getLayoutParams().width = 40; /* Value in pixels, must convert to dp */ 

Answer 3

Làm thế nào về việc sử dụng một thanh tiến trình? Kiểu đánh dấu đã hoàn thành và việc cần làm có thể được đặt theo lập trình hoặc thông qua các tệp xml. Mã của bạn cũng sẽ dễ đọc hơn/dễ bảo trì hơn vì bạn sẽ sử dụng đúng widget cho công việc. bố trí của bạn sẽ chứa:

<ProgressBar 
    android:id="@+id/progressBar" 
    android:layout_height="3dip" 
    android:layout_width="match_parent" 
    android:progressDrawable="@drawable/progress_bar" /> 

Bạn có thể cập nhật thanh từ mã của bạn sử dụng ví dụ:

ProgressBar bar = (ProgressBar)findViewById(R.id.progressBar); 
bar.setProgress(40); 

Ví dụ này ghi đè lên phong cách của thanh (theo chỉ dẫn của các thuộc tính progressDrawable), sử dụng một res /drawable/progress_bar.xml tệp - nội dung bên dưới.Điều này có thêm độc đáo như gradient shading và góc tròn; điều chỉnh như bạn thấy phù hợp:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="5dip" /> 
     <gradient 
     android:angle="270" 
     android:centerColor="#ff5a5d5a" 
     android:centerY="0.5" 
     android:endColor="#ff747674" 
     android:startColor="#ff9d9e9d" /> 
    </shape> 
    </item> 
    <item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
     <corners android:radius="5dip" /> 
      <gradient 
      android:angle="0" 
      android:endColor="#ff009900" 
      android:startColor="#ff000099" /> 
     </shape> 
    </clip> 
    </item> 
</layer-list> 

Tín dụng cho http://www.tiemenschut.com/how-to-customize-android-progress-bars/, cung cấp nhiều chi tiết hơn về cách tùy chỉnh thanh tiến trình.

Answer 4

đoạn này sẽ làm việc cho tất cả các api

Sử dụng này:

Drawable drawable = editText.getBackground(); 
drawable.setColorFilter(editTextColor, PorterDuff.Mode.SRC_ATOP); 
if(Build.VERSION.SDK_INT > 16) { 
    editText.setBackground(drawable); 
}else{ 
    editText.setBackgroundDrawable(drawable); 
}