布局篇之一:ConstraintLayout的使用

方法

1.layout_constraintXXX_toXXXOf

前一個xxx是該控件所在邊僧凤,后一個xxx是其他控件的所在邊即后面填寫的id控件

<img src = 'https://upload-images.jianshu.io/upload_images/4987670-665466298d9d46a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/762/format/webp' width = '300' height = "200" />

2. 在父控件的位置

  • 橫向居中用1.6
  • 縱向居中用3.8
  • 居中用1,3,6,8
  • 橫向偏移用1.6.9(1.6必須是使用9才能生效)
  • 縱向偏移用3.8.10(3.8必須使用10才能生效)

3.控件的相對位置

利用1.2.3.4.5.6.7.8進(jìn)行混合使用

4. 控件gone

如果該控隱藏了厦章,該參考控件會變成一個錨點(diǎn)幼驶,寬官硝,高,margin會失效侧甫,但是它的constrain等方法仍然有效委煤,別的控件仍然可以以它為錨點(diǎn)。

5.控件的尺寸

  1. 如果在寬棒卷、高設(shè)置wrap_content或者0dp都是包裹內(nèi)容
  2. 11.是控制該控件的尺寸,必須使layout_width,layout_height為0dp,并且必須使用1.6或者3.8
  • spread:控件所有約束空間
  • percent:必須配合12.使用顾孽,控件所在約束空間的大小百分比
  • wrap:包裹內(nèi)容
  1. 13.用于控制控件的寬高比祝钢,但是必須里面首先包含1-10的一個或幾個條件才會生效,同時令其中寬或者高為0dp
1.app:layout_constraintLeft_toLeftOf="parent|控件id"
2.app:layout_constraintLeft_toRightOf="parent|控件id"
3.app:layout_constraintTop_toTopOf="parent|控件id"
4.app:layout_constraintTop_toBottomOf="parent|控件id"
5.app:layout_constraintRight_toLeftOf="parent|控件id"
6.app:layout_constraintRight_toRightOf="parent|控件id"
7.app:layout_constraintBottom_toTopOf="parent|控件id"
8.app:layout_constraintBottom_toBottomOf="parent|控件id"
9. app:layout_constraintHorizontal_bias="0.0~1.0" //橫向偏移量從左到右
10. app:layout_constraintVertical_bias="0.0~1.0" //縱向偏移量從上到下
11.app:layout_constraintWidth_default="spread|percent|wrap" 尺寸
12.app:layout_constraintWidth_percent="0.0-1.0"
13.app:layout_constraintDimensionRatio="1" //寬高比

6. 鏈

  • spread: 將剩余空間平均分配為n+2個空間
  • spread inside:將剩余空間分配為n-1個空間(即去掉第一和最后一個相對父布局的空間位置)
  • packed:將剩余空間分配給第一個和最后一個相對父布局的左右兩邊緣的空間
  • 剩余空間左右分配問題:在packed模式若厚,可以通過 app:layout_constraintHorizontal_bias="0.0-1",其他模式下是沒有人任何效果的
  • 鏈?zhǔn)角闆r下的控件權(quán)重分配:app:layout_constraintHorizontal_weight=""設(shè)置該方法后鏈的style樣式失效拦英,因為沒有了剩余分配空間,這時候與linearlayout中權(quán)重用法一樣测秸。
//必須一一對應(yīng)關(guān)系疤估,才能形成chain,即A控件必須對父布局和相對B布局霎冯,B控件相對A铃拇、C布局,C控件相對B,父布局沈撞,否則layout_constraintHorizontal_chainStyle="spread"無效

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/a"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="A"
            app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/b" />

        <TextView
            android:id="@+id/b"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="B"
            app:layout_constraintLeft_toRightOf="@+id/a"
            app:layout_constraintRight_toLeftOf="@+id/c" />

        <TextView
            android:id="@+id/c"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="C"
            app:layout_constraintLeft_toRightOf="@+id/b"
            app:layout_constraintRight_toRightOf="parent" />
    </android.support.constraint.ConstraintLayout>
    

7.圓形布局

