{"id":20892729,"url":"https://github.com/aweiloveandroid/constraintlayoutdemo","last_synced_at":"2026-04-21T16:41:25.161Z","repository":{"id":110402021,"uuid":"118611561","full_name":"AweiLoveAndroid/ConstraintLayoutDemo","owner":"AweiLoveAndroid","description":"这是ConstraintLayout的一个demo，详细介绍了一些属性和用法。","archived":false,"fork":false,"pushed_at":"2018-01-23T13:44:05.000Z","size":558,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T11:43:29.962Z","etag":null,"topics":["android","constraintlayout"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AweiLoveAndroid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-23T13:07:27.000Z","updated_at":"2019-01-30T02:21:17.000Z","dependencies_parsed_at":"2023-04-13T03:55:48.575Z","dependency_job_id":null,"html_url":"https://github.com/AweiLoveAndroid/ConstraintLayoutDemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AweiLoveAndroid%2FConstraintLayoutDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AweiLoveAndroid%2FConstraintLayoutDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AweiLoveAndroid%2FConstraintLayoutDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AweiLoveAndroid%2FConstraintLayoutDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AweiLoveAndroid","download_url":"https://codeload.github.com/AweiLoveAndroid/ConstraintLayoutDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243277501,"owners_count":20265352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","constraintlayout"],"created_at":"2024-11-18T10:13:47.962Z","updated_at":"2026-04-21T16:41:20.127Z","avatar_url":"https://github.com/AweiLoveAndroid.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ConstraintLayoutDemo\n这是ConstraintLayout的一个demo，详细介绍了一些属性和用法。\n\n----\n\nConstraintLayout的基本属性如下图所示：\n\n![基本属性](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/pic/%E5%9F%BA%E6%9C%AC%E7%9A%84%E5%B1%9E%E6%80%A7.png?raw=true)\n\n----\n\n### 1.ConstraintLayout和RelativeLayout的子view的布局方式对比\n\nRelativeLayout|ConstraintLayout \n-|-\nandroid:layout_alignParentLeft=\"true\"|app:layout_constraintLeft_toLeftOf=\"parent\"\nandroid:layout_alignParentTop=\"true\"|app:layout_constraintTop_toTopOf=\"parent\"\nandroid:layout_alignParentRight=\"true\"|app:layout_constraintRight_toRightOf=\"parent\"\nandroid:layout_alignParentBottom=\"true\"|app:layout_constraintBottom_toBottomOf=\"parent\"\nandroid:layout_centerInParent=\"true\"。设置android:layout_centerInParent=\"true\"属性就不需要设置以上4个属性了 |全部设置以上4个属性，相当于RelativeLayout里面的layout_centerInParent=\"true\" 属性, \n\n----\n\n### 2.ConstraintLayout子view属性详解\n\n\u003e **2.1 方位属性**\n\n每个View都有的边缘属性：left right top bottom\n默认的View是在左上方排列的，如果有多个，后加上的View会盖在以前的View上。\n\n在ConstraintLayout中新增了4子view的相关性的属性：\n\n    app:layout_constraintLeft_toRightOf=\"id\"\n    app:layout_constraintRight_toLeftOf=\"id\"\n    app:layout_constraintTop_toBottomOf=\"id\"\n    app:layout_constraintBottom_toTopOf=\"id\"\n\n`app:layout_constraintLeft_toRightOf=\"id\"` 意思是：设置这个属性的View相对于引用id的这个view的右边，相当于RelativeLayout里面的 android:layout_toRightOf=\"id\"属性\n\n`app:layout_constraintRight_toLeftOf=\"id\"` 意思是：设置这个属性的View相对于引用id的这个view的左边，相当于RelativeLayout里面的 android:layout_toLeftOf=\"id\"属性\n\napp:layout_constraintTop_toBottomOf=\"id\"` 意思是：设置这个属性的View相对于引用id的这个view的下边，相当于RelativeLayout里面的 android:layout_BottomOf=\"id\"属性\n\n`app:layout_constraintBottom_toTopOf=\"id\"` 意思是：设置这个属性的View相对于引用id的这个view的上边，相当于RelativeLayout里面的 android:layout_toTopOf=\"id\"属性\n \n【记忆方式】只记 `横杠后面的字段` 的意思。\n\n举例说明：\n 有一个TextView 还有一个Button。\n\n* （1）给TextView 设置 `app:layout_constraintLeft_toRightOf=\"@id/btn\"` 属性，表示TextView位于Button的右边\n* （2）给TextView 设置 `app:layout_constraintRight_toLeftOf=\"@id/btn\"` 属性，表示TextView位于Button的左边\n这时是看不见TextView，实际上TextView渲染到Button的左边了，在屏幕外边，\n如果给她做一个右边平移动画，你会看到它还是会显示出来的。\n* （3）给Button 设置 `app:layout_constraintLeft_toRightOf=\"@id/tv\"` 属性，表示Button位于TextView的右边\n* （4）实际使用中，多个View 之间有位置关系的时候，建议相互有位置关系的View分别设置一个方位属性。\n\n如下：TextView在Button左边，Button在TextView的右边。\n\n    \u003cTextView\n        android:id=\"@+id/tv\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"@string/textview_name\"\n        app:layout_constraintRight_toLeftOf=\"@id/btn\" /\u003e\n\n    \u003cButton\n        android:id=\"@+id/btn\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"@string/btn_name\"\n        app:layout_constraintLeft_toRightOf=\"@id/tv\" /\u003e\n\n同理：TextView在Button下边，Button在TextView的上边。\n\n    \u003cTextView\n        android:id=\"@+id/tv\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"@string/textview_name\"\n        app:layout_constraintTop_toBottomOf=\"@id/btn\" /\u003e\n\n    \u003cButton\n        android:id=\"@+id/btn\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"@string/btn_name\"\n        app:layout_constraintBottom_toTopOf=\"@id/tv\" /\u003e\n\n请见：[activity_main.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main.xml)\n\n\u003e **2.2 子View坐标**\n\nLinearLayout的weightSum属性。它能很好的适配线性布局下的某个子控件。\n在ConstraintLayout中也有相类似的子view属性，来达到这样的布局适配效果。\n\n根据这样的属性，我们可以完全了解子View在ConstraintLayout里面所处的left与top权重，\n构成一个以view开始绘制的点的坐标系，这样就很好的实现了子view的整体权重适配。\n\n\t\n* （1） 一个很常见的功能，我们现在希望在右下角增加一个浮动按钮。\n\n\tapp:layout_constraintHorizontal_bias=\"0.9\"\n\tapp:layout_constraintVertical_bias=\"0.9\"\n\n\n请看 [activity_main3.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main3.xml)\n\n* （2） 权重\n除上述用法之外，也可以实现类似于LinearLayout的权重的特性。我们增加3个textview来冒充tab。\n我们看横向的依赖，3个tab两两设置了约束（即你在我们的左边，我在你的右边），最外层的设置了parent约束；\n再加上我们把宽度都设置为了match_constraint，这样我们就完成了3个tab等分。\n\n    app:layout_constraintHorizontal_weight=\"2\" 水平方向权重为2\n    app:layout_constraintVertical_weight=\"3\" 垂直方向权重为3\n\n请见：[activity_main6.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main6.xml)\n\n在上例基础上还有一个属性：有3个值可以选择：\n    app:layout_constraintHorizontal_chainStyle=\"spread\"\n    app:layout_constraintHorizontal_chainStyle=\"spread_inside\"\n    app:layout_constraintHorizontal_chainStyle=\"packed\"\n\n因为上例所有控件宽度设置为match_constraint，因为默认就是spread这个值。\npacked这个值的时候，宽度必须是非0\n\n\n请见：[activity_main7.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main7.xml)\n\n![权重图](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/pic/%E6%9D%83%E9%87%8D%E5%9B%BE.png?raw=true)\n\n\u003e **2.3 适配属性之goneMargin，是一个自定义控制的属性。效果貌似不是很明显。**\n\n示例：\n\n\tapp:layout_goneMarginLeft=\"50dp\"\n\tapp:layout_goneMarginTop=\"50dp\"\n\tapp:layout_goneMarginRight=\"50dp\"\n\tapp:layout_goneMarginBottom=\"50dp\"\n横向排列的两个Button，第一个Button设置为gone,第二个设置app:layout_goneMarginLeft=\"50dp\"，\n那么就回出现在A位置上往右边移动50dp\n\n请看 [activity_main4.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main4.xml)\n\n\u003e **2.4 宽高比适配**\n\n\tapp:layout_constraintDimensionRatio=\"W,1:2\"\n\n\t在这里指明的\"W,1:2\"\u003cw一定大写\u003e的值，是明确指代类似图上的margin与view本身的1/2的比例值，\n\t如果没有写对于父控件的相关约束属性，那么就是两边的margin叠加起来，子view就往某一边伸缩。\n\n\t同样，限定值为\"H, 1:2\"是Height变化伸缩的效果。\n\n\t这样一个子view就会根据ConstraintLayout本身而去完成比例适配，相当方便。\n\n请看  [activity_main9.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main9.xml)\n\n----\n\n### 3.尝试一下Guideline\n\n`android.support.constraint.Guideline` 该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。\n该布局是不会显示到界面上的。\n\n所以其有个属性为：\n\n    android:orientation取值为\"vertical\"和\"horizontal\".\n\n除此以外，还差个属性，决定该辅助线的位置，通过这3个属性其中之一来确定属性值位置：\n\n    layout_constraintGuide_begin\n    layout_constraintGuide_end\n    layout_constraintGuide_percent\n\n比如：\n\nbegin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。\nend=30dp，即为距离底部。 \npercent=0.8即为距离顶部80%\n\n这个很简单，请看  [activity_main8.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main8.xml)\n\n\n----\n\n混合效果演示：\n\n请看  [activity_main5.xml](https://github.com/AweiLoveAndroid/ConstraintLayoutDemo/blob/master/app/src/main/res/layout/activity_main5.xml) 这么复杂的布局，完全没有嵌套布局，很清爽。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faweiloveandroid%2Fconstraintlayoutdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faweiloveandroid%2Fconstraintlayoutdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faweiloveandroid%2Fconstraintlayoutdemo/lists"}