{"id":615,"date":"2024-10-29T20:31:19","date_gmt":"2024-10-29T12:31:19","guid":{"rendered":"https:\/\/www.ixriver.com\/?p=615"},"modified":"2024-10-31T11:13:00","modified_gmt":"2024-10-31T03:13:00","slug":"android-ui-%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/finance.ixriver.com\/?p=615","title":{"rendered":"Android \u7ea6\u675f\u5e03\u5c40"},"content":{"rendered":"\n<p>ConstraintLayout \u76ee\u524d\u662f Android Studio \u7684\u9ed8\u8ba4\u5e03\u5c40\uff0c\u5176\u4f18\u52bf\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528\u6241\u5e73\u5316\u7684\u89c6\u56fe\u5c42\u6b21\u7ed3\u6784\uff08\u65e0\u5d4c\u5957\u89c6\u56fe\u7ec4\uff09\u6765\u521b\u5efa\u590d\u6742\u591a\u53d8\u7684\u5927\u578b\u5e03\u5c40\uff0c\u5728\u7ed8\u5236\u6548\u7387\u4e0a\u76f8\u5bf9\u5176\u5b83\u5e03\u5c40\u6709\u5f88\u5927\u4f18\u52bf\u3002ConstraintLayout \u4e0e RelativeLayout \u76f8\u4f3c\uff0c\u5176\u4e2d\u6240\u6709\u7684\u89c6\u56fe\u5747\u6839\u636e\u540c\u7ea7\u89c6\u56fe\u4e0e\u7236\u5e03\u5c40\u4e4b\u95f4\u7684\u5173\u7cfb\u6765\u8fdb\u884c\u5b9a\u4f4d\uff0c\u4f46\u5176\u7075\u6d3b\u6027\u8981\u9ad8\u4e8e RelativeLayout\uff0c\u5e76\u4e14\u66f4\u6613\u4e8e\u4e0e Android Studio \u7684\u5e03\u5c40\u7f16\u8f91\u5668\u914d\u5408\u4f7f\u7528<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\u76ee\u5f55<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E7%9B%B8%E5%AF%B9%E5%B8%83%E5%B1%80\" title=\"\u76f8\u5bf9\u5e03\u5c40\">\u76f8\u5bf9\u5e03\u5c40<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E6%8C%89%E6%AF%94%E4%BE%8B%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E5%B7%A6%E5%8F%B3%E6%88%96%E8%80%85%E4%B8%8A%E4%B8%8B%E9%97%B4%E8%B7%9D\" title=\"\u6309\u6bd4\u4f8b\u8bbe\u7f6e\u63a7\u4ef6\u5de6\u53f3\u6216\u8005\u4e0a\u4e0b\u95f4\u8ddd\">\u6309\u6bd4\u4f8b\u8bbe\u7f6e\u63a7\u4ef6\u5de6\u53f3\u6216\u8005\u4e0a\u4e0b\u95f4\u8ddd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E7%9A%84%E5%AE%BD%E9%AB%98%E6%AF%94\" title=\"\u8bbe\u7f6e\u63a7\u4ef6\u7684\u5bbd\u9ad8\u6bd4\">\u8bbe\u7f6e\u63a7\u4ef6\u7684\u5bbd\u9ad8\u6bd4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%AE%BD%E9%AB%98%E6%AF%94\" title=\"\u8bbe\u7f6e\u63a7\u4ef6\u4e4b\u95f4\u7684\u5bbd\u9ad8\u6bd4\">\u8bbe\u7f6e\u63a7\u4ef6\u4e4b\u95f4\u7684\u5bbd\u9ad8\u6bd4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E7%9B%B8%E5%AF%B9%E7%88%B6%E6%8E%A7%E4%BB%B6%E7%9A%84%E5%AE%BD%E9%AB%98\" title=\"\u8bbe\u7f6e\u63a7\u4ef6\u76f8\u5bf9\u7236\u63a7\u4ef6\u7684\u5bbd\u9ad8\">\u8bbe\u7f6e\u63a7\u4ef6\u76f8\u5bf9\u7236\u63a7\u4ef6\u7684\u5bbd\u9ad8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#%E5%9C%86%E5%BD%A2%E5%AE%9A%E4%BD%8D\" title=\"\u5706\u5f62\u5b9a\u4f4d\">\u5706\u5f62\u5b9a\u4f4d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#GuideLine%E6%8C%87%E7%A4%BA%E7%BA%BF\" title=\"GuideLine\u6307\u793a\u7ebf\">GuideLine\u6307\u793a\u7ebf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#Barrier_%E6%A0%85%E6%A0%8F\" title=\"Barrier \u6805\u680f\">Barrier \u6805\u680f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#Group_%E5%88%86%E7%BB%84\" title=\"Group \u5206\u7ec4\">Group \u5206\u7ec4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#Chains_%E9%93%BE%E6%9D%A1\" title=\"Chains \u94fe\u6761\">Chains \u94fe\u6761<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/finance.ixriver.com\/?p=615\/#Flow_%E6%B5%81%E5%BC%8F%E5%B8%83%E5%B1%80\" title=\"Flow \u6d41\u5f0f\u5e03\u5c40\">Flow \u6d41\u5f0f\u5e03\u5c40<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E7%9B%B8%E5%AF%B9%E5%B8%83%E5%B1%80\"><\/span>\u76f8\u5bf9\u5e03\u5c40<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>ConstraintLayout \u6700\u57fa\u672c\u7684\u5c5e\u6027\u5305\u542b\u4ee5\u4e0b\u51e0\u4e2a\uff0c\u5373&nbsp;<code>layout_constraintXXX_toYYYOf<\/code>&nbsp;\u683c\u5f0f\u7684\u5c5e\u6027\uff0c\u7528\u4e8e\u5c06 ViewA \u7684 XXX \u65b9\u5411\u548c ViewB \u7684 YYY \u65b9\u5411\u8fdb\u884c\u7ea6\u675f\u3002\u5f53\u4e2d\uff0cViewB \u4e5f\u53ef\u4ee5\u662f\u7236\u5bb9\u5668 ConstraintLayout\uff0c\u7528 parent \u6765\u8868\u793a\u3002\u8fd9\u4e9b\u5c5e\u6027\u90fd\u662f\u7528\u4e8e\u4e3a\u63a7\u4ef6\u6dfb\u52a0\u5782\u76f4\u548c\u6c34\u5e73\u65b9\u5411\u7684\u7ea6\u675f\u529b\uff0c\u6839\u636e\u7ea6\u675f\u529b\u7684 \u201c\u6709\u65e0\u201d \u6216\u8005 \u201c\u5f3a\u5f31\u201d\uff0c\u63a7\u4ef6\u4f1a\u5904\u4e8e\u4e0d\u540c\u7684\u4f4d\u7f6e<\/p>\n\n\n\n<ul>\n<li><code>layout_constraintLeft_toLeftOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintLeft_toRightOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintRight_toLeftOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintRight_toRightOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintTop_toTopOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintTop_toBottomOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintBottom_toTopOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintBottom_toBottomOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintStart_toEndOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintStart_toStartOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintEnd_toStartOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintEnd_toEndOf<\/code><\/li>\n\n\n\n<li><code>layout_constraintBaseline_toBaselineOf<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ tv2\u663e\u793a\u5728tv1\u7684\u53f3\u8fb9\uff0ctv2\u7684\u9ad8\u5ea6\u548ctv\u4e00\u6837\uff0ctv2\u8d77\u59cb\u4f4d\u7f6e\u548ctv1\u4e00\u6837, tv2\u7ed3\u675f\u4f4d\u7f6e\u548ctv1 \u4e00\u6837\n\n\/\/ tv3 \u63a7\u4ef6\u5728\u5c4f\u5e55\u5c45\u4e2d\u663e\u793a\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\"&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv1\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"150dp\"\n        android:layout_marginTop=\"60dp\"\n        android:layout_marginStart=\"20dp\"\n        android:layout_marginEnd=\"20dp\"\n        android:layout_marginBottom=\"20dp\"\n        android:background=\"#f5ec7e\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintEnd_toStartOf=\"@+id\/tv2\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv2\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"150dp\"\n        android:layout_marginEnd=\"20dp\"\n        android:background=\"#68b0f9\"\n        android:gravity=\"center\"\n        android:text=\"\u6ca1\u6709\u8bbe\u7f6e\u5e95\u90e8\u7ea6\u675f\uff0c\u6240\u4ee5\u53ea\u4f1a\u9876\u90e8\u548c\u9ec4\u8272\u65b9\u5757\u5bf9\u9f50\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toEndOf=\"@+id\/tv1\"\n        app:layout_constraintTop_toTopOf=\"@+id\/tv1\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv3\"\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n        android:background=\"#9C27B0\"\n        android:gravity=\"center\"\n        android:text=\"\u5c4f\u5e55\u5404\u4e2a\u65b9\u5411\u5c45\u4e2d\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/&gt;\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/2024.10.30_20.01.29-1-461x1024.jpg\" alt=\"\" class=\"wp-image-630\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/2024.10.30_20.01.29-1-461x1024.jpg 461w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/2024.10.30_20.01.29-1-135x300.jpg 135w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/2024.10.30_20.01.29-1.jpg 540w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E6%8C%89%E6%AF%94%E4%BE%8B%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E5%B7%A6%E5%8F%B3%E6%88%96%E8%80%85%E4%B8%8A%E4%B8%8B%E9%97%B4%E8%B7%9D\"><\/span>\u6309\u6bd4\u4f8b\u8bbe\u7f6e\u63a7\u4ef6\u5de6\u53f3\u6216\u8005\u4e0a\u4e0b\u95f4\u8ddd<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>layout_constraintHorizontal_bias<\/code>&nbsp;\u548c&nbsp;<code>layout_constraintVertical_bias<\/code>&nbsp;\u4e24\u4e2a\u5c5e\u6027\u6765\u8bbe\u7f6e\u63a7\u4ef6\u5728\u6c34\u5e73\u548c\u5782\u76f4\u65b9\u5411\u7684\u504f\u79fb\u91cf\uff0c\u53d6\u503c\u8303\u56f4\u4e3a0~1<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ tv1\u63a7\u4ef6\u5de6\u8fb9\u95f4\u8ddd\u5360\u7a7a\u95f2\u7a7a\u95f490%\uff0c\u53f3\u8fb9\u95f4\u8ddd\u5360\u7a7a\u95f2\u7a7a\u95f410%\n\/\/ tv1\u63a7\u4ef6\u4e0a\u8fb9\u95f4\u8ddd\u5360\u7a7a\u95f2\u7a7a\u95f410%\uff0c\u4e0b\u8fb9\u95f4\u8ddd\u5360\u7a7a\u95f2\u7a7a\u95f490%\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\"&gt;\n\n    &lt;TextView\n        android:layout_width=\"200dp\"\n        android:layout_height=\"200dp\"\n        android:background=\"#FF9800\"\n        android:gravity=\"center\"\n        android:text=\"\u516c\u4f17\u53f7\uff1a\u5b57\u8282\u6570\u7ec4\"\n        android:textColor=\"@android:color\/white\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintHorizontal_bias=\"0.9\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintVertical_bias=\"0.1\" \/&gt;\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-579x1024.png\" alt=\"\" class=\"wp-image-635\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-579x1024.png 579w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-170x300.png 170w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image.png 664w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E7%9A%84%E5%AE%BD%E9%AB%98%E6%AF%94\"><\/span>\u8bbe\u7f6e\u63a7\u4ef6\u7684\u5bbd\u9ad8\u6bd4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>app:layout_constraintDimensionRatio<\/code>&nbsp;\u5c5e\u6027\u8bbe\u5b9a\u5bbd\u9ad8\u6bd4\u4e3a\u4e00\u4e2a\u56fa\u5b9a\u6bd4\u4f8b\uff0c\u4e3b\u8981\u6709\u4e24\u79cd\u683c\u5f0f\uff0c\u6bd4\u5982<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">app:layout_constraintDimensionRatio=\"h,1:2\"\uff0c\u8868\u793a\u5206\u6bcd\u4e3aheight, width\/height=1\/2\uff0c\u4e5f\u5c31\u662fwidth\u4e3aheight\u76841\/2<br>app:layout_constraintDimensionRatio=\"w,1:2\", \u8868\u793a\u5206\u6bcd\u4e3awidth, height\/width=1\/2, \u4e5f\u5c31\u662fwidth \u4e3aheight\u76842\u500d<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\"&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/textView\"\n        android:layout_width=\"100dp\"\n        android:layout_height=\"0dp\"\n        android:background=\"#5476fd\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintDimensionRatio=\"h,1:2\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintHorizontal_bias=\"0.196\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintVertical_bias=\"0.499\" \/&gt;\n\n    &lt;TextView\n        android:layout_width=\"100dp\"\n        android:layout_height=\"0dp\"\n        android:background=\"#5476fd\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintDimensionRatio=\"w,1:2\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintHorizontal_bias=\"0.526\"\n        app:layout_constraintStart_toEndOf=\"@+id\/textView\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintVertical_bias=\"0.499\" \/&gt;\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-1-673x1024.png\" alt=\"\" class=\"wp-image-641\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-1-673x1024.png 673w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-1-197x300.png 197w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-1-768x1169.png 768w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-1.png 770w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%AE%BD%E9%AB%98%E6%AF%94\"><\/span>\u8bbe\u7f6e\u63a7\u4ef6\u4e4b\u95f4\u7684\u5bbd\u9ad8\u6bd4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>layout_constraintHorizontal_weight\uff1a\u8bbe\u7f6e\u63a7\u4ef6\u5728\u6c34\u5e73\u65b9\u5411\u7684\u5360\u6bd4<\/p>\n\n\n\n<p>layout_constraintVertical_weight\uff1a\u8bbe\u7f6e\u63a7\u4ef6\u5728\u5782\u76f4\u65b9\u5411\u7684\u5360\u6bd4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u5e94\u7528\u4f8b\u5b50\uff1a3\u4e2a\u63a7\u4ef6\u663e\u793a\u4e3a\u4e00\u5217\uff0c\u5360\u6ee1\u5c4f\u5e55\u7a7a\u95f4\uff0c\u6bcf\u4e2a\u63a7\u4ef6\u7684\u9ad8\u5ea6\u5360\u5c4f\u5e55\u9ad8\u5ea6\u90fd\u4e3a1\/3\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\"&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv1\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"0dp\"\n        android:background=\"#f5ec7e\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toTopOf=\"@id\/tv4\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintVertical_weight=\"1\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv4\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"0dp\"\n        android:background=\"#03A9F4\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toTopOf=\"@id\/tv5\"\n        app:layout_constraintEnd_toEndOf=\"@id\/tv1\"\n        app:layout_constraintStart_toStartOf=\"@id\/tv1\"\n        app:layout_constraintTop_toBottomOf=\"@id\/tv1\"\n        app:layout_constraintVertical_weight=\"1\" \/&gt;\n\n    &lt;TextView\n        android:id=\"@+id\/tv5\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"0dp\"\n        android:background=\"#F44336\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"@id\/tv4\"\n        app:layout_constraintStart_toStartOf=\"@id\/tv4\"\n        app:layout_constraintTop_toBottomOf=\"@id\/tv4\"\n        app:layout_constraintVertical_weight=\"1\" \/&gt;\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;\n\n\/\/ \u5e94\u7528\u4f8b\u5b502\uff1a\u5982\u9700\u8ba9tv4 \u5360\u5c4f\u5e55\u9ad8\u5ea6\u4e3a1\/2, \u5176\u5b83\u4e24\u4e2a\u63a7\u4ef6\u5206\u522b\u53601\/4, \u8c03\u6574tv4\u7684layout_constraintVertical_weight\u4e3a2\u5373\u53ef<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-2-634x1024.png\" alt=\"\" class=\"wp-image-649\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-2-634x1024.png 634w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-2-186x300.png 186w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-2.png 724w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E8%AE%BE%E7%BD%AE%E6%8E%A7%E4%BB%B6%E7%9B%B8%E5%AF%B9%E7%88%B6%E6%8E%A7%E4%BB%B6%E7%9A%84%E5%AE%BD%E9%AB%98\"><\/span>\u8bbe\u7f6e\u63a7\u4ef6\u76f8\u5bf9\u7236\u63a7\u4ef6\u7684\u5bbd\u9ad8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>layout_constrainWidth_percent\uff1a\u8bbe\u7f6e\u63a7\u4ef6\u76f8\u5bf9\u7236\u63a7\u4ef6\u7684\u5bbd\u5ea6<\/p>\n\n\n\n<p>layout_constrainHeight_percent\uff1a\u8bbe\u7f6e\u63a7\u4ef6\u76f8\u5bf9\u7236\u63a7\u4ef6\u7684\u9ad8\u5ea6<\/p>\n\n\n\n<p>\u5c5e\u6027\u7684\u53d6\u503c\u8303\u56f4\u5728 0 \u5230 1 \u4e4b\u95f4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u4f8b\u5b50\uff1abutton\u5bbd\u5ea6\u8bbe\u7f6e\u4e3a\u7236\u7a97\u53e3\uff08\u4e5f\u5373\u5c4f\u5e55\uff09\u768480%\u548c50%\n&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".ConstraintLayoutActivity\"&gt;\n\n    &lt;Button\n        android:id=\"@+id\/btn_target\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Target Button\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\"\n        app:layout_constraintWidth_percent=\"0.8\" \/&gt;\n\n    &lt;Button\n        android:layout_width=\"0dp\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Source Button\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toBottomOf=\"@id\/btn_target\"\n        app:layout_constraintWidth_percent=\"0.5\" \/&gt;\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"639\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-3-639x1024.png\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-3-639x1024.png 639w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-3-187x300.png 187w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-3.png 700w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%9C%86%E5%BD%A2%E5%AE%9A%E4%BD%8D\"><\/span>\u5706\u5f62\u5b9a\u4f4d<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5706\u5f62\u5b9a\u4f4d\u7528\u4e8e\u5c06\u4e24\u4e2a View \u4ee5<strong>\u89d2\u5ea6<\/strong>\u548c<strong>\u8ddd\u79bb<\/strong>\u8fd9\u4e24\u4e2a\u7ef4\u5ea6\u6765\u8fdb\u884c\u5b9a\u4f4d\uff0c\u4ee5\u4e24\u4e2a View \u7684\u4e2d\u5fc3\u70b9\u4f5c\u4e3a\u5b9a\u4f4d\u70b9<\/p>\n\n\n\n<ol>\n<li>app:layout_constraintCircle &#8211; \u76ee\u6807 View \u7684 ID<\/li>\n\n\n\n<li>app:layout_constraintCircleAngle &#8211; \u5bf9\u9f50\u7684\u89d2\u5ea6<\/li>\n\n\n\n<li>app:layout_constraintCircleRadius\u200a &#8211; \u4e0e\u76ee\u6807 View \u4e4b\u95f4\u7684\u8ddd\u79bb\uff08\u987a\u65f6\u9488\u65b9\u5411\uff0c0~360\u5ea6\uff09<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GuideLine%E6%8C%87%E7%A4%BA%E7%BA%BF\"><\/span>GuideLine\u6307\u793a\u7ebf<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5f53\u9700\u8981\u4e00\u4e2a\u4efb\u610f\u4f4d\u7f6e\u7684\u951a\u70b9\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u6307\u793a\u7ebf\uff08Guideline\uff09\u6765\u5e2e\u52a9\u5b9a\u4f4d\uff0cGuideline \u662f View \u7684\u5b50\u7c7b\uff0c\u4f7f\u7528\u65b9\u5f0f\u548c\u666e\u901a\u7684 View \u76f8\u540c\uff0c\u4f46 Guideline \u6709\u7740\u5982\u4e0b\u7684\u7279\u6b8a\u5c5e\u6027\uff1a<\/p>\n\n\n\n<ul>\n<li>\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5747\u4e3a 0<\/li>\n\n\n\n<li>\u53ef\u89c1\u6027\u4e3a View.GONE<\/li>\n<\/ul>\n\n\n\n<p>\u5373\u6307\u793a\u7ebf\u53ea\u662f\u4e3a\u4e86\u5e2e\u52a9\u5176\u4ed6 View \u8fdb\u884c\u5b9a\u4f4d\uff0c\u5b9e\u9645\u4e0a\u5e76\u4e0d\u4f1a\u51fa\u73b0\u5728\u9875\u9762\u4e0a<\/p>\n\n\n\n<p>\u4f8b\u5982\uff0c\u5982\u4e0b\u4ee3\u7801\u52a0\u5165\u4e86\u4e24\u6761 Guideline\uff0c\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u767e\u5206\u6bd4\u6216\u5b9e\u9645\u8ddd\u79bb\u6765\u8bbe\u7f6e Guideline \u7684\u4f4d\u7f6e\uff0c\u5e76\u901a\u8fc7 orientation \u5c5e\u6027\u6765\u8bbe\u7f6e Guideline \u7684\u65b9\u5411<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".ConstraintLayoutActivity\">\n\n    &lt;androidx.constraintlayout.widget.Guideline\n        android:id=\"@+id\/guideline1\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:orientation=\"vertical\"\n        app:layout_constraintGuide_percent=\"0.5\" \/>\n\n    &lt;androidx.constraintlayout.widget.Guideline\n        android:id=\"@+id\/guideline2\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:orientation=\"horizontal\"\n        app:layout_constraintGuide_begin=\"100dp\" \/>\n\n    &lt;TextView\n        android:id=\"@+id\/tv1\"\n        android:layout_width=\"150dp\"\n        android:layout_height=\"150dp\"\n        android:background=\"#f5ec7e\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintLeft_toRightOf=\"@+id\/guideline1\"\n        app:layout_constraintTop_toBottomOf=\"@+id\/guideline2\" \/>\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-4-658x1024.png\" alt=\"\" class=\"wp-image-660\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-4-658x1024.png 658w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-4-193x300.png 193w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-4-768x1195.png 768w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-4.png 820w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Barrier_%E6%A0%85%E6%A0%8F\"><\/span>Barrier \u6805\u680f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Barrier \u548c GuideLine \u4e00\u6837\u662f\u4e00\u4e2a\u865a\u62df\u7684 View\uff0c\u5bf9\u754c\u9762\u662f\u4e0d\u53ef\u89c1\u7684\uff0c\u53ea\u662f\u7528\u4e8e\u8f85\u52a9\u5e03\u5c40<\/p>\n\n\n\n<p>Barrier \u53ef\u4ee5\u4f7f\u7528\u7684\u5c5e\u6027\u6709\uff1a<\/p>\n\n\n\n<ol>\n<li>barrierDirection\uff1a\u7528\u4e8e\u8bbe\u7f6e Barrier \u7684\u4f4d\u7f6e\uff0c\u5c5e\u6027\u503c\u6709\uff1abottom\u3001top\u3001start\u3001end\u3001left\u3001right<\/li>\n\n\n\n<li>constraint_referenced_ids\uff1a\u7528\u4e8e\u8bbe\u7f6e Barrier \u6240\u5f15\u7528\u7684\u63a7\u4ef6\u7684 ID\uff0c\u53ef\u540c\u65f6\u8bbe\u7f6e\u591a\u4e2a<\/li>\n\n\n\n<li>barrierAllowsGoneWidgets\uff1a\u9ed8\u8ba4\u4e3a true\uff0c\u5f53 Barrier \u6240\u5f15\u7528\u7684\u63a7\u4ef6\u4e3a Gone \u65f6\uff0c\u5219 Barrier \u7684\u521b\u5efa\u884c\u4e3a\u662f\u5728\u5df2 Gone \u7684\u63a7\u4ef6\u5df2\u89e3\u6790\u7684\u4f4d\u7f6e\u4e0a\u8fdb\u884c\u521b\u5efa\u3002\u5982\u679c\u8bbe\u7f6e\u4e3a false\uff0c\u5219\u4e0d\u4f1a\u5c06 Gone \u7684\u63a7\u4ef6\u8003\u8651\u5728\u5185<\/li>\n<\/ol>\n\n\n\n<p>\u4e3b\u8981\u7528\u4e8e\u5206\u7ec4\u8bbe\u7f6e\u4f9d\u8d56\u5173\u7cfb\uff0c\u5e94\u7528\u4f8b\u5b50\uff1a\u63a7\u4ef6C \u4f4d\u4e8e\u63a7\u4ef6A\u548cB \u6574\u4f53\u7684\u53f3\u4fa7\uff0c\u5176\u4e2d\u63a7\u4ef6A\u548c\u63a7\u4ef6B\u7684\u5bbd\u5ea6\u662f\u53ef\u53d8\u7684<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n    &lt;TextView\n        android:id=\"@+id\/btn_target\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#03A9F4\"\n        android:padding=\"10dp\"\n        android:text=\"\u8fd9\u662f\u4e00\u6bb5\u5e76\u4e0d\u957f\u7684\u6587\u672c\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    &lt;TextView\n        android:id=\"@+id\/btn_source\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#009688\"\n        android:padding=\"10dp\"\n        android:text=\"\u6211\u4e5f\u4e0d\u77e5\u9053\u8bf4\u4ec0\u4e48\u597d\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toBottomOf=\"@id\/btn_target\" \/>\n\n    &lt;androidx.constraintlayout.widget.Barrier\n        android:id=\"@+id\/barrier\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:barrierAllowsGoneWidgets=\"false\"\n        app:barrierDirection=\"end\"\n        app:constraint_referenced_ids=\"btn_target,btn_source\" \/>\n\n    &lt;TextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#E91E63\"\n        android:padding=\"10dp\"\n        android:text=\"\u90a3\u5c31\u968f\u4fbf\u5199\u5199\u5427\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintStart_toEndOf=\"@id\/barrier\"\n        app:layout_constraintTop_toBottomOf=\"@id\/btn_target\" \/>\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"611\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-5-611x1024.png\" alt=\"\" class=\"wp-image-665\" style=\"width:750px;height:auto\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-5-611x1024.png 611w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-5-179x300.png 179w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-5.png 680w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Group_%E5%88%86%E7%BB%84\"><\/span>Group \u5206\u7ec4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Group \u7528\u4e8e\u63a7\u5236\u591a\u4e2a\u63a7\u4ef6\u7684\u53ef\u89c1\u6027\uff0c\u5148\u4f9d\u9760\u00a0<code>constraint_referenced_ids<\/code>\u6765\u7ed1\u5b9a\u5176\u5b83 View\uff0c\u4e4b\u540e\u5c31\u53ef\u4ee5\u901a\u8fc7\u5355\u72ec\u63a7\u5236 Group \u7684\u53ef\u89c1\u6027\u4ece\u800c\u6765\u95f4\u63a5\u6539\u53d8\u7ed1\u5b9a\u7684 View \u7684\u53ef\u89c1\u6027<\/p>\n\n\n\n<p>\u5e94\u7528\u4f8b\u5b50\uff1a\u901a\u8fc7\u5206\u7ec4\u63a7\u5236\u4e24\u4e2a\u6309\u94ae\u540c\u65f6\u53ef\u89c1\u6216\u8005\u540c\u65f6\u4e0d\u53ef\u89c1<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n    &lt;Button\n        android:id=\"@+id\/btn_target\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Target Button\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    &lt;Button\n        android:id=\"@+id\/btn_source\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Source Button\"\n        android:textAllCaps=\"false\"\n        app:layout_constraintCircle=\"@id\/btn_target\"\n        app:layout_constraintCircleAngle=\"45\"\n        app:layout_constraintCircleRadius=\"120dp\" \/>\n\n    &lt;androidx.constraintlayout.widget.Group\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:visibility=\"visible\"\n        app:constraint_referenced_ids=\"btn_target, btn_source\" \/>\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Chains_%E9%93%BE%E6%9D%A1\"><\/span>Chains \u94fe\u6761<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u628a\u591a\u4e2a\u63a7\u4ef6\u4e32\u8054\u6210\u4e00\u4e2aRow\u6216\u8005Column, \u5e76\u8bbe\u7f6e\u5269\u4f59\u7a7a\u95f4\u7684\u5206\u914d\u89c4\u5219<\/p>\n\n\n\n<p>\u94fe\u6761\u5206\u4e3a<strong>\u6c34\u5e73\u94fe\u6761<\/strong>\u548c<strong>\u7ad6\u76f4\u94fe\u6761<\/strong>\u4e24\u79cd\uff0c\u5206\u522b\u7528&nbsp;<code>layout_constraintHorizontal_chainStyle<\/code>&nbsp;\u548c&nbsp;<code>layout_constraintVertical_chainStyle<\/code>&nbsp;\u4e24\u4e2a\u5c5e\u6027\u6765\u8bbe\u7f6e\uff0c\u5c5e\u6027\u503c\u6709\u4ee5\u4e0b\u4e09\u79cd\uff1a<\/p>\n\n\n\n<ul>\n<li>spread\uff08\u9ed8\u8ba4\u503c\uff09<\/li>\n\n\n\n<li>spread_inside<\/li>\n\n\n\n<li>packed<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"225\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-6.png\" alt=\"\" class=\"wp-image-671\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-6.png 500w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-6-300x135.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n    &lt;TextView\n        android:id=\"@+id\/tv1\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"50dp\"\n        android:background=\"#f5ec7e\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintEnd_toStartOf=\"@+id\/tv2\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintHorizontal_chainStyle=\"spread_inside\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    &lt;TextView\n        android:id=\"@+id\/tv2\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"50dp\"\n        android:layout_marginTop=\"0dp\"\n        android:background=\"#ff538c\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintEnd_toStartOf=\"@+id\/tv3\"\n        app:layout_constraintStart_toEndOf=\"@+id\/tv1\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    &lt;TextView\n        android:id=\"@+id\/tv3\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"50dp\"\n        android:background=\"#41c0ff\"\n        android:gravity=\"center\"\n        android:text=\"Hello World!\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toEndOf=\"@+id\/tv2\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"1024\" src=\"https:\/\/www.ixriver.com\/wp-content\/uploads\/2024\/10\/image-7-622x1024.png\" alt=\"\" class=\"wp-image-672\" srcset=\"https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-7-622x1024.png 622w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-7-182x300.png 182w, https:\/\/finance.ixriver.com\/wp-content\/uploads\/2024\/10\/image-7.png 694w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Flow_%E6%B5%81%E5%BC%8F%E5%B8%83%E5%B1%80\"><\/span>Flow \u6d41\u5f0f\u5e03\u5c40<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/developer.android.google.cn\/reference\/androidx\/constraintlayout\/helper\/widget\/Flow?hl=en\">Flow<\/a>\u00a0\u662f\u4e00\u79cd\u65b0\u7684\u865a\u62df\u5e03\u5c40\uff0c\u5b83\u4e13\u95e8\u7528\u6765\u6784\u5efa\u94fe\u5f0f\u6392\u7248\u6548\u679c\uff0c\u5f53\u51fa\u73b0\u7a7a\u95f4\u4e0d\u8db3\u7684\u60c5\u51b5\u65f6\u80fd\u591f\u81ea\u52a8\u6362\u884c\uff0c\u751a\u81f3\u662f\u81ea\u52a8\u5ef6\u5c55\u5230\u5c4f\u5e55\u7684\u53e6\u4e00\u533a\u57df\u3002\u5f53\u9700\u8981\u5bf9\u591a\u4e2a\u5143\u7d20\u8fdb\u884c\u94fe\u5f0f\u5e03\u5c40\uff0c\u4f46\u4e0d\u786e\u5b9a\u5728\u8fd0\u884c\u65f6\u5e03\u5c40\u7a7a\u95f4\u7684\u5b9e\u9645\u5927\u5c0f\u662f\u591a\u5c11\u65f6 Flow \u5bf9\u4f60\u6765\u8bf4\u5c31\u975e\u5e38\u6709\u7528\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 Flow \u6765\u5b9e\u73b0\u8ba9\u5e03\u5c40\u968f\u7740\u5e94\u7528\u5c4f\u5e55\u5c3a\u5bf8\u7684\u53d8\u5316 (\u6bd4\u5982\u8bbe\u5907\u53d1\u751f\u65cb\u8f6c\u540e\u51fa\u73b0\u7684\u5c4f\u5e55\u5bbd\u5ea6\u53d8\u5316) \u800c\u52a8\u6001\u5730\u8fdb\u884c\u81ea\u9002\u5e94\u3002\u6b64\u5916\uff0cFlow \u662f\u4e00\u79cd\u865a\u62df\u5e03\u5c40\uff0c\u5e76\u4e0d\u4f1a\u4f5c\u4e3a\u89c6\u56fe\u6dfb\u52a0\u5230\u89c6\u56fe\u5c42\u7ea7\u7ed3\u6784\u4e2d\uff0c\u800c\u662f\u4ec5\u4ec5\u5f15\u7528\u5176\u5b83\u89c6\u56fe\u6765\u8f85\u52a9\u5b83\u4eec\u5728\u5e03\u5c40\u7cfb\u7edf\u4e2d\u5b8c\u6210\u5404\u81ea\u7684\u5e03\u5c40\u529f\u80fd<\/p>\n\n\n\n<p>Flow \u4e2d\u6700\u91cd\u8981\u7684\u4e00\u4e2a\u914d\u7f6e\u9009\u9879\u662f&nbsp;<code>wrapMode<\/code>\uff0c\u5b83\u53ef\u4ee5\u51b3\u5b9a\u5728\u5185\u5bb9\u6ea2\u51fa (\u6216\u51fa\u73b0\u6362\u884c) \u65f6\u7684\u5e03\u5c40\u884c\u4e3a\uff0c\u4e00\u5171\u6709\u4e09\u79cd\u6a21\u5f0f\uff1a<\/p>\n\n\n\n<ul>\n<li><strong>none<\/strong>\u00a0\u2013 \u6240\u6709\u5f15\u7528\u7684\u89c6\u56fe\u4ee5\u4e00\u6761\u94fe\u7684\u65b9\u5f0f\u8fdb\u884c\u5e03\u5c40\uff0c\u5982\u679c\u5185\u5bb9\u6ea2\u51fa\u5219\u6ea2\u51fa\u5185\u5bb9\u4e0d\u53ef\u89c1<\/li>\n\n\n\n<li><strong>chain<\/strong>\u00a0\u2013 \u5f53\u51fa\u73b0\u6ea2\u51fa\u65f6\uff0c\u6ea2\u51fa\u7684\u5185\u5bb9\u4f1a\u81ea\u52a8\u6362\u884c\uff0c\u4ee5\u65b0\u7684\u4e00\u6761\u94fe\u7684\u65b9\u5f0f\u8fdb\u884c\u5e03\u5c40<\/li>\n\n\n\n<li><strong>align<\/strong>\u00a0\u2013 \u540c chain \u7c7b\u4f3c\uff0c\u4f46\u662f\u4e0d\u4ee5\u884c\u800c\u662f\u4ee5\u5217\u7684\u65b9\u5f0f\u8fdb\u884c\u5e03\u5c40<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".FlowActivity\">\n\n    &lt;include\n        android:id=\"@+id\/cardView1\"\n        layout=\"@layout\/item_cardview\" \/>\n\n    &lt;include\n        android:id=\"@+id\/cardView2\"\n        layout=\"@layout\/item_cardview\" \/>\n\n    &lt;include\n        android:id=\"@+id\/cardView3\"\n        layout=\"@layout\/item_cardview\" \/>\n\n    &lt;include\n        android:id=\"@+id\/cardView4\"\n        layout=\"@layout\/item_cardview\" \/>\n\n    &lt;include\n        android:id=\"@+id\/cardView5\"\n        layout=\"@layout\/item_cardview\" \/>\n\n    &lt;androidx.constraintlayout.helper.widget.Flow\n        android:id=\"@+id\/flow\"\n        android:layout_width=\"0dp\"\n        android:layout_height=\"wrap_content\"\n        app:constraint_referenced_ids=\"cardView1,cardView2,cardView3,cardView4,cardView5\"\n        app:flow_horizontalGap=\"30dp\"\n        app:flow_verticalGap=\"30dp\"\n        app:flow_wrapMode=\"none\"\n        app:layout_constraintEnd_toEndOf=\"parent\"\n        app:layout_constraintStart_toStartOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>ConstraintLayout \u76ee\u524d\u662f Android Studio \u7684\u9ed8\u8ba4\u5e03\u5c40\uff0c\u5176\u4f18\u52bf\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528\u6241\u5e73\u5316\u7684 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"blocksy_meta":[],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"post_excerpt_stackable":"<p>ConstraintLayout \u76ee\u524d\u662f Android Studio \u7684\u9ed8\u8ba4\u5e03\u5c40\uff0c\u5176\u4f18\u52bf\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528\u6241\u5e73\u5316\u7684\u89c6\u56fe\u5c42\u6b21\u7ed3\u6784\uff08\u65e0\u5d4c\u5957\u89c6\u56fe\u7ec4\uff09\u6765\u521b\u5efa\u590d\u6742\u591a\u53d8\u7684\u5927\u578b\u5e03\u5c40\uff0c\u5728\u7ed8\u5236\u6548\u7387\u4e0a\u76f8\u5bf9\u5176\u5b83\u5e03\u5c40\u6709\u5f88\u5927\u4f18\u52bf\u3002&hellip;<\/p>\n","category_list":"<a href=\"https:\/\/finance.ixriver.com\/?cat=23\" rel=\"category\">android<\/a>","author_info":{"name":"admin","url":"https:\/\/finance.ixriver.com\/?author=1"},"comments_num":"0 comments","_links":{"self":[{"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/posts\/615"}],"collection":[{"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=615"}],"version-history":[{"count":31,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/posts\/615\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=\/wp\/v2\/posts\/615\/revisions\/679"}],"wp:attachment":[{"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/finance.ixriver.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}