如何從父視圖中取消限制視圖的大小（保留wrap_content的大小）？

Question

我有一些有自己的寬度和高度比例的響應式佈局的彩色區域。我想粘貼一個視圖，例如，TextView的紅色區域爲：

其中TextView的保留自己原來的大小，而不是由紅色區域的限制。

我想：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="horizontal"> 
<View 
    android:background="#FFFF77" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.2"/> 
<LinearLayout 
    android:clipChildren="false" 
    android:layout_width="0dp" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:layout_weight="0.01"> 
    <View 
     android:clipChildren="false" 
     android:background="#77FFFF" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="0.2"/> 
    <RelativeLayout 
     android:id="@+id/progressBar" 
     android:clipChildren="false" 
     android:background="#FF0000" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="0.01"> 
     <TextView 
      android:textAlignment="center" 
      android:gravity="center" 
      android:textSize="20dp" 
      android:text="abcde" 
      android:textColor="#000000" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </RelativeLayout> 
    <View 
     android:clipChildren="false" 
     android:background="#77FFFF" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="0.1"/> 
</LinearLayout> 
<View 
    android:background="#FFFF77" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.1"/> 
</LinearLayout> 

它已經被設置機器人：clipChildren =爲中間元素 「假」，但TextView的規模似乎仍然由紅色框的限制：

如何讓TextView的大小不受限制，使其看起來像粘在紅色區域上？

注：在實踐中，除了紅色區域，其他區域將變成透明的，所以不用擔心黃色和青色區域將阻止TextView的

Answer 1

試試這個圖書館Spring Layout

Answer 2

可以實現的東西通過使用ConstraintLayout，看起來與截圖非常相似，並且作爲附加優勢，父級內只有三個視圖：一個用於垂直線，一個用於紅色框，另一個用於文本。

有在這裏工作的兩個概念：

你可以在「中心」的意見是比其邊緣約束彼此其他視圖小。因此，即使垂直線比父項小得多，當我限制它的左側匹配父項的左側和右側匹配父項的右側時，它將自行繪製到父項的（水平）中心。

然後，您可以通過在該方向上設置bias來準確調整此「居中」的工作方式。由於您之前在左側的權重爲0.2，右側的權重爲0.1，因此我將行的水平偏差設置爲0.67，因此它是到父級右邊緣的方式的三分之二。

然後，我將紅色視圖的左側和右側約束在垂直線的左側和右側，並使用相同的居中+偏移技巧將它沿着屏幕的三分之二處推開。

最後，我約束了文本視圖的所有四條邊，以匹配紅色框的所有四條邊。這會在紅色框外繪製文本視圖，但直接以此爲中心。

你可以玩弄數字來得到你想要的。

<android.support.constraint.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" 
    android:background="#FFFF77"> 

    <View 
     android:id="@+id/verticalLine" 
     android:layout_width="12dp" 
     android:layout_height="0dp" 
     android:background="#77FFFF" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="0.67"/> 

    <View 
     android:id="@+id/redSquare" 
     android:layout_width="0dp" 
     android:layout_height="24dp" 
     android:background="#FF0000" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="@+id/verticalLine" 
     app:layout_constraintRight_toRightOf="@+id/verticalLine" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintVertical_bias="0.67"/> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:gravity="center" 
     android:textColor="#000000" 
     android:textSize="20dp" 
     android:text="abcde" 
     app:layout_constraintTop_toTopOf="@+id/redSquare" 
     app:layout_constraintLeft_toLeftOf="@+id/redSquare" 
     app:layout_constraintRight_toRightOf="@+id/redSquare" 
     app:layout_constraintBottom_toBottomOf="@+id/redSquare"/> 


</android.support.constraint.ConstraintLayout>