問題與ConstraintLayout - ImageView的16：9不合適的上邊距

我想用ConstraintLayout構建佈局如下：問題與ConstraintLayout - ImageView的16：9不合適的上邊距

我用這個源佈局：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="@color/colorAccent"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:scaleType="centerCrop" 
      app:srcCompat="@android:color/darker_gray" 
      app:layout_constraintDimensionRatio="h,16:9" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView1" /> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:text="Title" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      app:layout_constraintTop_toBottomOf="@+id/imageView" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView2" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginBottom="24dp" 
      android:text="Subtle" 
      app:layout_constraintTop_toBottomOf="@+id/textView1" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" /> 

    </android.support.constraint.ConstraintLayout> 
</FrameLayout>

不幸的是獲得此結果：

正如你可以看到ImageView的頂部有一個不必要的邊距，儘管佈局顯示marginTop = 0。

來源

2017-10-05 Eugene Brusov

你layout_gravity爲中心。刪除，你應該很好去 – NSimon

@NSimon不，它沒有幫助...看到這個截圖https://www.dropbox.com/s/rftoxtk76jg3r6i/Screenshot_1507214820.png?dl=0 –

刪除這個：app：layout_constraintBottom_toTopOf =「@ + id/textView1」 –

根據張貼在回答這個問題，並考慮到約束的佈局V1.1.0答案和註釋仍處於測試階段，在這個時候最好的解決辦法是使用app:layout_constraintVertical_chainStyle="packed"：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:scaleType="centerCrop" 
      app:srcCompat="@android:color/darker_gray" 
      app:layout_constraintDimensionRatio="h,16:9" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView1" 
      app:layout_constraintVertical_chainStyle="packed"/> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:text="Title" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      app:layout_constraintTop_toBottomOf="@+id/imageView" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView2" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginBottom="24dp" 
      android:text="Subtle" 
      app:layout_constraintTop_toBottomOf="@+id/textView1" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" /> 

    </android.support.constraint.ConstraintLayout> 
</FrameLayout>

來源

2017-10-05 17:47:49

試試這個 - >我刪除了app:layout_constraintBottom_toTopOf="@+id/textView1"在ImageView它工作正常。

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="@color/colorAccent"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:scaleType="centerCrop" 
      app:srcCompat="@android:color/darker_gray" 
      app:layout_constraintDimensionRatio="h,16:9" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" /> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:text="Title" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      app:layout_constraintTop_toBottomOf="@+id/imageView" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView2" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginBottom="24dp" 
      android:text="Subtle" 
      app:layout_constraintTop_toBottomOf="@+id/textView1" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" /> 

    </android.support.constraint.ConstraintLayout> 
</FrameLayout>

來源

2017-10-05 14:55:29

查看結果dropbox.com/s/tjw1raf224aaq6l/...。現在textView1和imageView之間的垂直距離約爲40dp。 –

我需要擺脫這頂邊距

對於這一點，只是從你的ImageView

來源

2017-10-05 14:55:38 Anurag

查看結果https://www.dropbox.com/s/tjw1raf224aaq6l/device-2017-10-05-185647%20copy.png?dl=0。現在textView1和imageView之間的垂直距離約爲40dp。 –

前兩個答案刪除此行

app:layout_constraintBottom_toTopOf="@+id/textView1"

會工作。如果您想維護垂直鏈，您還可以將app:layout_constraintVertical_chainStyle="spread_inside"添加到頂部ImageView。

這裏添加此聲明後的圖像

這裏是XML（而不是其他任何變動。）：

<FrameLayout 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.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="@color/colorAccent"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:scaleType="centerCrop" 
      app:srcCompat="@android:color/darker_gray" 
      app:layout_constraintDimensionRatio="h,16:9" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintVertical_chainStyle="spread_inside" 
      app:layout_constraintBottom_toTopOf="@+id/textView1" /> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:text="Title" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      app:layout_constraintTop_toBottomOf="@+id/imageView" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/textView2" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginBottom="24dp" 
      android:text="Subtle" 
      app:layout_constraintTop_toBottomOf="@+id/textView1" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" /> 

    </android.support.constraint.ConstraintLayout> 
</FrameLayout>

更新：所以上面沒有按」 t使用ConstraintLayout版本1.0.2在API 23上工作。請嘗試改爲：

從textView2中刪除android:layout_marginTop="16dp"並將android:layout_marginBottom="16dp"添加到textView1。這有所作爲。

來源

2017-10-05 16:51:30 Cheticamp

前兩個答案不起作用，我得到textView1和imageView之間的距離爲40dp https://www.dropbox.com/s/tjw1raf224aaq6l/device-2017-10-05-185647%20copy.png?dl=0 。使用「spread_inside」，textView1和textView2之間沒有垂直邊距。看到這個截圖https://www.dropbox.com/s/59nixtlhnah44j7/device-2017-10-05-190906.png?dl=0。 –

@EugeneBrusov查看更新的答案。 – Cheticamp

只需複製/粘貼源代碼，並在API 23上運行的Nexus 5模擬器上獲得這些結果，並在API 23上運行的真實Nexus 5上獲得相同的結果https://www.dropbox.com/s/x48wk7sgk4ma6d5/Screenshot_1507223903.png？ DL = 0。正如你現在所看到的，textView1和textView2之間沒有空間。 –

的它的要點是使用一個垂直偏差爲0的包裝鏈，這樣鏈條的內容將位於最上面。另外，我不確定你爲什麼使用FrameLayout - 你可能不需要。

隨着1.1.0-β2：

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

    <ImageView 
     android:id="@+id/imageView" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:scaleType="centerCrop" 
     app:layout_constraintBottom_toTopOf="@+id/textView1" 
     app:layout_constraintDimensionRatio="h,16:9" 
     app:layout_constraintVertical_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_chainStyle="packed" 
     app:srcCompat="@android:color/darker_gray" /> 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="24dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:text="Title" 
     android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
     app:layout_constraintTop_toBottomOf="@+id/imageView" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toTopOf="@+id/textView2" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="16dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginBottom="24dp" 
     android:text="Subtle" 
     app:layout_constraintTop_toBottomOf="@+id/textView1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout>

來源

2017-10-05 19:36:09

感謝您的回答！是的，即使使用constraint-layout v1.0.2，打包鏈也會修復所請求佈局中的所有垂直邊距。我使用FrameLayout僅用於測試目的，因爲我想查看ConstraintLayout封裝內容的方式。例如，我可以使用帶'layout_height =「wrap_content」'的ConstraintLayout作爲RecyclerView項目。 –

問題與ConstraintLayout - ImageView的16：9不合適的上邊距

回答

相關問題