[英]Clear a zone outside a specific circle with canvas
我有一個自定義視圖,該視圖通過填充圓圈來顯示進度,但是現在我正在尋找一種方法來消除此白色圓圈之外的視圖區域:
在這里,我的代碼:
public class CircleGauge extends View {
private int value = 75;
private Paint backgroundPaint, gaugePaint, textPaint, circlePaint;
... constructors
private void init() {
DisplayMetrics metrics = getResources().getDisplayMetrics();
backgroundPaint = new Paint();
backgroundPaint.setColor(ResourcesCompat.getColor(getResources(), R.color.favorite_position_gauge_background, null));
backgroundPaint.setStyle(Paint.Style.FILL);
backgroundPaint.setAntiAlias(true);
gaugePaint = new Paint();
gaugePaint.setColor(ResourcesCompat.getColor(getResources(), R.color.favorite_position_gauge, null));
gaugePaint.setAntiAlias(true);
circlePaint = new Paint();
circlePaint.setColor(Color.WHITE);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, metrics));
circlePaint.setAntiAlias(true);
textPaint = new Paint();
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setColor(Color.WHITE);
textPaint.setFakeBoldText(true);
textPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 23, metrics));
textPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), backgroundPaint);
canvas.drawRect(0, ((float) (100 - value) / 100F) * canvas.getHeight(), canvas.getWidth(), canvas.getHeight(), gaugePaint);
canvas.drawText(getContext().getString(R.string.percent_value, value), getWidth() / 2, getHeight() * .6F, textPaint);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, (getHeight() / 2) - circlePaint.getStrokeWidth() / 2, circlePaint);
}
public void setValue(int value) {
this.value = value;
invalidate();
}
}
我很確定我可以用PorterDuff做到這一點,但我不知道怎么做。
Android可繪制資源已經為您提供了實現此功能所需的一切,而無需借助子類View
和重寫onDraw
。
首先讓我們從可繪制資源開始。 我們希望有一個具有一種顏色的圓,覆蓋另一種顏色的圓。 為此,我們使用LayerDrawable
,它在XML中用<layer-list>
。
每個Drawable
都有一個級別值。 您可以通過在Drawable
上調用setLevel
來調整級別(0-10000)。 我們要使用該級別控制較淺圓圈的外觀。 為此,我們將使用ClipDrawable
,它在XML中用<clip>
定義。
對於圓本身,我們可以使用ShapeDrawable
s( <shape>
)。 當我們將它們放在一起時,看起來是這樣的:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/field" android:gravity="fill">
<shape android:shape="oval">
<stroke android:width="2dp" android:color="@android:color/white"/>
<solid android:color="#FF78606D"/>
</shape>
</item>
<item android:id="@+id/progress" android:gravity="fill">
<clip android:gravity="bottom" android:clipOrientation="vertical">
<shape android:shape="oval" >
<stroke android:width="2dp" android:color="@android:color/white"/>
<solid android:color="#FFAB9BA6"/>
</shape>
</clip>
</item>
</layer-list>
現在我們可以使用TextView並將其繪制為背景。
<TextView
android:id="@+id/text"
android:layout_height="64dp"
android:layout_width="64dp"
android:layout_gravity="center"
android:background="@drawable/circle_progress"
android:gravity="center"
android:textAppearance="?android:textAppearanceLarge"
android:text="0%"/>
根據您的顏色,我使用了Theme.AppCompat
,這是一個黑暗的主題。
這是一個快速而骯臟的演示,展示了它們如何協同工作:
public class MainActivity extends AppCompatActivity {
private TextView mTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextView = (TextView) findViewById(R.id.text);
setLevel(0);
new AsyncTask<Void, Integer, Void>() {
@Override
protected Void doInBackground(Void... params) {
try {
for (int i = 0; i <= 100; i++) {
publishProgress(i);
Thread.sleep(100);
}
} catch (InterruptedException e) {
// just leave
}
return null;
};
@Override
protected void onProgressUpdate(Integer... values) {
setLevel(values[0]);
}
}.execute();
}
private void setLevel(int level) {
mTextView.setText(Integer.toString(level) + "%");
LayerDrawable layerDrawable = (LayerDrawable) mTextView.getBackground();
Drawable progress = layerDrawable.findDrawableByLayerId(R.id.progress);
progress.setLevel(level * 100); // drawable levels go 0-10000
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.