Android-自定义控件的学习

1. 需求 :

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

2. View是如何工作的?

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

• onMesure() 定大小

• onLayout() 定位置

• onDraw() 绘制

• invalidate() 刷新

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

  

  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类

  

• 5.5 效果预览