【Android】Compose绘制系统 VS 传统View绘制系统

解析Compose绘制系统和传统View绘制系统的核心区别。这两套系统代表了Android UI开发两个时代的根本差异。

一、设计哲学的根本区别

传统View系统：命令式 + 面向对象

// 传统View：你需要"命令"每个View做什么
TextView textView = findViewById(R.id.text_view);
textView.setText("New Text");      // 命令：设置文本
textView.setTextColor(Color.RED);  // 命令：设置颜色
textView.setVisibility(View.VISIBLE); // 命令：显示/隐藏

Compose系统：声明式 + 函数式

// Compose：你声明UI在特定状态下应该是什么样子
@Composable
fun MyText(isVisible: Boolean, text: String) {
    if (isVisible) {
        Text(
            text = text,
            color = Color.Red
        )
    }
}
// 当状态变化时，整个函数重新执行，UI自动更新

二、架构层面的核心差异

传统View系统：基于继承的树形结构

ViewGroup (容器)
    ├── View (叶子节点)
    ├── ViewGroup
    │    ├── View
    │    └── View
    └── View

特点：

• 深度继承链：Object → View → TextView → Button
• 状态分散在各个View对象中
• 强依赖Android Framework

Compose系统：基于组合的函数调用

Composition
    ├── Composable A
    │    ├── Composable A1
    │    └── Composable A2
    ├── Composable B
    └── Composable C

特点：

• 扁平化结构，无深度继承
• 状态集中管理
• 与平台解耦，可跨平台使用

三、绘制流程的详细对比

传统View绘制流程（三部曲）

1. Measure（测量）阶段

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // 1. 测量所有子View
    for (View child : getChildren()) {
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
    }
    
    // 2. 根据子View尺寸计算自身尺寸
    int width = calculateWidth();
    int height = calculateHeight();
    
    // 3. 保存测量结果
    setMeasuredDimension(width, height);
}

2. Layout（布局）阶段

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    // 遍历所有子View，确定它们的位置
    for (int i = 0; i < getChildCount(); i++) {
        View child = getChildAt(i);
        int childLeft = calculateChildLeft(i);
        int childTop = calculateChildTop(i);
        child.layout(childLeft, childTop, 
                    childLeft + child.getMeasuredWidth(),
                    childTop + child.getMeasuredHeight());
    }
}

3. Draw（绘制）阶段

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 自定义绘制逻辑
    canvas.drawColor(Color.WHITE);
    canvas.drawRect(rect, paint);
    // 等等...
}

传统流程特点：

• 三个阶段严格分离
• 可能发生多次测量（如MATCH_PARENT + weight）
• 需要手动调用invalidate()触发重绘

Compose绘制流程（三阶段）

1. Composition（组合）阶段

@Composable
fun MyScreen() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")           // 当count变化时，这个Text会重组
        Button(onClick = { count++ }) { // 这个Button不会重组
            Text("Increment")           // 只有Text内容变化时才重组
        }
    }
}

2. Layout（布局）阶段

Compose的布局分为测量和放置：

