Android constraintlayout 约束布局画计算器详细步骤

constraintlayout: 约束布局 → 不用写代码,设计就行

新建项目默认就是 约束布局

备注:开发工具 Android Studio 开发工具安装请点这里http://t.csdn.cn/LuoVs

一 constraintlayout 使用

step1 点 design

step2 工具总览

step3 辅助线使用

添加一根水平的辅助线

 

二 来画一个计算器吧

画计算器不一定适合用这种布局,用画计算器这个案例来熟悉 constraintlayout 这个布局的使用

把最上边的导航条去掉 , 改成 NoActionBar

step1 添加辅助线

 辅助线大概画好了

step2 画输入框 

把TextView 转化成 输入框 EditText

 

 箭头拉到下面的辅助线,箭头变成z字弹簧型 (表示以下面这根辅助线bottom 对齐)

把上下左右都拉到 如下红框 辅助线上(上下左右的箭头都变成弹簧型,表示水平和垂直都居中)

 右边属性 ,把这4个都点击成弹簧形 (表示该组件大小变成刚刚上下左右辅助线构成的图形那么大)

 输入框画好了

step3 画计算器按钮

Ctrl+ 鼠标滚轮,可以放大手机屏幕

画一个按钮,复制一个出来,把两个按钮放在中间这根辅助线的 两边

 从一个按钮上面拉一根线 到另一个按钮的上面 (让他两水平对齐)

 

 看一下效果

 让这4个按钮和上面那根辅助线对齐

 看下效果

 

 

 

 

 就这样吧,累了,最后得出结论,计算器 果然不适合用这种布局,不过,对constraintlayout约束布局是不是更熟悉了呢.

 最后看一下真实计算器参照图片