Android-自定义控件的学习

1. 需求 :

  1. 做一个圆形的红色按钮
  2. 中间有一个白色的数字
  3. 数字起始为20
  4. 每点击一次减少1

2. View是如何工作的?

  • 构造器---->初始化

  • onMesure() 定大小

  • onLayout() 定位置

  • onDraw() 绘制

  • invalidate() 刷新

  • 5.1 添加一个Button组件并设置点击事件

    image.png

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        private Button mButton;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initViews();
        }
    
        private void initViews() {
            mButton = findViewById(R.id.customBtn);
            mButton.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.customBtn :
                    startActivity(new Intent(MainActivity.this, CustomButtonActivity.class));
                    break;
            }
        }
    }
    
  • 5.2 新建一个CustomButtonActivity类和 activity_custombtn.xml文件

    public class CustomButtonActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_custombtn);
        }
    }
    
  • 5.3 新建一个CustomRedButton类用来设置自定义控件

    /**
     * 需求:
     * 1、做一个圆形的红色按钮
     * 2、中间有一个白色的数字
     * 3、数字起始为 20
     * 4、每点击一次减少1
     */
    public class CustomRedButton extends View implements View.OnClickListener {
    
        private Paint mPaint;
        private Rect mRect;
        private int mNumber = 20;
    
        public CustomRedButton(Context context) {
            this(context, null);
        }
    
        public CustomRedButton(Context context, @Nullable AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public CustomRedButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        /**
         * init the view
         * 将 new对象单独拿出来,避免内存的开销
         */
        private void init() {
            mPaint = new Paint(); // 创建画笔
            mRect = new Rect(); // 创建矩形
    
            this.setOnClickListener(this);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            // 设置画布为红色
            mPaint.setColor(Color.RED);
            mPaint.setAntiAlias(true);// 消除锯齿
            // 绘圆 :drawCircle(x坐标, y坐标, r半径, mPaint画笔)
            canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2, mPaint);
    
            // 中间的白色数字
            mPaint.setColor(Color.WHITE);
            mPaint.setTextSize(60);
            String text = String.valueOf(mNumber);
            /*
            * getTextBounds(文字, 起始值0, 文字的长度, mRect: 是这个数字四周的边距)
            * */
            mPaint.getTextBounds(text, 0, text.length(), mRect);
    
            int textWidth = mRect.width();
            int textHeight = mRect.height();
    
            canvas.drawText(text, getWidth()/2 - textWidth/2, getHeight()/2 + textHeight/2, mPaint);
        }
    
        @Override
        public void onClick(View v) {
            //每点击一次减少1
            if (mNumber > 0) {
                mNumber--;
            } else {
                mNumber = 20;
            }
            invalidate(); // 刷新
        }
    }
    
  • 5.4 在 activity_custombtn.xml文件中引用CustomRedButton类

    image.png

  • 5.5 效果预览

    android-customBtn.gif

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页