声明:本教程不收取任何费用,欢迎转载请注明出处,尊重作者劳动成果,不得用于商业用途,侵权必究!!!
系列博文
移动端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"/>