devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android开发 ConstraintLayout布局的详解_androidx.constraintlayout.widget.barrier

作者：IT小白 | 2024-03-12 20:19:19

赞

踩

androidx.constraintlayout.widget.barrier

前言

我们先了解下约束布局的优势：

　　1.嵌套少，性能提高。因为View位置是互相关联的，所以不需要像线性布局一样需要有很多父类容器辅助View定位。

　　2.更快的编写xml布局，提高工作效率。熟练后可以使用Android studio快速拖拉组件来实现布局，但是前期建议好好了解ConstraintLayout的属性

　　3.View的定位灵活度更大，可以动态的跟随其他View的位置改变而改变。

　　4.可阅读性强，这点可能很多人会质疑:“一堆View平铺有什么阅读性啊”。 但是事实是，嵌套多层的线性布局或者相对布局反而更难以阅读，因为你需要关注父类布局提供的辅助定位信息。

学习定位属性

这里的定位属性指的是 layout_constraintTop_toTopOf  、layout_constraintTop_toBottomOf 、 layout_constraintStart_toEndOf 等等此类属性。

为了方便后续理解，这里说明下此类定位属性的意思。此类定位属性在文本上想表达的是 当前View 在 定位View 什么位置上。

这里举几个例子，例如：

layout_constraintTop_toBottomOf   这个属性的意思是 当前View的上边（Top）在 目标View的下边(Bottom)

layout_constraintTop_toTopOf   这个属性的意思是 当前View的上边(Top) 在 目标View的上边(Top)

这个时候估计有人会疑问，什么是当前View，什么是定位View啊。

当前View是指：你添加了 layout_constraintTop_toBottomOf  这个属性的View

定位View是指：app:layout_constraintTop_toBottomOf="@id/quit"   后面添加的id ，这里@id/quit 就是定位的View。 所以，使用约束布局还有一个特点就是基本上每一个View都要写上id。

layout_constraintTop_toBottomOf   当前View的Top在目标View的Bottom

效果图（注意图片中的箭头）:

 xml

  1.     <Button
  2.         android:id="@+id/btn2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:layout_marginTop="50dp"
  6.         android:text="按键2"
  7.         app:layout_constraintTop_toBottomOf="@id/btn1" />

方便观看这里增加了上边距50dp

layout_constraintBottom_toTopOf当前View的Bottom在目标View的Top

效果图：

 xml

  1.     <Button
  2.         android:id="@+id/btn2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="按键2"
  6.         android:layout_marginBottom="50dp"
  7.         app:layout_constraintBottom_toTopOf="@id/btn1" />

layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf  当前View的Left在目标View的Right

layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf 这2个属性其实都是一个意思，都是当前View的Left在目标View的Right。

为什么google会设计2个功能一样的属性呢？ 因为阿拉伯语，我们正常的阅读习惯是从左到右，而阿拉伯语的习惯是从右到左。所以语言切换后整体View的布局位置也要跟随改变。当时，如果你只开发国内App其实用2个之间的任意一个属性都可以。

效果图

 xml

  1.     <Button
  2.         android:id="@+id/btn2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="按键2"
  6.         app:layout_constraintStart_toEndOf="@id/btn1"
  7.         app:layout_constraintTop_toBottomOf="@+id/btn1" />

在上面我使用了Start_toEndOf 所以效果图上按键2的左边依附在按键的右边上，但是因为Top_toBottomOf的关系，按键2的上边又在按键1的下边上。

layout_constraintRight_toLeftOf 与 layout_constraintEnd_toStartOf  当前View的Right在目标View的Left

与上面的差不多，举一反三也可以理解。

效果图:

 xml

  1.     <Button
  2.         android:id="@+id/btn2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="按键2"
  6.         app:layout_constraintEnd_toStartOf="@id/btn1"
  7.         app:layout_constraintTop_toBottomOf="@+id/btn1" />

layout_constraintTop_toTopOf 当前View的Top在目标View的Top

这里要介绍一个关键字 parent，parent会经常使用。当前View想依附到ConstraintLayout 布局本身的四个边的位置上时，就可以使用parent。 例如希望一个按钮依附到ConstraintLayout 上边 就可以 使用 app:layout_constraintTop_toTopOf="parent"

效果图：

 xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout 
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:background="@color/white"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:layout_marginStart="20dp"
  15.         android:layout_marginTop="20dp"
  16.         android:text="按键1"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:text="按键2"
  25.         app:layout_constraintTop_toTopOf="@+id/btn1"
  26.         app:layout_constraintStart_toEndOf="@+id/btn1"/>
  27.  
  28. </androidx.constraintlayout.widget.ConstraintLayout>

