Android 自定義 View ------ 基本步驟
一般都是去
Github上淘一個(gè),但是居然沒找到,囧,一想,應(yīng)該是太簡(jiǎn)單了吧所以沒人做,而且功能簡(jiǎn)單.于是就自己寫一個(gè)......
懶,是病,得治!
這是需求樣式:(右上角的那個(gè)=.=)
http://oahzrw11n.bkt.clouddn.com//pic/20160812/progressshow812.png
第一步:自定義屬性
創(chuàng)建文件
values/attrs.xml
添加需要自定義的屬性:
<declare-styleable name="ProgressShowView">
<attr name="color_up" format="color"></attr>
<attr name="color_down" format="color"></attr>
</declare-styleable>
第二步 開始自定義 View
1.繼承View
public class ProgressShowView extends View
2.獲得自定義的屬性
/**
* 獲取自定義屬性的值
* @param context
* @param attrs
*/
private void getAttrs(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ProgressShowView);
//獲取顏色,會(huì)指定默認(rèn)值
mColorUp = ta.getColor(R.styleable.ProgressShowView_color_up, Color.GRAY);
mColorDown = ta.getColor(R.styleable.ProgressShowView_color_down, Color.RED);
ta.recycle();
}
3.重寫 onDraw(Canvas canvas)
這個(gè)看最后完整的代碼吧,重復(fù)的代碼就不貼了.
4.在布局里的使用:
<didikee.com.progressshow.ProgressShowView
android:id="@+id/ps"
android:layout_centerInParent="true"
android:layout_width="160dp"
android:layout_height="12dp"
app:color_down="#eeeeee"
app:color_up="#ff6600"
/>
完整代碼
/**
* Created by didik on 2016/8/12.
*/
public class ProgressShowView extends View {
private int mColorUp;//上層的顏色
private int mColorDown;//下層的顏色
private int mProgress=50;//默認(rèn)值
public ProgressShowView(Context context) {
super(context);
}
public ProgressShowView(Context context, AttributeSet attrs) {
super(context, attrs);
getAttrs(context,attrs);
}
public ProgressShowView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getAttrs(context,attrs);
}
/**
* 獲取自定義屬性的值
* @param context
* @param attrs
*/
private void getAttrs(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ProgressShowView);
mColorUp = ta.getColor(R.styleable.ProgressShowView_color_up, Color.GRAY);
mColorDown = ta.getColor(R.styleable.ProgressShowView_color_down, Color.RED);
ta.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = this.getWidth();
int height = this.getHeight();
Log.e("test","width :"+width);
Log.e("test","height :"+height);
//單位是dp而非px
//角度
int radius=height/2;
// 創(chuàng)建畫筆
Paint p = new Paint();
//畫圓角矩形
//畫下層
p.setStyle(Paint.Style.FILL);//充滿
p.setColor(mColorDown);
p.setAntiAlias(true);// 設(shè)置畫筆的鋸齒效果,true表示抗鋸齒,false不需要處理
RectF ovalDown = new RectF(0, 0, width, height);// 設(shè)置個(gè)新的長(zhǎng)方形
canvas.drawRoundRect(ovalDown, radius, radius, p);
//畫上層
p.setColor(mColorUp);
int widthUp=width*mProgress/100;
RectF ovalUp = new RectF(0, 0, widthUp, height);// 設(shè)置個(gè)新的長(zhǎng)方形
canvas.drawRoundRect(ovalUp, radius, radius, p);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.e("test","widthMeasureSpec :"+widthMeasureSpec+" || "+"heightMeasureSpec :"+heightMeasureSpec);
}
/**
* 設(shè)置百分比 98% 輸入98 即可
* @param progress
*/
public void setProgress(int progress){
mProgress=progress;
}
}
最后慣例放效果圖
http://oahzrw11n.bkt.clouddn.com//pic/20160812/showprogressview.png
希望對(duì)你們有的幫助,o(*≧▽≦)ツ
