web-dev-qa-db-ja.com

ConstraintLayout：TextViewをImageViewの下に配置します

私は次のようなレイアウトを持つという一見単純なタスクに直面しています。

  • 画像のアスペクト比に応じて全幅、高さをとるImageView
  • その下のTextView

これは私が持っているものです

<?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"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="16dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@drawable/hamster"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view"/>

</Android.support.constraint.ConstraintLayout>

そして、これはそれがどのように見えるかです：

enter image description here

ご覧のとおり、ImageViewには私が望まない上部へのマージンがあります。

ImageView's制約をから変更した場合

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

に

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

（下部の制約を削除すると）、結果は次のようになります。

enter image description here

これで、ImageViewがレイアウトの一番上にありますが、TextViewはなくなりました。 2番目のバリアントの場合、Android Studio 3のレイアウトプレビューには、希望どおりのレイアウトが表示されます。

enter image description here

何が間違っているので、どうすれば修正できますか？

注：レイアウトはConstraintLayoutである必要があり、レイアウトの高さはwrap_contentである必要があります。

私のテストプロジェクトを見つけることができます ここ 。

編集：問題はより大きなデバイスでのみ発生するようです。 Nexus 9エミュレーターを使用しています。

androidandroid-layoutandroid-constraintlayout
7
asco

はい、Akash Aminが言ったように、ImageViewにこの2行を追加してください

    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintVertical_bias="0.0"
3
Dileep Patel
<?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"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_marginBottom="0dp"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@drawable/ic_launcher_background"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/guideline" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MText MyText MyText MyText MyText MyText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MText MyText MyText 
        MyText 
        MyText MyText MyText MyText MyText MyText MyText MyText MyText t 
        MyText MyText MyText MyText "
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.45" />

</Android.support.constraint.ConstraintLayout>
0
hossam elsawy

これを試して..

<?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"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <ImageView
        Android:id="@+id/image_view"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:adjustViewBounds="true"
        Android:scaleType="fitXY"
        Android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_view" />

</Android.support.constraint.ConstraintLayout>

Imageviewの下部の制約を削除し、textviewの上部の制約をimageviewの下部に設定します

0
Nirav Shah

これを試してみてくださいそれはあなたにとって役に立ちました

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


    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        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"
        app:srcCompat="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"/>

    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="0dp"
        Android:text="MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText MyText "
        Android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintBottom_toBottomOf="parent"
        Android:layout_marginBottom="8dp" />
</Android.support.constraint.ConstraintLayout>

enter image description here

0
Vishal Yadav