Android - 約束佈局 - 如何對齊視圖中心在其他視圖的邊緣？

我想建立這樣的佈局：Android - 約束佈局 - 如何對齊視圖中心在其他視圖的邊緣？

裏面的約束佈局有其作用像一面旗幟的形象圖，然後有一個卡，是中心與的底部邊緣對齊橫幅，然後有另一個圖像視圖與卡的頂部邊緣居中對齊。

我面臨的問題是，當與卡對齊時，第二個圖像視圖（綠色一個）在後臺進入，而不是停留在前臺。

這裏是XML，

<android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      app:layout_collapseMode="parallax" 
      android:paddingBottom="@dimen/padding_10"> 

      <ImageView 
       android:id="@+id/imageView_jobBackdrop_jobDetails" 
       android:layout_width="match_parent" 
       android:layout_height="175dp" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       android:src="@drawable/backdrop_job_details" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintTop_toTopOf="parent" 
       app:layout_collapseMode="parallax"/> 

      <ImageView 
       android:id="@+id/imageView_companyLogo_jobDetails" 
       android:layout_width="75dp" 
       android:layout_height="75dp" 
       android:fitsSystemWindows="true" 
       app:layout_collapseMode="parallax" 
       app:layout_constraintBottom_toTopOf="@+id/cardView_jobHeader_jobDetails" 
       app:layout_constraintEnd_toEndOf="@id/cardView_jobHeader_jobDetails" 
       app:layout_constraintStart_toStartOf="@id/cardView_jobHeader_jobDetails" 
       app:layout_constraintTop_toTopOf="@+id/cardView_jobHeader_jobDetails" /> 

      <android.support.v7.widget.CardView 
       android:id="@+id/cardView_jobHeader_jobDetails" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="24dp" 
       android:layout_marginEnd="16dp" 
       android:layout_marginStart="16dp" 
       app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails" 
       app:layout_constraintVertical_bias="0.5"> 

       <android.support.constraint.ConstraintLayout 
        android:id="@+id/parent" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 

        <TextView 
         android:id="@+id/textView_jobTitle_jobDetails" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginEnd="16dp" 
         android:layout_marginStart="16dp" 
         android:layout_marginTop="32dp" 
         android:gravity="center" 
         android:text="Fresher Software Developer Job. Urgent Openning. Angular Js, HTML, JavaScript, CSS" 
         app:layout_constraintEnd_toEndOf="parent" 
         app:layout_constraintStart_toStartOf="parent" 
         app:layout_constraintTop_toTopOf="parent" /> 

       </android.support.constraint.ConstraintLayout> 
      </android.support.v7.widget.CardView> 
     </android.support.constraint.ConstraintLayout>

來源

2017-10-09 Suhas Shelar

使用高程。一個較高的高度應該在頂部有綠色的東西。如果cardview有說高程3dp使綠色的東西標高更高說5dp – Raghunandan

高程需要min api 21 – nomag

是的，海拔不能用作minSdk是19. –

試試這個：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.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" 
    android:orientation="vertical" 
    android:padding="20dp"> 

    <android.support.v7.widget.CardView 
     android:id="@+id/card_1" 
     android:layout_width="0dp" 
     android:layout_height="200dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <android.support.v7.widget.CardView 
     android:id="@+id/card_2" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginTop="0dp" 
     app:cardBackgroundColor="#69F" 
     app:layout_constraintBottom_toBottomOf="@+id/card_1" 
     app:layout_constraintLeft_toLeftOf="@+id/card_1" 
     app:layout_constraintRight_toRightOf="@+id/card_1" 
     app:layout_constraintTop_toBottomOf="@+id/card_1" /> 

</android.support.constraint.ConstraintLayout>

說明： - 這工作，因爲這四行

以下行設置了藍色CardView居中在白色CardView的底部邊緣。

<!-- top constraint is set to bottom of White CardView --> 
app:layout_constraintTop_toBottomOf="@+id/card_1" 

<!-- bottom constraint is set to bottom of White CardView --> 
app:layout_constraintBottom_toBottomOf="@+id/card_1"

以下行設置藍色CardView中心水平

<!-- left constraint is set to left of White CardView --> 
app:layout_constraintLeft_toLeftOf="@+id/card_1" 

<!-- right constraint is set to right of White CardView --> 
app:layout_constraintRight_toRightOf="@+id/card_1"

來源

2017-10-09 11:53:23 rupinderjeet

這可以用作直接在卡視圖上使用圖像視圖的替代方法。謝謝！ –

嘗試如下：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.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" 
    android:fitsSystemWindows="true" 
    app:layout_collapseMode="parallax"> 


    <ImageView 
     android:id="@+id/imageView_jobBackdrop_jobDetails" 
     android:layout_width="match_parent" 
     android:layout_height="175dp" 
     android:fitsSystemWindows="true" 
     android:scaleType="centerCrop" 
     android:background="@android:color/white" 
     app:layout_collapseMode="parallax" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="match_parent" 
     android:layout_height="60dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:background="@android:color/black" 
     app:layout_constraintBottom_toBottomOf="@+id/imageView_jobBackdrop_jobDetails" 
     app:layout_constraintEnd_toEndOf="@+id/imageView_jobBackdrop_jobDetails" 
     app:layout_constraintStart_toStartOf="@+id/imageView_jobBackdrop_jobDetails" 
     app:layout_constraintTop_toBottomOf="@+id/imageView_jobBackdrop_jobDetails" /> 

    <ImageView 
     android:id="@+id/imageView3" 
     android:layout_width="75dp" 
     android:layout_height="75dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:background="@android:color/darker_gray" 
     app:layout_constraintBottom_toTopOf="@+id/imageView2" 
     app:layout_constraintEnd_toEndOf="@+id/imageView2" 
     app:layout_constraintStart_toStartOf="@+id/imageView2" 
     app:layout_constraintTop_toTopOf="@+id/imageView2" /> 


</android.support.constraint.ConstraintLayout>

來源

2017-10-09 11:59:32

我相信我發佈的約束與您使用的約束相同。雖然我沒有得到期望的輸出。有一個卡片視圖和圖像視圖。 –

這些限制不適用於卡片視圖。我嘗試將您的中間ImageView更改爲CardView，並將其他圖像放入背景中。 –

Android - 約束佈局 - 如何對齊視圖中心在其他視圖的邊緣？

回答

相關問題