2017-06-03 9 views
0

私はConstraint LayoutでImageViewに9Xの等倍サイズのボタンを配置する方法は?

<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:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginTop="8dp" 
    android:adjustViewBounds="true" 
    android:cropToPadding="false" 
    android:scaleType="fitXY" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    app:srcCompat="@drawable/argentina" 
    android:layout_marginLeft="16dp" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.501" 
    android:layout_marginRight="16dp" 
    android:layout_marginStart="16dp" 
    android:layout_marginEnd="16dp" /> 

に従うよう制約レイアウト内部ImageViewのを持っているとProblem Describing Image

予告ImageViewの変化にそのここで示したように、私は9X同じサイズのボタンを使って、このイメージをカバーしたいです制約のレイアウトのサイズ

答えて

1

はいこれを使用して実現することができます制約cha中とmatch_constraintは(0dp)あなたは以下のすべてのボタンに、ここで水平垂直とチェーンを定義する必要が プロパティは、同じ

<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" 
    tools:layout_editor_absoluteY="81dp" 
    tools:layout_editor_absoluteX="0dp"> 



     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="8dp" 
      android:layout_marginTop="8dp" 
      android:adjustViewBounds="true" 
      android:cropToPadding="false" 
      android:scaleType="fitXY" 
      app:layout_constraintBottom_toBottomOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintTop_toTopOf="parent" 
      app:srcCompat="@drawable/firefox" 
      android:layout_marginLeft="16dp" 
      app:layout_constraintHorizontal_bias="0.0" 
      app:layout_constraintVertical_bias="0.501" 
      android:layout_marginRight="16dp" 
      android:layout_marginStart="16dp" 
      android:layout_marginEnd="16dp" /> 
     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintEnd_toEndOf="@+id/imageView" 
      app:layout_constraintTop_toTopOf="@+id/imageView" 
      app:layout_constraintStart_toEndOf="@+id/button5" 
      app:layout_constraintBottom_toTopOf="@id/button41" 
      app:layout_constraintVertical_chainStyle="spread_inside"/> 


     <Button 
      android:id="@+id/button31" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintStart_toStartOf="@+id/imageView" 
      app:layout_constraintTop_toTopOf="@+id/imageView" 
      app:layout_constraintBottom_toTopOf="@id/button311" 
      app:layout_constraintHorizontal_chainStyle="spread_inside" 
      app:layout_constraintEnd_toStartOf="@+id/button51" 
      app:layout_constraintVertical_chainStyle="spread_inside" /> 

     <Button 
      android:id="@+id/button5" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintTop_toTopOf="@+id/imageView" 
      app:layout_constraintEnd_toStartOf="@+id/button11" 
      app:layout_constraintStart_toEndOf="@+id/button13" 
      app:layout_constraintBottom_toTopOf="@+id/button133" 
      app:layout_constraintVertical_chainStyle="spread_inside" /> 




     <Button 
      android:id="@+id/button311" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintStart_toStartOf="@+id/imageView" 
      app:layout_constraintTop_toBottomOf="@+id/button31" 
      app:layout_constraintBottom_toTopOf="@+id/button13" 
      app:layout_constraintEnd_toStartOf="@+id/button133" 
      app:layout_constraintHorizontal_chainStyle="spread_inside" /> 

     <Button 
      android:id="@+id/button133" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintStart_toEndOf="@+id/button311" 
      app:layout_constraintEnd_toStartOf="@+id/button41" 
      app:layout_constraintTop_toBottomOf="@+id/button5" 
      app:layout_constraintBottom_toTopOf="@+id/button51" /> 
     <Button 
      android:id="@+id/button41" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      app:layout_constraintEnd_toEndOf="@+id/imageView" 
      android:text="Button" 
      app:layout_constraintTop_toBottomOf="@+id/button1" 
      app:layout_constraintBottom_toTopOf="@+id/button11" 
      app:layout_constraintStart_toEndOf="@+id/button133" /> 

     <Button 
      android:id="@+id/button11" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintEnd_toEndOf="@+id/imageView" 
      app:layout_constraintBottom_toBottomOf="@+id/imageView" 
      app:layout_constraintStart_toEndOf="@+id/button51" 
      app:layout_constraintTop_toBottomOf="@id/button41" 
      /> 


     <Button 
      android:id="@+id/button13" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintStart_toStartOf="@+id/imageView" 
      app:layout_constraintBottom_toBottomOf="@+id/imageView" 
      app:layout_constraintTop_toBottomOf="@id/button311" 
      app:layout_constraintHorizontal_chainStyle="spread_inside" 
      app:layout_constraintEnd_toStartOf="@+id/button51" /> 

     <Button 
      android:id="@+id/button51" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:text="Button" 
      app:layout_constraintBottom_toBottomOf="@+id/imageView" 
      app:layout_constraintEnd_toStartOf="@+id/button11" 
      app:layout_constraintStart_toEndOf="@+id/button13" 
      app:layout_constraintTop_toBottomOf="@id/button133"/> 
</android.support.constraint.ConstraintLayout> 

のためのサンプルはこちらデザインですおよび青いプリント design and blue print

私はuがあまりにも自分のイメージビューにいくつかminHeightのを追加することをおすすめしますはそう避けるために: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#Chains

これは、すべてのデバイスのサイズと向きに動作します

NOTE

あなたはチェーンと制約についてはこちらすべての詳細を取得することができますボタンを隠しているが、私はあなたの要件を知らないが目立つ点

+0

ありがとうたくさんこれは私がもう1つの質問を探していたものです:ボタン間のギャップ(垂直と水平)を取り除く方法はありますか? !! –

+0

スペースはデフォルトで線形レイアウトでも同じですが、ボタンの背景を設定すると、ボタンの背景とのギャップがカバーされます。 – Pavan

+0

ボタンは後で見ることができません! –

関連する問題