【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性

本文详细解释了ConstraintLayout(cons)中Margin属性的使用规则,特别是当控件gone时,如何通过goneMargin属性保持布局一致性。通过实例演示了如何在C控件不显示时,B控件保持与底部10dp间距,同时避免了marginBottom导致的间距变化。

很久没写文章了,但是针对今天这篇文章还是值得记录下,供大家参考学习,目前布局中用ConstraintLayout(简称cons)应该很常见了,至于为什么要用这个布局,我想大家用过的都知道cons没有出现之前稍微复杂点的界面就各种嵌套,对于维护,修改也不是很方便。cons它作用就是控件与控件直接约束,不需要额外的嵌套。好了说下今天的正题:

1.首先了解下cons中的Margin属性:

cons中用Margin属性必须有个条件就是约束,比如你要设置marginStart=15dp.那么你必须有个横向约束,要设置margintop,必须要有竖向约束。不然就算你设置了值也不会生效的,当然这是约束布局的基本原则。
2.当组件设置View.GONE时,Margin属性以及goneMargin属性的作用:

这个就是今天的重点,前面讲了margin属性的设置,现在模拟一个场景假如有A,B,C三个控件,依次ABC顺序:

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

每个都设置了10dp间隔,现在C在底部,并且距离底部有10dp,(我们假如设计图就是这么设计的),现在需要根据数据控制C是否显示,假如C不显示那么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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:visibility="gone"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

很明显B挨着底部了,没有10dp间距,这样跟设计图不符,这时候有朋友在想我给B设置个marginBottom=10dp不就行了,雀氏在C控件不显示情况下没有问题,C控件显示是不是间距就是20dp了?

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"

        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

等会,抽支烟冷静下。这时候就有了goneMargin了,顾名思义,就是在约束布局中对于控件设置了gone时该属性起效。我们先改下代码看下效果:
 

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>

是不是就有了,这个属性是针对可见属性设置的,如果约束的控件不可见(C)该属性起效。

有人在想如果这时候c可见了会不会跟上面一样20dp间距,骚年别慌,看下面代码就知道了
 

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/shadow">

    <TextView
        android:id="@+id/textview_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_goneMarginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/textview_c"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_a" />

    <TextView
        android:id="@+id/textview_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_b" />
