快捷導(dǎo)航

Android布局ConstraintLayout代碼修改約束及輔助功能

更新時(shí)間：2022年09月21日 10:00:12 作者：芝麻粒兒

這篇文章主要為大家介紹了Android布局ConstraintLayout代碼修改約束及輔助功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

實(shí)踐過程

代碼修改約束

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒兒"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="變化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        findViewById(R.id.idBtn).setOnClickListener(v -> {
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(idConstraintLayout);
            //設(shè)置相對(duì)父布局劇中
            constraintSet.centerHorizontally(R.id.idTxt, ConstraintSet.PARENT_ID);
            constraintSet.centerVertically(R.id.idTxt, ConstraintSet.PARENT_ID);
            //可以添加動(dòng)畫
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //還有其他形式  控件A底部和空間B頂部對(duì)其   等同于xml中屬性 app:layout_constraintBottom_toTopOf
//        constraintSet.connect(R.id.idTxtA, ConstraintSet.BOTTOM, R.id.idTxtB, ConstraintSet.TOP);
    }
}

除了上面的效果，我們還能實(shí)現(xiàn)切換布局的時(shí)候，相同控件動(dòng)畫化。我們準(zhǔn)備兩個(gè)布局，布局內(nèi)id一致，但是位置不同。

布局A如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒兒"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="變化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局B如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒兒"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="變化"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        //變化
        findViewById(R.id.idBtn).setOnClickListener(v ->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint_b);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //恢復(fù)
        findViewById(R.id.idBtnBack).setOnClickListener(v->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
    }
}

??輔助功能

Guideline

表示輔助線，需要使用單獨(dú)的不是你實(shí)際布局的View控件來做，因?yàn)槭禽o助工具，所以真實(shí)運(yùn)行的時(shí)候不會(huì)繪制，僅在你寫布局的時(shí)候幫助你繪制，輔助你完成布局，有三個(gè)相關(guān)屬性：

app:layout_constraintGuide_percent=“0.5” 在父布局的百分比位置。

app:layout_constraintGuide_begin=“10dp” 距離父布局開始位置，橫向?yàn)樽?，縱向?yàn)轫敳俊?/p>

app:layout_constraintGuide_end=“10dp” 距離父布局末尾位置。

需要和android:orientation結(jié)合使用，vertical是縱輔助線，horizontal是橫向輔助線。

Barrier

寓意屏障，比如我們有幾個(gè)不固定寬度或高度的控件，而有一個(gè)控件想一直在這幾個(gè)中的最長的那個(gè)控件邊緣對(duì)其，按照以前我們是將這幾個(gè)控件包裹嵌套一層來實(shí)現(xiàn)。但是ConstraintLayout可以使用Barrier輔助工具實(shí)現(xiàn)。重點(diǎn)有兩個(gè)屬性app:barrierDirection表示屏障在目標(biāo)控件的哪個(gè)方向，app:constraint_referenced_ids指定目標(biāo)控件，注意多個(gè)逗號(hào)隔開。

<TextView
    android:id="@+id/idTxt1"
...
/>
<TextView
    android:id="@+id/idTxt2"
    app:layout_constraintTop_toBottomOf="@+id/idTxt1"
...
/>
<androidx.constraintlayout.widget.Barrier
    android:id="@+id/idBarrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="idTxt1,idTxt2" />
<TextView
    android:id="@+id/idTxt3"
    app:layout_constraintLeft_toRightOf="@id/idBarrier"
...
/>

Flow

這是網(wǎng)格布局，不具體介紹了，就說一下屬性吧。

app:flow_wrapMode="aligned"：有3個(gè)值：aligned-絕對(duì)對(duì)齊（和網(wǎng)格對(duì)齊類似）；none-默認(rèn)方式，成為一排，寬度不夠，從兩邊出去；chain-和絕對(duì)對(duì)齊有點(diǎn)出入的是，比如6個(gè)元素，第一排4個(gè)，第二排是2個(gè)，這2個(gè)元素會(huì)平分橫屏寬度
app:flow_verticalGap和app:flow_horizontalGap：表示豎直間距或橫向間距
android:orientation="horizontal"：水平方向的流式還是豎直方向的流式
app:flow_maxElementsWrap=""：表示一行幾個(gè)元素
app:flow_verticalAlign="top"：有四個(gè)值：top，bottom，center，baseline。每一行元素的對(duì)齊方式
app:flow_horizontalBias="float"：low的bias偏移，只在style為packed時(shí)生效
app:flow_horizontalStyle="spread|spread_inside|packed"：當(dāng)wrapMode為chain或ALIGNED時(shí)生效

Placeholder

這節(jié)其實(shí)算是和小重點(diǎn)，感興趣的自己去搜索吧，主要作用是占位功能，占位之后其他控件可以通過setContentId移動(dòng)到該位置。

Group和Layer

能很好的控制多個(gè)控件的顯示和隱藏。app:constraint_referenced_ids指定目標(biāo)控件的id，多個(gè)逗號(hào)隔開。

<androidx.constraintlayout.widget.Group
    android:id="@+id/idGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="idTxt,idBtn" />

Layer不僅能實(shí)現(xiàn)Group的隱藏，還能修改背景，使用方式和Group一致。

以上就是Android布局ConstraintLayout代碼修改約束及輔助功能的詳細(xì)內(nèi)容，更多關(guān)于Android ConstraintLayout 布局約束的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: