如何将Zeplin单页面转换为可导入Android Studio使用的Android布局文件

• 首先提取Zeplin页面的核心资源：打开目标设计页，逐组件核对类型、宽高、内外边距、字体大小/颜色/字重、背景样式、圆角数值等属性，所有单位优先选用dp/sp；用到的切图按mdpi到xxxhdpi全分辨率导出，存入Android项目对应res/drawable-*目录；页面用到的自定义颜色、通用样式分别整理到项目res/values/colors.xml和res/values/styles.xml中，避免硬编码。
• 组件一一映射：Zeplin文本元素对应Android TextView，按钮元素对应Button或MaterialButton，图片元素对应ImageView，容器组件对应对应布局类，所有属性严格匹配Zeplin标注数值。
• 布局生成组装：根据页面结构选择合适的根布局（推荐用约束布局减少嵌套），按Zeplin的层级和位置规则排列所有组件，生成的xml文件直接放入Android项目res/layout目录即可编译使用。

示例代码（对应包含2个TextView和1个Button的Zeplin页面） #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/page_background">

    <!-- Zeplin页首标题文本 -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/page_title"
        android:textColor="@color/title_black"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"/>

    <!-- Zeplin副标题说明文本 -->
    <TextView
        android:id="@+id/tv_subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/page_subtitle"
        android:textColor="@color/text_gray"
        android:textSize="14sp"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        app:layout_constraintStart_toStartOf="@id/tv_title"
        android:layout_marginTop="12dp"/>

    <!-- Zeplin底部确认按钮 -->
    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@drawable/bg_confirm_btn"
        android:text="@string/btn_confirm"
        android:textColor="@color/white"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginHorizontal="24dp"
        android:layout_marginBottom="48dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

注意：如果使用线性布局、帧布局等其他根布局，仅需要调整组件的布局定位属性即可，组件本身的样式属性无需修改，复制到Android Studio后可直接编译运行。

内容的提问来源于stack exchange，提问作者Vikas Singhai