这里按键1依附了父类布局ConstraintLayout 的 左边与上边， 按键2布局也写入 app:layout_constraintTop_toTopOf="@+id/btn1" 依附在按键1的上边。 这里可以看到按键2即使没有写layout_marginTop="20dp" 也依然与按键1的top边对齐。

layout_constraintBottom_toBottomOf  当前View的Bottom在目标View的Bottom

与上面的差不多，举一反三也也可以理解。

效果图：

 xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:background="@color/white"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="80dp"
  14.         android:layout_marginStart="20dp"
  15.         android:layout_marginTop="20dp"
  16.         android:text="按键1"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:text="按键2"
  25.         app:layout_constraintBottom_toBottomOf="@id/btn1"
  26.         app:layout_constraintStart_toEndOf="@+id/btn1"/>
  27.  
  28. </androidx.constraintlayout.widget.ConstraintLayout>

约束布局下View的宽高0dp 

在ConstraintLayout下 0dp 有一个特别的功能。让View根据定位属性填满高度或者宽度。

例子1

效果图：

 xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:background="@color/white"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="0dp"
  13.         android:layout_height="50dp"
  14.         android:layout_marginTop="20dp"
  15.         android:text="按键1"
  16.         app:layout_constraintEnd_toEndOf="parent"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20. </androidx.constraintlayout.widget.ConstraintLayout>

效果图里可以看到按键1的宽度根据定位属性被填满了

例子2

效果图：

 xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:background="@color/white"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="0dp"
  13.         android:layout_height="0dp"
  14.         android:layout_marginTop="20dp"
  15.         android:text="按键1"
  16.         app:layout_constraintBottom_toTopOf="@+id/btn2"
  17.         app:layout_constraintEnd_toEndOf="parent"
  18.         app:layout_constraintStart_toStartOf="parent"
  19.         app:layout_constraintTop_toTopOf="parent" />
  20.  
  21.     <Button
  22.         android:id="@+id/btn2"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"
  25.         android:text="按键2"
  26.         android:layout_marginBottom="600dp"
  27.         app:layout_constraintBottom_toBottomOf="parent"
  28.         app:layout_constraintEnd_toEndOf="parent"
  29.         app:layout_constraintStart_toStartOf="parent" />
  30.  
  31. </androidx.constraintlayout.widget.ConstraintLayout>

layout_constraintHorizontal_chainStyle 与  layout_constraintVertical_chainStyle  间隙均分属性

layout_constraintHorizontal_chainStyle 与  layout_constraintVertical_chainStyle  一个是作用在横向一个是作用在竖向，二者没有区别。所以这里只举例横向Horizontal不在重复举例竖向。

layout_constraintHorizontal_chainStyle 是将两个与两个以上的View，在一个水平角度上互相定位后产生水平上的间隙均分关联。间隙均分的类型一共有三种：spread_inside 、spread、packed

spread_inside效果图：

 xml

请注意，下面的3个按键的左右定位关系都是互相关联的。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/white">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:text="按键1"
  15.         app:layout_constraintEnd_toStartOf="@+id/btn2"
  16.         app:layout_constraintHorizontal_chainStyle="spread_inside"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         android:text="按键2"
  25.         app:layout_constraintEnd_toStartOf="@+id/btn3"
  26.         app:layout_constraintStart_toEndOf="@+id/btn1"
  27.         app:layout_constraintTop_toTopOf="parent" />
  28.  
  29.     <Button
  30.         android:id="@+id/btn3"
  31.         android:layout_width="wrap_content"
  32.         android:layout_height="wrap_content"
  33.         android:text="按键3"
  34.         app:layout_constraintEnd_toEndOf="parent"
  35.         app:layout_constraintStart_toEndOf="@+id/btn2"
  36.         app:layout_constraintTop_toTopOf="parent" />
  37.  
  38. </androidx.constraintlayout.widget.ConstraintLayout>

spread效果图：

packed效果图：

发散例子：如果想让按键均分铺满整个水平角度

效果图

 xml

