美文网首页Android UI自定义viewAndroid开发
Android 自定义 View ------ 基本步骤

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

作者: didikee | 来源:发表于2016-08-12 16:30 被阅读315次

    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(*≧▽≦)ツ

    相关文章

      网友评论

      本文标题:Android 自定义 View ------ 基本步骤

      本文链接:https://www.haomeiwen.com/subject/dxkesttx.html