Android怎样自定义View

# Android怎样自定义View

## 前言

在Android开发中，系统提供的标准控件往往不能满足复杂UI需求，这时就需要通过自定义View来实现。自定义View是Android开发者必须掌握的核心技能之一，本文将全面讲解自定义View的实现原理、绘制流程、常用方法以及实际案例。

## 一、自定义View基础概念

### 1.1 什么是自定义View

自定义View是指继承自View或ViewGroup的子类，通过重写相关方法实现特定显示效果和交互逻辑的UI组件。与系统控件相比，自定义View具有以下优势：

- 实现独特的视觉效果
- 处理复杂的用户交互
- 优化绘制性能
- 创建可复用的UI组件

### 1.2 自定义View的分类

根据实现方式不同，自定义View主要分为两类：

1. **组合控件**：将多个系统控件组合成新的复合控件
2. **完全自定义**：继承View/ViewGroup，完全自主实现绘制和交互

## 二、自定义View的实现步骤

### 2.1 继承View类

```java
public class CustomView extends View {
    public CustomView(Context context) {
        super(context);
        init();
    }
    
    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        // 初始化操作
    }
}

2.2 重写关键方法

三、自定义View的核心实现

3.1 测量阶段（onMeasure）

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    
    // 根据测量模式处理宽高
    if (widthMode == MeasureSpec.AT_MOST) {
        // wrap_content情况下的默认宽度
        widthSize = 200;
    }
    
    if (heightMode == MeasureSpec.AT_MOST) {
        // wrap_content情况下的默认高度
        heightSize = 200;
    }
    
    setMeasuredDimension(widthSize, heightSize);
}

3.2 绘制阶段（onDraw）

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    // 获取View的宽高
    int width = getWidth();
    int height = getHeight();
    
    // 创建画笔
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL);
    paint.setAntiAlias(true);
    
    // 绘制圆形
    canvas.drawCircle(width/2, height/2, Math.min(width, height)/2, paint);
    
    // 绘制文字
    paint.setColor(Color.WHITE);
    paint.setTextSize(40);
    String text = "自定义View";
    float textWidth = paint.measureText(text);
    Paint.FontMetrics fm = paint.getFontMetrics();
    float textHeight = fm.bottom - fm.top;
    canvas.drawText(text, (width-textWidth)/2, (height+textHeight)/2, paint);
}

3.3 属性自定义（attrs.xml）

1. 在res/values/attrs.xml中定义属性：

<resources>
    <declare-styleable name="CustomView">
        <attr name="circleColor" format="color"/>
        <attr name="textSize" format="dimension"/>
    </declare-styleable>
</resources>

1. 在布局中使用自定义属性：

<com.example.customview.CustomView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:circleColor="#FF5722"
    app:textSize="24sp"/>

1. 在View中获取属性值：

public CustomView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
    mCircleColor = ta.getColor(R.styleable.CustomView_circleColor, Color.RED);
    mTextSize = ta.getDimension(R.styleable.CustomView_textSize, 40);
    ta.recycle();
}

四、自定义ViewGroup实现

4.1 重写onMeasure和onLayout

public class CustomLayout extends ViewGroup {
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 测量所有子View
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        
        // 设置自己的宽高
        setMeasuredDimension(
            resolveSize(500, widthMeasureSpec),
            resolveSize(500, heightMeasureSpec));
    }
    
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 布局子View
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            // 简单地将子View按对角线排列
            child.layout(
                i * 100, 
                i * 100,
                i * 100 + child.getMeasuredWidth(),
                i * 100 + child.getMeasuredHeight());
        }
    }
}

五、自定义View的优化技巧

5.1 减少过度绘制

1. 使用canvas.clipRect()限制绘制区域
2. 避免在onDraw中创建对象
3. 使用View.setWillNotDraw(true)跳过不需要绘制的View

5.2 使用硬件加速

<application android:hardwareAccelerated="true">
    <!-- 或者在View级别启用 -->
    <view class="com.example.CustomView"
        android:layerType="hardware"/>
</application>

5.3 使用invalidate()和postInvalidate()

• invalidate(): UI线程中重绘
• postInvalidate(): 非UI线程中重绘

六、实战案例：圆形进度条

6.1 完整实现代码

public class CircleProgressView extends View {
    private Paint mCirclePaint;
    private Paint mProgressPaint;
    private Paint mTextPaint;
    private int mProgress = 0;
    
    public CircleProgressView(Context context) {
        this(context, null);
    }
    
    public CircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        // 背景圆画笔
        mCirclePaint = new Paint();
        mCirclePaint.setColor(Color.LTGRAY);
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(10);
        mCirclePaint.setAntiAlias(true);
        
        // 进度条画笔
        mProgressPaint = new Paint();
        mProgressPaint.setColor(Color.BLUE);
        mProgressPaint.setStyle(Paint.Style.STROKE);
        mProgressPaint.setStrokeWidth(10);
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setStrokeCap(Paint.Cap.ROUND);
        
        // 文字画笔
        mTextPaint = new Paint();
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextSize(50);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setAntiAlias(true);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        int center = getWidth() / 2;
        int radius = center - 20;
        
        // 绘制背景圆
        canvas.drawCircle(center, center, radius, mCirclePaint);
        
        // 绘制进度弧
        RectF rectF = new RectF(center-radius, center-radius, 
                              center+radius, center+radius);
        canvas.drawArc(rectF, -90, 360 * mProgress / 100, false, mProgressPaint);
        
        // 绘制进度文字
        canvas.drawText(mProgress + "%", center, center, mTextPaint);
    }
    
    public void setProgress(int progress) {
        mProgress = progress;
        invalidate(); // 触发重绘
    }
}

6.2 使用示例

<com.example.CircleProgressView
    android:id="@+id/progressView"
    android:layout_width="200dp"
    android:layout_height="200dp"/>

CircleProgressView progressView = findViewById(R.id.progressView);
progressView.setProgress(75); // 设置进度为75%

七、常见问题与解决方案

7.1 自定义View显示不全

原因：未正确处理wrap_content情况
解决：在onMeasure()中为AT_MOST模式设置默认尺寸

7.2 自定义View性能差

原因：onDraw中执行耗时操作
解决： - 避免在onDraw中创建对象 - 使用canvas.clipRect()限制绘制区域 - 考虑使用硬件加速

7.3 触摸事件不灵敏

原因：未正确处理触摸事件
解决： - 重写onTouchEvent()返回true表示消费事件 - 使用GestureDetector处理复杂手势

结语

自定义View是Android开发中的高级技能，需要掌握View的绘制流程、事件分发机制以及性能优化方法。通过本文的学习，你应该已经了解了自定义View的基本实现方法和注意事项。建议从简单的自定义View开始练习，逐步掌握更复杂的实现方式。

记住优秀的自定义View应该具备： - 正确的测量和布局 - 高效的绘制逻辑 - 灵活的可配置性 - 良好的性能表现

不断实践和优化，你一定能开发出出色的自定义组件！ “`