约束布局

1、约束布局是通过给视图添加约束来确定视图位置和大小的。 如果一个视图没有添加任何约束,无论编辑时它出现在什么位置,运行后它都将位于界面的左上角(从坐标零点开始绘制) 。
2、可以给一个视图上下左右四个方向的添加约束, 对约束布局的操作基本都可以通过鼠标拖动来完成。
3、视图之间也可以添加约束以便确定相对之间的位置。

链式群组约束

1、因为实现计算器我主要用的是链式群组约束,这里主要介绍一下添加链式群组约束,链式群组约束就是将多个控件视图按照纵向或者横向组成一个链式群组
2、如何添加链式群组约束
首先选择多个视图,然后右击鼠标,在弹出菜单选择添加横向还是纵向链式约束
3、切换链式群组模式
群组模式有四种

  • Spread: 默认模式,链中控件之间均匀分割空间。
  • Spread inside: 链的两端首先满足设置的约束,然后中间的空间由各个控件均分。
  • Weighted:类似于线性布局中 layout_weight 属性, 可以让控件之间按照某种比例分割空 间 , 约 束 布 局 中 相 应 的 属 性 为 layout_constraintHorizontal_weight 或layout_constraintVertical_weight 属性

点击添加约束的空间后 下方就会出现新按钮Cycle Chain mode,点击此按钮可以在不同群组模式下切换

【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI

自动添加约束

1、点击Autoconnect开关图标,给当前操作的控件自动添加约束
【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI
2、点击Constraints图标给当前界面所有元素自动添加所有约束
【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI

效果

【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI

实现方式

我是用约束布局的链式群组约束实现的计算器的功能键,每一行添加链式约束,每一列也添加链式约束,并且列的链式约束为spread inside模式,设置第一个控件距顶端的位置为200,这样才能空出来计算结果的位置
计算结果只用设置其与顶部的距离和第一排的控件的距离就好
【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI

相关文章:

  • 2022-12-23
  • 2021-07-03
  • 2021-04-22
  • 2021-06-10
  • 2021-05-23
  • 2022-12-23
  • 2021-10-17
  • 2021-10-12
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-08
  • 2021-07-29
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案