從時鐘12點(diǎn)為0慷荔,順時針旋轉(zhuǎn)角度進(jìn)行旋轉(zhuǎn)(可以用來設(shè)置衛(wèi)星菜單布局)

 <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/a"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="A"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/b"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="B"
            app:layout_constraintCircle="@id/a"
            app:layout_constraintCircleAngle="300"
            app:layout_constraintCircleRadius="100dp" />

        <TextView
            android:id="@+id/c"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:text="C"
            app:layout_constraintCircle="@id/a"
            app:layout_constraintCircleAngle="80"
            app:layout_constraintCircleRadius="100dp" />
    </android.support.constraint.ConstraintLayout>

GuidLine(基準(zhǔn)線)

  1. guidline只是虛擬的線,即使添加了寬高缠俺,背景也不會顯示出來
  2. 基準(zhǔn)線的位置可以有兩個方式來確定 app:layout_constraintGuide_percent="0.33"显晶、 app:layout_constraintGuide_begin="130dp"
  3. 控件對在該基準(zhǔn)線上進(jìn)行位置確定
   <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="130dp" />

    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="@id/guideline1"
        app:layout_constraintTop_toBottomOf="@id/guideline2" />

group

  1. 虛擬分組控件,可以指定指引的id,從而對該組控件進(jìn)行操作壹士,從而統(tǒng)一處理磷雇,從而不需要對控件一個個做操作
  2. 多個group,如果多個group含有相同id,那么以下面為主墓卦。
  <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="a,c"
        android:visibility="gone"/>
        
  <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="a,d"
        android:visibility="gone"/>


    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A" />

    <TextView
        android:id="@+id/b"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintTop_toBottomOf="@id/a" />

    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintTop_toBottomOf="@id/b" />

    <TextView
        android:id="@+id/d"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="D"
        app:layout_constraintTop_toBottomOf="@id/c" />

Placeholder

1.占位布局倦春,本身不繪制任何內(nèi)容,通過設(shè)置app:content="id",將原來id繪制在這個位置上落剪,原來的view被gone掉了睁本。

    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A" />

    <TextView
        android:id="@+id/b"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintTop_toBottomOf="@id/a" />

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="40dp"
        app:content="@+id/b"
        app:layout_constraintTop_toBottomOf="@id/b" />

    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toRightOf="@id/placeholder"
        app:layout_constraintTop_toTopOf="@+id/placeholder" />

    <TextView
        android:id="@+id/d"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="D"
        app:layout_constraintTop_toBottomOf="@id/c" />

Barrier

1.其中在a,b上做障礙,c相對barrier位置忠怖,這樣可以解決控件遮蔽問題呢堰,可以用于用戶密碼和用戶姓名輸入框的對齊。


    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="a,b" />

    <TextView
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Abababababababa" />

    <TextView
        android:id="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="Bfafafafafafafafafafafafafafafafafafaf"
        app:layout_constraintTop_toBottomOf="@id/a" />


    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toLeftOf="@+id/barrier" />

參考

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凡泣,一起剝皮案震驚了整個濱河市枉疼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鞋拟,老刑警劉巖骂维,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異贺纲,居然都是意外死亡航闺,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潦刃,“玉大人侮措,你說我怎么就攤上這事」愿埽” “怎么了分扎?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長胧洒。 經(jīng)常有香客問我畏吓,道長,這世上最難降的妖魔是什么略荡? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任庵佣,我火速辦了婚禮,結(jié)果婚禮上汛兜,老公的妹妹穿的比我還像新娘巴粪。我一直安慰自己,他們只是感情好粥谬,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布肛根。 她就那樣靜靜地躺著,像睡著了一般漏策。 火紅的嫁衣襯著肌膚如雪派哲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天掺喻,我揣著相機(jī)與錄音芭届,去河邊找鬼。 笑死感耙,一個胖子當(dāng)著我的面吹牛褂乍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播即硼,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼逃片,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了只酥?” 一聲冷哼從身側(cè)響起褥实,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎裂允,沒想到半個月后损离,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绝编,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年草冈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓮增。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡怎棱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出绷跑,到底是詐尸還是另有隱情拳恋,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布砸捏,位于F島的核電站谬运,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏垦藏。R本人自食惡果不足惜梆暖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望掂骏。 院中可真熱鬧轰驳,春花似錦、人聲如沸弟灼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽田绑。三九已至勤哗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掩驱,已是汗流浹背芒划。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留欧穴,地道東北人民逼。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像苔可,于是被迫代替她去往敵國和親缴挖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容