Android UI自定义viewAndroid开发

Android 自定义 View ------ 基本步骤

2016-08-12  本文已影响315人  didikee

Android 自定义 View ------ 基本步骤

一般都是去Github上淘一个,但是居然没找到,囧,一想,应该是太简单了吧所以没人做,而且功能简单.

于是就自己写一个......

懒,是病,得治!

这是需求样式:(右上角的那个=.=)


http://oahzrw11n.bkt.clouddn.com//pic/20160812/progressshow812.png

第一步:自定义属性

创建文件 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);
        //获取颜色,会指定默认值
        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)

这个看最后完整的代码吧,重复的代码就不贴了.

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;//默认值

    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;

        // 创建画笔
        Paint p = new Paint();

        //画圆角矩形
        //画下层
        p.setStyle(Paint.Style.FILL);//充满
        p.setColor(mColorDown);
        p.setAntiAlias(true);// 设置画笔的锯齿效果,true表示抗锯齿,false不需要处理
        RectF ovalDown = new RectF(0, 0, width, height);// 设置个新的长方形
        canvas.drawRoundRect(ovalDown, radius, radius, p);

        //画上层
        p.setColor(mColorUp);
        int widthUp=width*mProgress/100;
        RectF ovalUp = new RectF(0, 0, widthUp, height);// 设置个新的长方形
        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);
    }

    /**
     * 设置百分比 98% 输入98 即可
     * @param progress
     */
    public void setProgress(int progress){
        mProgress=progress;
    }
}

最后惯例放效果图

http://oahzrw11n.bkt.clouddn.com//pic/20160812/showprogressview.png

希望对你们有的帮助,o(*≧▽≦)ツ

上一篇下一篇

猜你喜欢

热点阅读