</androidx.constraintlayout.widget.ConstraintLayout>
总结:cons布局功能虽然强大,但是使用过程中还是有许多细节地方需要注意的,比如ScroolView嵌套cons,cons高度最好建议设置成match_partent(如果cons中还有rv显示不全的话也设置match_partent),此外对于goneMarin属性的其他方向间距是类似的(说明:不是说只能用goneMargin才能实现上面效果)。如果此篇文章有帮助到你,就请给个赞吧!

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android " android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center_horizontal" android:padding="16dp" android:background="@drawable/a"> <!-- 第一首古诗名字 --> <TextView android:id="@+id/tv_poem_name_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="《静夜思》" android:textSize="24sp" android:gravity="center" android:paddingTop="20dp"/> <!-- 第一首古诗作者 --> <TextView android:id="@+id/tv_author_name_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="李白" android:textSize="20sp" android:gravity="center" android:paddingTop="10dp"/> <!-- 第一首古诗原文 --> <TextView android:id="@+id/tv_poem_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="窗前明月光,疑是地上霜。\n举头望明月,低头思故乡。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp"/> <!-- 第一首古诗作者介绍 --> <TextView android:id="@+id/tv_author_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="李白:唐代诗人,字太白,号青莲居士,又号“谪仙人”,是唐代著名诗人,被后人誉为“诗仙”。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 第一首古诗译文 --> <TextView android:id="@+id/tv_translation_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="明亮的月光洒在窗户纸上,好像地上泛起了一层白霜。我禁不住抬起头来,看那天窗外空中的一轮明月,不由得低头沉思,想起远方的家乡。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 第二首古诗名字 --> <TextView android:id="@+id/tv_poem_name_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="《绝句四首·其三》" android:textSize="24sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 第二首古诗作者 --> <TextView android:id="@+id/tv_author_name_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="杜甫" android:textSize="20sp" android:gravity="center" android:paddingTop="10dp" android:visibility="gone"/> <!-- 第二首古诗原文 --> <TextView android:id="@+id/tv_poem_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="两个黄鹂鸣翠柳,一行白鹭上青天。\n窗含西岭千秋雪,门泊东吴万里船。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 第二首古诗作者介绍 --> <TextView android:id="@+id/tv_author_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="杜甫:唐代现实主义诗人,字子美,自号少陵野老,李白合称“李杜”。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 第二首古诗译文 --> <TextView android:id="@+id/tv_translation_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="两只黄鹂在翠绿的柳树间婉转地歌唱,一队整齐的白鹭直冲向蔚蓝的天空。我坐在窗前,可以望见西岭上堆积着终年不化的积雪,门前停泊着自万里外的东吴远行而来的船只。" android:textSize="18sp" android:gravity="center" android:paddingTop="20dp" android:visibility="gone"/> <!-- 按钮组 --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingTop="20dp"> <Button android:id="@+id/btn_poem" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="古诗原文" android:background="@android:color/holo_green_dark" android:textColor="@android:color/white" android:padding="10dp" android:layout_margin="5dp" android:elevation="4dp" android:stateListAnimator="@null"/> <Button android:id="@+id/btn_author" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="作者介绍" android:background="@android:color/holo_green_dark" android:textColor="@android:color/white" android:padding="10dp" android:layout_margin="5dp" android:elevation="4dp" android:stateListAnimator="@null"/> <Button android:id="@+id/btn_translation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="古诗译文" android:background="@android:color/holo_green_dark" android:textColor="@android:color/white" android:padding="10dp" android:layout_margin="5dp" android:elevation="4dp" android:stateListAnimator="@null"/> <Button android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下一首" android:background="@android:color/holo_green_dark" android:textColor="@android:color/white" android:padding="10dp" android:layout_margin="5dp" android:elevation="4dp" android:stateListAnimator="@null"/> <Button android:id="@+id/btn_exit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="退出" android:background="@android:color/holo_green_dark" android:textColor="@android:color/white" android:padding="10dp" android:layout_margin="5dp" android:elevation="4dp" android:stateListAnimator="@null"/> </LinearLayout> </LinearLayout> package com.example.a221402305; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private TextView tvPoemName1, tvPoem1, tvAuthor1, tvTranslation1; private TextView tvPoemName2, tvPoem2, tvAuthor2, tvTranslation2; private Button btnPoem, btnAuthor, btnTranslation, btnNext, btnExit; private boolean isFirstPoem = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tvPoemName1 = findViewById(R.id.tv_poem_name_1); tvPoem1 = findViewById(R.id.tv_poem_1); tvAuthor1 = findViewById(R.id.tv_author_1); tvTranslation1 = findViewById(R.id.tv_translation_1); tvPoemName2 = findViewById(R.id.tv_poem_name_2); tvPoem2 = findViewById(R.id.tv_poem_2); tvAuthor2 = findViewById(R.id.tv_author_2); tvTranslation2 = findViewById(R.id.tv_translation_2); btnPoem = findViewById(R.id.btn_poem); btnAuthor = findViewById(R.id.btn_author); btnTranslation = findViewById(R.id.btn_translation); btnNext = findViewById(R.id.btn_next); btnExit = findViewById(R.id.btn_exit); btnPoem.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isFirstPoem) { tvPoemName1.setVisibility(View.VISIBLE); tvPoem1.setVisibility(View.VISIBLE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); tvPoemName2.setVisibility(View.GONE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); } else { tvPoemName2.setVisibility(View.VISIBLE); tvPoem2.setVisibility(View.VISIBLE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); tvPoemName1.setVisibility(View.GONE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); } } }); btnAuthor.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isFirstPoem) { tvPoemName1.setVisibility(View.VISIBLE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.VISIBLE); tvTranslation1.setVisibility(View.GONE); tvPoemName2.setVisibility(View.GONE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); } else { tvPoemName2.setVisibility(View.VISIBLE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.VISIBLE); tvTranslation2.setVisibility(View.GONE); tvPoemName1.setVisibility(View.GONE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); } } }); btnTranslation.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (isFirstPoem) { tvPoemName1.setVisibility(View.VISIBLE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.VISIBLE); tvPoemName2.setVisibility(View.GONE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); } else { tvPoemName2.setVisibility(View.VISIBLE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.VISIBLE); tvPoemName1.setVisibility(View.GONE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); } } }); btnNext.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { isFirstPoem = !isFirstPoem; if (isFirstPoem) { tvPoemName1.setVisibility(View.VISIBLE); tvPoem1.setVisibility(View.VISIBLE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); tvPoemName2.setVisibility(View.GONE); tvPoem2.setVisibility(View.GONE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); } else { tvPoemName2.setVisibility(View.VISIBLE); tvPoem2.setVisibility(View.VISIBLE); tvAuthor2.setVisibility(View.GONE); tvTranslation2.setVisibility(View.GONE); tvPoemName1.setVisibility(View.GONE); tvPoem1.setVisibility(View.GONE); tvAuthor1.setVisibility(View.GONE); tvTranslation1.setVisibility(View.GONE); } } }); btnExit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); } } 杜甫显示不出来
最新发布
09-19
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值