web-dev-qa-db-ja.com

ConstraintLayout中央揃え画像とテキスト

TextViewImageViewの末尾に揃えるにはどうすればよいですか。TextViewConstraintLayoutを使用してcentered verticallyになります。ImageViewの末尾に揃えることができました。ただし、ImageViewTextViewよりも少し大きいため、垂直方向の中央に配置されていません。RelativeLayoutを使用する方法は知っていますが、ベストプラクティスを使用し、ConstraintLayoutのみを使用したいと思います。

外観の例を次に示します(クラウドアイコンとテキストの最後のバックアップ)

enter image description here

4
kosas

app:layout_constraintTop_toTopOfapp:layout_constraintBottom_toBottomOfを一緒に使用するだけで、TextViewの中央がImageViewに垂直に整列します。

<ImageView
    Android:id="@+id/imageView"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:src="@mipmap/ic_launcher"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="16dp"
    Android:text="Last Backup"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    />
10
Hong Duan

このようにTextViewにdrawableを残して使用し、必要に応じてルートgravitylayoutを変更します

<TextView
     Android:layout_width="match_parent"
     Android:layout_height="wrap_content"
     Android:drawablePadding="15dp"
     Android:drawableLeft="@drawable/google"
     Android:text="@string/textGoogle" />
3
Sandeep Parish

ConstraintLayoutを使用するのと同じように行うことができます:

Textviewの上部と下部の制約をImageViewの上部と下部に設定します。これらの制約により、TextViewがImageViewの中央に設定されます。

<?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.support.v7.widget.AppCompatImageView
    Android:id="@+id/imageview"
    Android:layout_width="50dp"
    Android:layout_height="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_icon"/>


 <Android.support.v7.widget.AppCompatTextView
    Android:id="@+id/textview"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="TextView"
    Android:textColor="@Android:color/white"
    Android:textSize="14sp"
    app:layout_constraintStart_toEndOf="@+id/imageview"
    app:layout_constraintBottom_toBottomOf="@+id/imageview"
    app:layout_constraintTop_toTopOf="@+id/imageview"/>

</Android.support.constraint.ConstraintLayout>
1
Jaymin

親コンストレイントの端を上下に設定します。これらの制約は、制約の中心を設定しますapp:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"