解锁 Android 视图布局流程的神秘面纱：循序渐进的指南

Android

2023-12-18 11:51:18

Android 视图布局：揭开神秘面纱

测量阶段：确定尺寸

Android 视图布局之旅从测量阶段开始，它负责确定每个视图的尺寸。想象一下你正试图为房间里的家具分配空间。测量阶段就相当于测量每件家具的长度、宽度和高度，以确定它们在房间中的摆放位置。

在测量阶段，视图会收到一个称为 MeasureSpec 的对象，它包含了有关父视图可用空间的约束信息。视图会根据这些约束计算自己的理想尺寸，并将其存储在 MeasureSpec 对象中。

布局阶段：定位视图

在测量阶段完成后，布局阶段就开始了。在此阶段，视图会根据其测量的尺寸和父视图的约束进行定位。布局过程就像把家具摆放在房间里，让一切都井井有条且符合逻辑。

该过程通过 layout() 方法递归进行，从根视图开始，一直向下遍历视图树。根视图是视图层次结构的顶级视图，而视图树就像一棵倒立的树，每个视图都是它的一个分支。

代码示例：亲自体验布局流程

为了让你亲身体验 Android 视图布局流程，我们准备了一个代码示例：

// 自定义视图
public class CustomView extends View {

    // ... 省略构造函数等代码 ...

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 测量视图的尺寸
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        // 布局视图
        // ... 省略布局代码 ...
    }
}

// 自定义布局器
public class CustomLayout extends LinearLayout {

    // ... 省略构造函数等代码 ...

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 测量子视图
        for (int i = 0; i < getChildCount(); i++) {
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }

        // 确定布局的尺寸
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        // 布局子视图
        for (int i = 0; i < getChildCount(); i++) {
            getChildAt(i).layout(left, top, right, bottom);
        }
    }
}

// 主活动
public class MainActivity extends AppCompatActivity {

    // ... 省略构造函数等代码 ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 使用自定义视图和布局器
        CustomView customView = findViewById(R.id.customView);
        CustomLayout customLayout = findViewById(R.id.customLayout);
    }
}