构建第一个界面!

把“Hello World”的TextView删掉,就得到了一个空白的界面。

构建的方法:在空白的界面上,design surface选择blueprint,从左侧找合适的界面组件,叫微件(View),拖动进入空白界面进行界面的设计。

  1. 首先,观察并设置合适的默认页边距。

  2. 接着,我们先添加一个文本框(Plain Text),在设计编辑器中点击它,观察到每个角上的大小调整手柄(正方形)、每条边上的约束锚点(圆形),点击拖动约束锚点至界面上边沿,就可以确定文本框跟上边沿的相对位置,即距离就是之前设置好的页边距那么远。

  3. 如果屏幕太小,可以通过工具栏中的按钮放大缩小编辑器,就能更好的控制操作啦。

  4. 可以在右侧的Attitudes里找到text的默认值:Name,要删掉,并且我们采用hint这个属性。后面添加的按钮,采用text这个属性。界面字符串是统一管理的,在project-app-res-values-string.xml里。

  5. 然后,再添加一个按钮(Button),约束锚点不仅可以作用于界面边沿,也可以作用于上面添加的文本框得右边。这一步还要将按钮跟文本框水平对齐,即视图的水平对齐:一定要使用基线对齐,进行视觉对齐、第三方对齐、边沿对齐是错误的,因为存在不能忽略微件的图像内边距。

  6. 组件已经就位!字符串也显示妥当!位置也对上了!现在提高用户体验:让文本框能屈能伸。只需要做好两点,按钮的自适应和,前者需要让文本框跟按钮之间形成水平方向的“”,形成双向约束;后者需要设置文本框宽度属性为Match Constraints,表示宽度将延长以符合水平约束条件和外边距的定义。

到此为止,就算是构建好了。

评论
热度 ( 1 )

© gametric | Powered by LOFTER