需要在对应水平角度的宽度或者高度上设置为0dp

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/white">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="0dp"
  13.         android:layout_height="wrap_content"
  14.         android:text="按键1"
  15.         app:layout_constraintEnd_toStartOf="@+id/btn2"
  16.         app:layout_constraintHorizontal_chainStyle="packed"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="0dp"
  23.         android:layout_height="wrap_content"
  24.         android:text="按键2"
  25.         app:layout_constraintEnd_toStartOf="@+id/btn3"
  26.         app:layout_constraintStart_toEndOf="@+id/btn1"
  27.         app:layout_constraintTop_toTopOf="parent" />
  28.  
  29.     <Button
  30.         android:id="@+id/btn3"
  31.         android:layout_width="0dp"
  32.         android:layout_height="wrap_content"
  33.         android:text="按键3"
  34.         app:layout_constraintEnd_toEndOf="parent"
  35.         app:layout_constraintStart_toEndOf="@+id/btn2"
  36.         app:layout_constraintTop_toTopOf="parent" />
  37.  
  38. </androidx.constraintlayout.widget.ConstraintLayout>

layout_constraintDimensionRatio 设置高宽百分比

 这是一个在手机端app开发特别有用的属性，可以依靠此属性按照比例让View适配不同手机的屏幕到达一个统一的效果。

View的高度和宽度1比1

效果图：

 xml

这里让按键的宽度跟随设备宽度。但是高度是与宽度一比一的。

  1.     <Button
  2.         android:id="@+id/btn1"
  3.         android:layout_width="0dp"
  4.         android:layout_height="0dp"
  5.         android:text="按键1"
  6.         app:layout_constraintDimensionRatio="H,1:1"
  7.         app:layout_constraintEnd_toEndOf="parent"
  8.         app:layout_constraintStart_toStartOf="parent"
  9.         app:layout_constraintTop_toTopOf="parent" />

View的高度是宽度的0.5

效果图：

 xml

注意这里使用的是W

  1.     <Button
  2.         android:id="@+id/btn1"
  3.         android:layout_width="0dp"
  4.         android:layout_height="0dp"
  5.         android:text="按键1"
  6.         app:layout_constraintDimensionRatio="W,0.5:1"
  7.         app:layout_constraintEnd_toEndOf="parent"
  8.         app:layout_constraintStart_toStartOf="parent"
  9.         app:layout_constraintTop_toTopOf="parent" />

宽度与高度的最大最小限制

一共有四条属性

  • app:layout_constraintWidth_max="100dp"  设置最大宽度
  • app:layout_constraintWidth_min="50dp"　 设置最小宽度　
  • app:layout_constraintHeight_max="50dp"   设置最大高度
  • app:layout_constraintHeight_min="50dp"    设置最小高度

限制最大宽度

效果图：

 xml

  1.     <Button
  2.         android:id="@+id/btn1"
  3.         android:layout_width="200dp"
  4.         android:layout_height="50dp"
  5.         android:text="按键1"
  6.         app:layout_constraintEnd_toEndOf="parent"
  7.         app:layout_constraintStart_toStartOf="parent"
  8.         app:layout_constraintTop_toTopOf="parent" />
  9.  
  10.     <Button
  11.         android:id="@+id/btn2"
  12.         android:layout_width="0dp"
  13.         android:layout_height="50dp"
  14.         android:text="按键2"        app:layout_constraintWidth_max="100dp"
  15.         app:layout_constraintEnd_toEndOf="@+id/btn1"
  16.         app:layout_constraintStart_toStartOf="@+id/btn1"
  17.         app:layout_constraintTop_toBottomOf="@+id/btn1"/>

限制最小宽度

效果图：

 xml

  1.     <Button
  2.         android:id="@+id/btn1"
  3.         android:layout_width="50dp"
  4.         android:layout_height="50dp"
  5.         android:text="按键1"
  6.         app:layout_constraintEnd_toEndOf="parent"
  7.         app:layout_constraintStart_toStartOf="parent"
  8.         app:layout_constraintTop_toTopOf="parent" />
  9.  
  10.     <Button
  11.         android:id="@+id/btn2"
  12.         android:layout_width="0dp"
  13.         android:layout_height="50dp"
  14.         android:text="按键2"        
  15.         app:layout_constraintEnd_toEndOf="@+id/btn1"
  16.         app:layout_constraintStart_toStartOf="@+id/btn1"
  17.         app:layout_constraintTop_toBottomOf="@+id/btn1"
  18.         app:layout_constraintWidth_min="100dp" />

androidx.constraintlayout.widget.Guideline  辅助线

androidx.constraintlayout.widget.Guideline辅助线View是不显示，用处很大。他们的意义是可以帮我们少写大量的android:layout_margin 外边距属性

另外注意使用android:orientation可以设置辅助线的水平方向

