ConstraintLayout 核心用法

文章目录

  • ConstraintLayout 核心用法
    • 1. constraint
    • 2. pack
    • 3. align(各种对齐方式,可对多个控件使用)
    • 4. Guidelines(辅助线)

ConstraintLayout 核心用法

AndroidStudio新建的工程默认布局就是ConstrainsLayout,之所以这样是因为Google推荐我们这么做。ConstrainsLayout是RelativeLayout改良后的一个版本,尤其适合在GUI中设计App界面。

1. constraint

一个控件(View)所在的位置由它的4个方向上的约束所确定,至少得有水平和垂直方向各1个约束

  • 如果没有给加一个view加约束,它运行时的位置将在(0,0)处,并且该控件会有提示
    ConstraintLayout 核心用法_第1张图片
    Design界面,TextView在中间
    ConstraintLayout 核心用法_第2张图片
    但是运行时,它实际位置在屏幕左上角。

  • 每拖入一个控件,都要连4个约束,太麻烦,怎么办?用魔法棒
    ConstraintLayout 核心用法_第3张图片
    魔法棒智能的添加约束,尽可能的保持原有的位置

  • 删除约束
    ConstraintLayout 核心用法_第4张图片ConstraintLayout 核心用法_第5张图片

2. pack

ConstraintLayout 核心用法_第6张图片
pack Vertically:可将多个控件/view 紧凑的在垂直方向上聚拢到一起
pack Horizontally:水平方向上同理
expand Horizontally:将1个或多个控件在水平方向扩展直至占满父布局
expand Vertically:垂直方向上同理

3. align(各种对齐方式,可对多个控件使用)

  • align
    ConstraintLayout 核心用法_第7张图片
  • 还有一种对齐
    ConstraintLayout 核心用法_第8张图片
  • 两控件文字基线对齐(有这种对齐方式,但是我的studio 3.2.1按钮右键没有showbaseline,3.4有)

4. Guidelines(辅助线)

ConstraintLayout 核心用法_第9张图片

重点为guideline何barrier,能使我们的界面设计得更加精准

  1. Guildline(重点)
  • 只是设计阶段能看到,运行时看不到
  • 加了之后,控件会多了可以连接的地方,可以添加多个
  • 移动辅助线时,所有跟他关联的控件都会同时移动
    ConstraintLayout 核心用法_第10张图片
  • 辅助线有个重要的好处是点击Cycle Guideline(鼠标放到guildline上)修改它的模式
    • 水平guideline:
      • 距离上边的绝对距离
      • 距离下边的绝对距离
      • 距离上边的百分比(非常有用,实现屏幕适配)
    • 垂直guideline:同理
  1. Barrier
  • 给多个控件添加一条边界,
  1. Group
    • 可以把多个控件添加到一个group,然后操作group,比如设置group为invisiable,则在group内多个控件都将不可见

最后,实现如下图的一个demo,在不同分辨率的屏幕下整体效果都基本一样。
ConstraintLayout 核心用法_第11张图片

你可能感兴趣的:(Android,UI)