@Composable
fun MyCustomLayout() {
    Layout(
        content = {
            Text("Hello")
            Text("World") 
        }
    ) { measurables, constraints ->
        // 测量所有子项
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        
        // 计算总体布局尺寸
        val width = constraints.maxWidth
        val height = placeables.sumOf { it.height }
        
        // 放置子项
        layout(width, height) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

3. Drawing（绘制）阶段

@Composable
fun CustomCircle() {
    Canvas(modifier = Modifier.size(100.dp)) {
        drawCircle(
            color = Color.Red,
            radius = size.minDimension / 2
        )
    }
}

Compose流程特点：

• 智能重组：只更新需要变化的部分
• 单次测量原则（默认情况下）
• 自动的状态驱动更新

四、性能特性的深度对比

1. 测量性能

传统View系统的问题：

// 可能触发多次测量
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">
    
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />  <!-- 第一次测量：weight=0，第二次：实际weight -->
        
    <TextView
        android:layout_width="0dp" 
        android:layout_height="wrap_content"
        android:layout_weight="2" />
</LinearLayout>

Compose的优化：

// 默认单次测量，但支持内在特性测量
Row(modifier = Modifier.height(IntrinsicSize.Min)) {
    Text(
        text = "Very long text that might wrap",
        modifier = Modifier.weight(1f)
    )
    Divider(
        color = Color.Black,
        modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
    )
    Text(
        text = "Short", 
        modifier = Modifier.weight(1f)
    )
}

2. 内存使用对比

传统View：

• 每个View都是重量级对象（~1KB内存）
• 深度View树占用大量内存
• 频繁创建/销毁导致GC压力

Compose：

• 轻量级的可组合函数调用
• 智能重用和跳过
• 更少的内存分配

3. 更新机制对比

传统View的无效化机制：

public class CustomView extends View {
    private String mText;
    
    public void setText(String text) {
        mText = text;
        invalidate();  // 手动标记为脏区域
        requestLayout(); // 如果需要重新测量
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        // 每次都会完整重绘
        canvas.drawText(mText, x, y, paint);
    }
}

Compose的重组机制：

@Composable
fun CustomText(text: String) {
    // Compose编译器标记了text的读取位置
    // 当text变化时，只有这个Text会重组
    Text(text = text)
    
    // 这个Button不会重组，因为它没有读取text
    Button(onClick = { }) {
        Text("Click me")
    }
}

五、开发体验对比

1. 状态管理

传统View的状态问题：

public class CounterView extends LinearLayout {
    private TextView countText;
    private int count = 0;
    
    // 状态可能不同步！
    public void setCount(int newCount) {
        count = newCount;
        // 可能忘记调用updateView()
    }
    
    private void updateView() {
        countText.setText(String.valueOf(count));
    }
}

Compose的状态驱动：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    // UI自动反映状态，不可能不同步
    Text("Count: $count")
    Button(onClick = { count++ }) {
        Text("Increment")
    }
}

2. 自定义View的复杂度

传统自定义View：

public class CustomView extends View {
    private Paint paint;
    private Path path;
    private RectF bounds;
    
    public CustomView(Context context) {
        super(context);
        init();
    }
    
    private void init() {
        paint = new Paint();
        path = new Path();
        bounds = new RectF();
        // 大量初始化代码...
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 复杂的测量逻辑
    }
    
    @Override 
    protected void onDraw(Canvas canvas) {
        // 复杂的绘制逻辑
    }
}

Compose自定义绘制：

@Composable
fun CustomDraw() {
    Canvas(modifier = Modifier.size(100.dp)) {
        // 直接的绘制代码，无需管理生命周期
        drawCircle(color = Color.Red, radius = 30.dp.toPx())
        drawRect(color = Color.Blue, topLeft = Offset(10f, 10f), size = Size(50f, 50f))
    }
}

六、实际性能案例分析

列表渲染性能

传统RecyclerView：

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
    // 需要管理ViewHolder池、item动画等
    // 复杂的DiffUtil计算
}

Compose LazyColumn：

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(
            items = messages,
            key = { it.id }  // 智能重组关键
        ) { message ->
            MessageRow(message)
        }
    }
}

动画性能

传统属性动画：

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0f, 100f);
animator.setDuration(1000);
animator.start();  // 依赖UI线程，可能卡顿

Compose动画：

val offset by animateFloatAsState(
    targetValue = if (enabled) 100f else 0f,
    animationSpec = tween(durationMillis = 1000)
)
Box(modifier = Modifier.offset(x = offset.dp))
// 在渲染线程执行，更流畅

七、混合使用场景

在Compose中使用传统View

@Composable
fun MapView() {
    AndroidView(
        factory = { context ->
            MapView(context)  // 传统MapView
        },
        update = { mapView ->
            // 更新传统View
            mapView.setCenter(latitude, longitude)
        }
    )
}

在传统布局中使用Compose

<!-- 在XML布局中 -->
<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"/>

// 在Activity/Fragment中
findViewById<ComposeView>(R.id.compose_view).setContent {
    MyComposableScreen()
}

八、总结：核心区别表格

特性	传统View系统	Compose系统
设计范式	命令式	声明式
架构基础	继承 + 面向对象	组合 + 函数式
状态管理	分散在各个View中	集中管理，响应式
更新机制	手动invalidate()	自动智能重组
性能特点	可能多次测量，GC压力大	单次测量，内存友好
自定义复杂度	高，需要重写多个方法	低，直接绘制
学习曲线	平缓但繁琐	陡峭但高效
未来方向	维护模式	官方主力推荐

建议

1. 新项目：直接使用Compose，享受现代化的开发体验
2. 现有项目：逐步迁移，在性能敏感或复杂动画场景优先使用Compose
3. 混合架构：利用互操作性平稳过渡
4. 性能优化：Compose需要理解重组机制，传统View需要优化布局层次

Compose代表了Android UI开发的未来方向，它的声明式范式、优秀的性能和开发体验使其成为现代Android开发的首选。理解这两套系统的根本区别，有助于我们在合适的场景选择合适的技术方案。