layout_constraintGuide_percent 百分比属性下的使用

 效果图：

xml

以百分比数值作为辅助线的位置

  1.     <androidx.constraintlayout.widget.Guideline
  2.         android:id="@+id/guideline2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:orientation="vertical"
  6.         app:layout_constraintGuide_percent="0.25" />
  7.  
  8.     <Button
  9.         android:id="@+id/btn1"
  10.         android:layout_width="200dp"
  11.         android:layout_height="50dp"
  12.         android:text="按键1"
  13.         app:layout_constraintStart_toStartOf="@+id/guideline2"
  14.         app:layout_constraintTop_toTopOf="parent" />

layout_constraintGuide_begin 以dp数值设置开始方向的辅助线位置

 效果图：

 xml

  1.     <androidx.constraintlayout.widget.Guideline
  2.         android:id="@+id/guideline2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:orientation="vertical"
  6.         app:layout_constraintGuide_begin="50dp" />
  7.  
  8.     <Button
  9.         android:id="@+id/btn1"
  10.         android:layout_width="200dp"
  11.         android:layout_height="50dp"
  12.         android:text="按键1"
  13.         app:layout_constraintStart_toStartOf="@+id/guideline2"
  14.         app:layout_constraintTop_toTopOf="parent" />

layout_constraintGuide_end 以dp数值设置结束方向的辅助线位置

 效果图：

 xml

  1.     <androidx.constraintlayout.widget.Guideline
  2.         android:id="@+id/guideline2"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:orientation="vertical"
  6.         app:layout_constraintGuide_end="150dp" />
  7.  
  8.     <Button
  9.         android:id="@+id/btn1"
  10.         android:layout_width="200dp"
  11.         android:layout_height="50dp"
  12.         android:text="按键1"
  13.         app:layout_constraintStart_toStartOf="@+id/guideline2"
  14.         app:layout_constraintTop_toTopOf="parent" />

constraintlayout.widget.Barrier 障碍线

androidx.constraintlayout.widget.Barrier 障碍线View是不显示。它的作用是与多View产生关联并且始终保持在长度最长的那个View上。可能很难理解，但是看下面的动图就很好理解了。

这个View的关键属性是

app:barrierDirection="end"  这是让barrier根据view的那个方向设置障碍

app:constraint_referenced_ids=""  需要设置的view的id

效果图：

图片中按键3的左边是依赖了barrier这个View的

xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:background="@color/white">
  8.     
  9.     <Button
  10.         android:id="@+id/btn1"
  11.         android:layout_width="300dp"
  12.         android:layout_height="50dp"
  13.         android:text="按键1"
  14.         app:layout_constraintStart_toStartOf="parent"
  15.         app:layout_constraintTop_toTopOf="parent" />
  16.  
  17.     <Button
  18.         android:id="@+id/btn2"
  19.         android:layout_width="150dp"
  20.         android:layout_height="50dp"
  21.         android:text="按键2"
  22.         android:visibility="visible"
  23.         app:layout_constraintStart_toStartOf="parent"
  24.         app:layout_constraintTop_toBottomOf="@+id/btn1" />
  25.  
  26.     <androidx.constraintlayout.widget.Barrier
  27.         android:id="@+id/barrier"
  28.         android:layout_width="wrap_content"
  29.         android:layout_height="wrap_content"
  30.         app:barrierDirection="end"
  31.         app:constraint_referenced_ids="btn1,btn2"/>
  32.  
  33.     <Button
  34.         android:id="@+id/btn3"
  35.         android:layout_width="100dp"
  36.         android:layout_height="50dp"
  37.         android:text="按键3"
  38.         app:layout_constraintStart_toStartOf="@id/barrier"
  39.         app:layout_constraintTop_toBottomOf="@+id/btn2" />
  40.     
  41. </androidx.constraintlayout.widget.ConstraintLayout>

layout_goneMarginStart 、layout_goneMarginTop 相邻View隐藏后的外边距设置

一共有6个属性

  1. <attr format="dimension" name="layout_goneMarginBottom"/>
  2. <attr format="dimension" name="layout_goneMarginEnd"/>
  3. <attr format="dimension" name="layout_goneMarginLeft"/>
  4. <attr format="dimension" name="layout_goneMarginRight"/>
  5. <attr format="dimension" name="layout_goneMarginStart"/>
  6. <attr format="dimension" name="layout_goneMarginTop"/>

效果图：

 

xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:background="@color/white">
  8.  
  9.     <Button
  10.         android:id="@+id/btn1"
  11.         android:layout_width="0dp"
  12.         android:layout_height="50dp"
  13.         android:text="按键1"
  14.         android:visibility="gone"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintStart_toStartOf="parent"
  17.         app:layout_constraintTop_toTopOf="parent" />
  18.  
  19.     <Button
  20.         android:id="@+id/btn2"
  21.         android:layout_width="0dp"
  22.         android:layout_height="50dp"
  23.         android:text="按键2"
  24.         app:layout_goneMarginTop="50dp"
  25.         app:layout_constraintEnd_toEndOf="parent"
  26.         app:layout_constraintStart_toStartOf="parent"
  27.         app:layout_constraintTop_toBottomOf="@+id/btn1" />
  28.     
  29. </androidx.constraintlayout.widget.ConstraintLayout>

constraintlayout.widget.Group 将多个View编组

 一般情况下多用于管理多个view的显示与隐藏

效果图：

xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/white">
  9.  
  10.     <Button
  11.         android:id="@+id/btn1"
  12.         android:layout_width="0dp"
  13.         android:layout_height="50dp"
  14.         android:text="按键1"
  15.         android:visibility="gone"
  16.         app:layout_constraintEnd_toEndOf="parent"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="0dp"
  23.         android:layout_height="50dp"
  24.         android:text="按键2"
  25.         app:layout_goneMarginTop="50dp"
  26.         app:layout_constraintEnd_toEndOf="parent"
  27.         app:layout_constraintStart_toStartOf="parent"
  28.         app:layout_constraintTop_toBottomOf="@+id/btn1" />
  29.  
  30.     <androidx.constraintlayout.widget.Group
  31.         android:id="@+id/group"
  32.         android:layout_width="wrap_content"
  33.         android:layout_height="wrap_content"
  34.         android:visibility="visible"
  35.         app:constraint_referenced_ids="btn1,btn2"/>
  36.  
  37. </androidx.constraintlayout.widget.ConstraintLayout>

layout_constraintCircle 以圆形实现View的排列

效果图：

xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:background="@color/white">
  9.  
  10.     <TextView
  11.         android:id="@+id/clockCenter"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:text="时钟中心"
  15.         android:textColor="@android:color/black"
  16.         android:layout_marginTop="300dp"
  17.         app:layout_constraintEnd_toEndOf="parent"
  18.         app:layout_constraintStart_toStartOf="parent"
  19.         app:layout_constraintTop_toTopOf="parent" />
  20.  
  21.     <TextView
  22.         android:id="@+id/zero"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"
  25.         android:text="0"
  26.         android:textColor="@android:color/black"
  27.         app:layout_constraintCircle="@id/clockCenter"
  28.         app:layout_constraintCircleRadius="100dp"
  29.         app:layout_constraintCircleAngle="0"
  30.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  31.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  32.  
  33.     <TextView
  34.         android:id="@+id/one"
  35.         android:layout_width="wrap_content"
  36.         android:layout_height="wrap_content"
  37.         android:text="1"
  38.         android:textColor="@android:color/black"
  39.         app:layout_constraintCircle="@id/clockCenter"
  40.         app:layout_constraintCircleRadius="100dp"
  41.         app:layout_constraintCircleAngle="30"
  42.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  43.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  44.  
  45.     <TextView
  46.         android:id="@+id/two"
  47.         android:layout_width="wrap_content"
  48.         android:layout_height="wrap_content"
  49.         android:text="2"
  50.         android:textColor="@android:color/black"
  51.         app:layout_constraintCircle="@id/clockCenter"
  52.         app:layout_constraintCircleRadius="100dp"
  53.         app:layout_constraintCircleAngle="60"
  54.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  55.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  56.  
  57.     <TextView
  58.         android:id="@+id/three"
  59.         android:layout_width="wrap_content"
  60.         android:layout_height="wrap_content"
  61.         android:text="3"
  62.         android:textColor="@android:color/black"
  63.         app:layout_constraintCircle="@id/clockCenter"
  64.         app:layout_constraintCircleRadius="100dp"
  65.         app:layout_constraintCircleAngle="90"
  66.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  67.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  68.  
  69.     <TextView
  70.         android:id="@+id/four"
  71.         android:layout_width="wrap_content"
  72.         android:layout_height="wrap_content"
  73.         android:text="4"
  74.         android:textColor="@android:color/black"
  75.         app:layout_constraintCircle="@id/clockCenter"
  76.         app:layout_constraintCircleRadius="100dp"
  77.         app:layout_constraintCircleAngle="120"
  78.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  79.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  80.  
  81.     <TextView
  82.         android:id="@+id/five"
  83.         android:layout_width="wrap_content"
  84.         android:layout_height="wrap_content"
  85.         android:text="5"
  86.         android:textColor="@android:color/black"
  87.         app:layout_constraintCircle="@id/clockCenter"
  88.         app:layout_constraintCircleRadius="100dp"
  89.         app:layout_constraintCircleAngle="150"
  90.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  91.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  92.  
  93.     <TextView
  94.         android:id="@+id/six"
  95.         android:layout_width="wrap_content"
  96.         android:layout_height="wrap_content"
  97.         android:text="6"
  98.         android:textColor="@android:color/black"
  99.         app:layout_constraintCircle="@id/clockCenter"
  100.         app:layout_constraintCircleRadius="100dp"
  101.         app:layout_constraintCircleAngle="180"
  102.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  103.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  104.  
  105.     <TextView
  106.         android:id="@+id/seven"
  107.         android:layout_width="wrap_content"
  108.         android:layout_height="wrap_content"
  109.         android:text="7"
  110.         android:textColor="@android:color/black"
  111.         app:layout_constraintCircle="@id/clockCenter"
  112.         app:layout_constraintCircleRadius="100dp"
  113.         app:layout_constraintCircleAngle="210"
  114.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  115.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  116.  
  117.     <TextView
  118.         android:id="@+id/eight"
  119.         android:layout_width="wrap_content"
  120.         android:layout_height="wrap_content"
  121.         android:text="8"
  122.         android:textColor="@android:color/black"
  123.         app:layout_constraintCircle="@id/clockCenter"
  124.         app:layout_constraintCircleRadius="100dp"
  125.         app:layout_constraintCircleAngle="240"
  126.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  127.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  128.  
  129.     <TextView
  130.         android:id="@+id/nine"
  131.         android:layout_width="wrap_content"
  132.         android:layout_height="wrap_content"
  133.         android:text="9"
  134.         android:textColor="@android:color/black"
  135.         app:layout_constraintCircle="@id/clockCenter"
  136.         app:layout_constraintCircleRadius="100dp"
  137.         app:layout_constraintCircleAngle="270"
  138.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  139.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  140.  
  141.     <TextView
  142.         android:id="@+id/ten"
  143.         android:layout_width="wrap_content"
  144.         android:layout_height="wrap_content"
  145.         android:text="10"
  146.         android:textColor="@android:color/black"
  147.         app:layout_constraintCircle="@id/clockCenter"
  148.         app:layout_constraintCircleRadius="100dp"
  149.         app:layout_constraintCircleAngle="300"
  150.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  151.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  152.  
  153.     <TextView
  154.         android:id="@+id/eleven"
  155.         android:layout_width="wrap_content"
  156.         android:layout_height="wrap_content"
  157.         android:text="11"
  158.         android:textColor="@android:color/black"
  159.         app:layout_constraintCircle="@id/clockCenter"
  160.         app:layout_constraintCircleRadius="100dp"
  161.         app:layout_constraintCircleAngle="330"
  162.         app:layout_constraintStart_toStartOf="@id/clockCenter"
  163.         app:layout_constraintTop_toTopOf="@id/clockCenter"/>
  164.  
  165.     <!--  这里可以搞一张时钟图片来旋转  -->
  166.     <androidx.constraintlayout.widget.ConstraintLayout
  167.         android:layout_width="match_parent"
  168.         android:layout_height="500dp"
  169.         android:rotationY="0.5"
  170.         android:rotationX="0.5"
  171.         android:rotation="30"
  172.         app:layout_constraintTop_toTopOf="@id/clockCenter"
  173.         app:layout_constraintBottom_toBottomOf="@id/clockCenter">
  174.  
  175.         <View
  176.             android:id="@+id/minute"
  177.             android:layout_width="2dp"
  178.             android:layout_height="80dp"
  179.             android:background="@color/black"
  180.             android:layout_marginBottom="100dp"
  181.             app:layout_constraintTop_toTopOf="parent"
  182.             app:layout_constraintStart_toStartOf="parent"
  183.             app:layout_constraintEnd_toEndOf="parent"
  184.             app:layout_constraintBottom_toBottomOf="parent"/>
  185.  
  186.     </androidx.constraintlayout.widget.ConstraintLayout>
  187.     
  188. </androidx.constraintlayout.widget.ConstraintLayout>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/225661
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号