移动端APP设计学习笔记整理：2、写布局与切图常见注意点

声明：本教程不收取任何费用，欢迎转载请注明出处，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

系列博文

移动端APP设计学习笔记整理：1、设计规范-IOS&Android系统

 

1、切底图最好上下左右像素格保持一样

切底图最好上下左右像素格一样长，这样方便代码居中、代码适配

例如，我们要实现登录注册按钮，设计图如下图：

切的底图，在蓝湖上是这样的，上下的像素格不一致

那么我们的 xml 代码实现，如下：

<Button
    android:background="@mipmap/bg_login_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="注册"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

<Button
    android:background="@mipmap/bg_login_btn"
    android:textColor="#FFFFFF"
    android:textSize="16sp"
    android:text="登录"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

实现的效果，如下图

由于切图上下的像素格，不是一样长的，所以文字不会居中！

 

实现方式1：让 UI 切底图，上下的像素格一样长、左右的像素格一样长

<Button
    android:gravity="center"
    android:background="@mipmap/bg_login_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="注册"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

<Button
    android:gravity="center"
    android:background="@mipmap/bg_login_btn"
    android:textColor="#FFFFFF"
    android:textSize="16sp"
    android:text="登录"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

 

方式2：根据蓝湖上面的标注，进行实现

<Button
    android:paddingTop="18dp"
    android:paddingBottom="31dp"
    android:background="@mipmap/bg_login_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="注册"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

<Button
    android:paddingTop="18dp"
    android:paddingBottom="31dp"
    android:background="@mipmap/bg_login_btn"
    android:textColor="#FFFFFF"
    android:textSize="16sp"
    android:text="登录"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>