堆栈内存溢出
  简体   繁体   English

当左侧的约束项消失时，如何使我的Right项保持正确（约束布局）

[英]How to keep my Right item right when the constraints item on the left is gone (Constraint Layout)

 原文  2019-04-11 05:29:19  4   7    android/ android-constraintlayout

问题描述

I have a code as below 我有如下代码 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/left_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/right_text"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            android:fontFamily="serif-monospace"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/left_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

It looks like below. 如下图所示。

在此处输入图片说明

However, at times I need to set left_text to gone . 但是，有时我需要将left_text设置为gone 。 But I still want my Right to be at the right side of the screen. 但我还是希望我的Right是在屏幕的右侧。 How could I achieve that? 我该如何实现？

(Currently when left_text is gone , my Right went to middle as per picture below) （当前，当left_text gone ，我的Right如下图所示居中）

在此处输入图片说明

7 个解决方案

解决方案1
 3  2019-04-11 06:40:17

I manage to solve it by setting my width="0dp" and android:textAlignment="viewStart" or android:textAlignment="viewEnd" 我设法通过设置width="0dp"和android:textAlignment="viewStart"或android:textAlignment="viewEnd" 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/left_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:textAlignment="viewStart"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/right_text"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/right_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            android:textAlignment="viewEnd"
            android:fontFamily="serif-monospace"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/left_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

The width="0dp" will take up the entire space width="0dp"将占用整个空间

解决方案2
 1  2019-04-11 05:43:07

You need to use Barriers 您需要使用Barriers

Try this 尝试这个 

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Left"
        android:textColor="#F40"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="left_text"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:barrierDirection="end" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

OUTPUT When both textview is Visible 当两个textview都可见时输出

在此处输入图片说明

OUTPUT When Visibility Gone of left_text 当left_text的可见性消失时输出

在此处输入图片说明

UPDATE UPDATE 

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft"
        android:textColor="#F40"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="left_text"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:barrierDirection="end" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#3F51B5"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

OUTPUT When both textview is Visible 当两个textview都可见时输出

在此处输入图片说明

OUTPUT When Visibility Gone of left_text 当left_text的可见性消失时输出

在此处输入图片说明

解决方案3
 0  2019-04-11 05:49:26

You can achieve this using Guideline . 您可以使用Guideline实现此目的。 check example below 检查下面的例子 

  <TextView
            android:id="@+id/left_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#F40"
            android:textSize="26sp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/guideline10"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="serif-monospace"
            android:text="Right"
            android:textColor="#F40"
            android:textSize="26sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline10"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.50" />

解决方案4
 0  2019-04-11 06:41:20

My answer is similar to @Basi but I want to give extra information from my perspective: 我的答案类似于@Basi，但我想从我的角度给出更多信息：

When you work with guidelines and put your view width to wrap_content what may happen is that your view will overlap your guideline like this : 当您使用准则并将视图宽度设置为wrap_content ，可能发生的情况是您的视图将像这样重叠您的准则：

在此处输入图片说明

So my recommendation is to constraint both side of your view and set its width to 0dp (match_constraints ) and by doing it your view will fit into its bounds and your guideline won't overlap your view, then this will look like this now : 因此，我的建议是约束视图的两侧并将其宽度设置为0dp （match_constraints），并通过这样做使您的视图适合其边界，并且您的准则不会与您的视图重叠，那么现在看起来像这样：

在此处输入图片说明

So if you want to use guidelines as in @Basi you better use 0dp on your width: 因此，如果您要像@Basi中一样使用准则，则最好在宽度上使用0dp ： 

<?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="match_parent">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Right"
    android:textColor="#F40"
    android:textAlignment="textEnd"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline10"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="Left"
    android:textColor="#F40"
    android:textAlignment="textStart"
    app:layout_constraintEnd_toStartOf="@+id/guideline10"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this : 它看起来像这样：

在此处输入图片说明

解决方案5
 0  2019-04-11 07:05:01

You can also use SequenceLayout to make it work. 您也可以使用SequenceLayout使其起作用。 

<Sequences>
    <Horizontal>
        <Span id="@id/left_text" size="wrap"/>
        <Span size="1w"/>
        <Span id="@id/right_text" size="wrap"/>
    </Horizontal>
</Sequences>

解决方案6
 0  2019-04-11 07:25:28

I tried your code and I am curious, why do you use constraint from Left to Right and from Right to Left? 我尝试了您的代码，但我很好奇，为什么使用从左到右和从右到左的约束？ There is no need for them. 不需要它们。 If you delete those constraints you have no problem. 如果删除这些约束，则没有问题。

Just to make things clear for setting view's position you need just one horizontal and one vertical constraint. 为了使设置视图的位置清晰明了，您只需要一个水平约束和一个垂直约束即可。

解决方案7
 0  2019-04-11 09:16:11

You need bias for both TextView in Constraint Layout and app:layout_constraintStart_toStartOf="parent" of another TextView. 您需要对“约束布局”中的TextView和另一个TextView的app：layout_constraintStart_toStartOf =“ parent”都具有偏见。 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/right_text"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:fontFamily="serif-monospace"
        android:text="Right"
        android:textColor="#F40"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在约束布局内同时应用左右约束时将布局左对齐？ - How to align a layout to left while both left and right constraints are applied to it inside Constraint Layout? 边距结束/右边不适用于约束布局中的项目 - margin end/right is not working on item in constraint layout 约束布局左右约束 - constraint layout left and right constraint Horizontal RecyclerView - when selected item is out of viewport (scrolling left/right), change background of the most left/right item - Horizontal RecyclerView - when selected item is out of viewport (scrolling left/right), change background of the most left/right item 如何在约束布局中设置左右文本视图和单选按钮？ - how to set left and right textview and radio button in constraint layout? 如何以编程方式在约束布局中添加左右边距 - How to add left and right margins in constraint layout programatically 如何通过单击左侧同一页面上的回收视图项目来更改或替换右侧的布局 - android kotlin - How can I change or replace layout on the right by clicking on a recycleview item on the left same page- android kotlin layout_centerHorizo​​ntal项在另一个视图位于其右侧时未居中 - layout_centerHorizontal item is not centered when another view is at the right side of it android-如何在弹出菜单项上从右到左文本 - android- How to right to left text on popup menu item 如何收听整个recyclerview的左右滑动？ 不列出项目 - How to listen swipe left and right of whole recyclerview? not list item
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM