整体流程
- 明确外部要求:
- 确定UI设计基于什么样的分辨率。比如640*1136(这是iPhone5的分辨率)。
- 确定目标适配的机型。现在通用机型为720p和1080p。
一般而言,720p指720*1280,1080p指1080*1920。
制作px映射表。(方法参考:Android界面开发精要1:尺寸)
根据UI视觉标准,配置基本的颜色、大小和通用样式。(方法参考:Android 视觉样式设计规范)
根据原型、页面分解图、项目排期,明确开发的页面的先后顺序。
常规而言,登录注册、个人中心 等模块会最先开发,消息、通知 等模块会最后开发。
按照UI视觉设计稿,逐步绘制每个页面。
layout的命名规则
所有基于Fragment和DialogFragment的核心页面都必须采用
fragment_模块名
的形式命名针对List item页面采用
item_模块名
的形式命名针对Dialog页面采用
dialog_模块名
的形式命名针对PopupWindow页面采用
popup_模块名
的形式命名
绘制原则
- 用
dp
代替px
,用dimen定义
代替裸dp
,即采用px映射表。 - 尽可能用线性布局、帧布局,避免相对布局,这样在这个过程中就不需要定义控件的id这个属性值。
万一真的需要用到id值,用
pos_
作为前缀,表示作为定位使用。
- 每个Button按钮最好有各种状态的变化,至少有两种。(所有按钮应该要有一个background的点击响应)
- 所有文本保存在strings.xml里面:
- 对于不定长的内容,如地址、用户输入的文本等,必须采用超长文本做压力测试。
- 对于用户协议等不变的文本直接引用相关文本即可。
- 每个控件尽可能用style引用相关样式。样式的名称为
功能_控件名称_级别
,采用驼峰形式,控件名称和级别可忽略
<!-- 容器类控件 -->
<style name="PandaTheme.Contain" parent="PandaTheme">
<item name="android:background">@drawable/btn_bg</item>
</style>
<!-- 输入类控件 -->
<style name="PandaTheme.Input" parent="PandaTheme">
</style>
<!-- 点击类控件 -->
<style name="PandaTheme.Button" parent="PandaTheme">
</style>
<!-- 展示类控件 -->
<style name="PandaTheme.Show" parent="PandaTheme">
</style>
- 字体颜色的变化要用xml绘制。
- ImageView加上scaleType="centerCrop"
- 所有的字符chuan定义都要引用strings.xml的内容,而不是直接定义。
- 输入型控件不要设置text,而是设置hint。
- 在Androidmanifest.xml中用label属性标志页面的名称。
参考代码
- 绘制各种状态下的Drawable
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/main_nav0_normal" android:state_selected="false"/>
<item android:drawable="@drawable/main_nav0_selected" android:state_selected="true"/>
</selector>
- 绘制GridView
<GridView
android:id="@+id/net_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:horizontalSpacing="@dimen/width_720_1280_2"
android:numColumns="2"
android:verticalSpacing="@dimen/height_720_1280_2"
tools:listitem="@layout/item_nearby" />