堆棧內存溢出
  簡體   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  3   7    android/ android-constraintlayout

問題描述

我有如下代碼 

<?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>

如下圖所示。

在此處輸入圖片說明

但是，有時我需要將left_text設置為gone 。 但我還是希望我的Right是在屏幕的右側。 我該如何實現？

（當前，當left_text gone ，我的Right如下圖所示居中）

在此處輸入圖片說明

7 個解決方案

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

我設法通過設置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>

width="0dp"將占用整個空間

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

您需要使用Barriers

嘗試這個 

<?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>

當兩個textview都可見時輸出

在此處輸入圖片說明

當left_text的可見性消失時輸出

在此處輸入圖片說明

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>

當兩個textview都可見時輸出

在此處輸入圖片說明

當left_text的可見性消失時輸出

在此處輸入圖片說明

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

您可以使用Guideline實現此目的。 檢查下面的例子 

  <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

我的答案類似於@Basi，但我想從我的角度給出更多信息：

當您使用准則並將視圖寬度設置為wrap_content ，可能發生的情況是您的視圖將像這樣重疊您的准則：

在此處輸入圖片說明

因此，我的建議是約束視圖的兩側並將其寬度設置為0dp （match_constraints），並通過這樣做使您的視圖適合其邊界，並且您的准則不會與您的視圖重疊，那么現在看起來像這樣：

在此處輸入圖片說明

因此，如果您要像@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>

它看起來像這樣：

在此處輸入圖片說明

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

您也可以使用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

我嘗試了您的代碼，但我很好奇，為什么使用從左到右和從右到左的約束？ 不需要它們。 如果刪除這些約束，則沒有問題。

為了使設置視圖的位置清晰明了，您只需要一個水平約束和一個垂直約束即可。

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

您需要對“約束布局”中的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.

相關問題 如何在約束布局內同時應用左右約束時將布局左對齊？ 邊距結束/右邊不適用於約束布局中的項目 約束布局左右約束 Horizontal RecyclerView - when selected item is out of viewport (scrolling left/right), change background of the most left/right item 如何在約束布局中設置左右文本視圖和單選按鈕？ 如何以編程方式在約束布局中添加左右邊距 如何通過單擊左側同一頁面上的回收視圖項目來更改或替換右側的布局 - android kotlin layout_centerHorizo​​ntal項在另一個視圖位於其右側時未居中 android-如何在彈出菜單項上從右到左文本 如何收聽整個recyclerview的左右滑動？ 不列出項目
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM