79

バックグラウンド

Google は、「ConstraintLayout」と呼ばれる新しいレイアウトを発表しました。これは究極のレイアウトであり、すべてのレイアウトをフラットなまま (ネストされたレイアウトなしで) 置き換え、パフォーマンスを向上させることができます。

問題

つまり、Google IO で提示されたビデオを除いて、この問題に役立つチュートリアルはほとんどありません。

私がやろうとしているのは、別のレイアウト内に垂直方向に中央揃えされた LinearLayout があることを考えると、両方を単一の ConstraintLayout に変換することです。

結局のところ、これがこの新しいレイアウトの目的です...

私が扱いたいレイアウトは次のようになります。

ここに画像の説明を入力

中央のビューは垂直方向にのみ中央に配置され、2 つの textView は ImageView の右側にあり、これも垂直方向に中央に配置されていることに注意してください。

これはすべて、2 つの TextView の LinearLayout を持つ RelativeLayout でうまく機能しますが、それらを単一の ConstraintLayout に変換する方法を知りたいです。

以下は、私が示したもののサンプル XML です。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="wrap_content"
    android:minHeight="?attr/listPreferredItemHeightSmall">

    <ImageView
        android:id="@+id/appIconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/appDetailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/appIconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/appIconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical">

        <TextView
            android:id="@+id/appLabelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/appDescriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"

        tools:src="@drawable/ic_more_vert_black_24dp"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/isSystemAppImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/ic_warning_black_24dp"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_warning_black_24dp"/>

</RelativeLayout>

私が試したこと

私はいくつかの記事を読み、いくつかの Google のビデオを見ようとしました :

それは役に立たなかったので、自分で使い方を見つけたいと思って使ってみました。しかし、私はそれを行う方法を見つけることができません。この機能を使用してレイアウトを変換しようとしましたが、これによりビューが大幅に混乱し、不要なマージンが追加されます。

質問

2 つのレイアウトを単一の ConstraintLayout に変換するにはどうすればよいですか?

4

5 に答える 5

110

ここで私の答えを見てください。

ContraintLayout機能が含まれています - Chains- あなたが求めているものを実装することを可能にします:

チェーンは、単一の軸 (水平または垂直) でグループのような動作を提供します。

ウィジェットのセットは、双方向接続を介してリンクされている場合、チェーンと見なされます

チェーンが作成されると、次の 2 つの可能性があります。

  • 使用可能なスペースに要素を広げます
  • チェーンは「パック」することもできます。その場合、要素はグループ化されます

あなたのケースに関しては、 TextViews と TextViews をパックlabelし、descriptionそれらを親の垂直方向の中央に配置する必要があります。

ConstraintLayout(チェーンをサポートする のバージョンを使用していることを確認してください)

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


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button\nMkay"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>

更新 25-06-2019 ( @Saeid Z ):

制約レイアウト 1.1.3app:layout_constraintHorizontal_chainStyle="packed"では、代わりに使用する必要があります。app:layout_constraintVertical_chainPacked="true"

于 2016-10-18T07:38:56.010 に答える
5

編集: この回答は、チェーンが利用可能になる前に書かれていました。今すぐチェーンを使用してください。上記の回答を参照してください: https://stackoverflow.com/a/40102296/1402641


今のところ、2 つのテキスト ビューを別のレイアウトでラップすることが唯一の選択肢になると思います。おそらく線形レイアウトがこの状況に最も適しています。

しかし、制約レイアウトの背後にあるチームは、まさにこのユースケースに役立つ「仮想コンテナー」を導入したいと述べました。2 つ以上のビューをグループ化し、コンテナーに制約 (垂直方向の中央揃えなど) を設定します。これは、制約レイアウト内に完全にネストされたレイアウトではなく、制約レイアウトが子を配置するために使用するものにすぎないという考え方です。したがって、ネストよりもパフォーマンスが向上するはずです。

彼らはI/O トークでそれについて言及しています (正確な時間にリンクされています)。だから私はお楽しみにと思います。

于 2016-06-02T17:10:48.233 に答える
2

私の例を見てください(ConstraintLayout の Center components

今のところ、「画像」を中央に配置し (左上下部を制限)、「ラベル」を上部を「画像」の上に制限し、「説明」を上部を「ラベル」の下に制限することができます。以下の例では、ボタンの高さを右側の2つのテキストビューと一致させています(これはあなたの場合です)。他のテキストビューは、上記のリンクのように制限されています。

ここに画像の説明を入力

更新: 以下のコメントへの回答:

私はあなたのアプリをインストールしましたが、これは私が現在考えることができる唯一のものです. ViewHolder レイアウトなので、layout_height を wrap_content に設定するか、必要に応じて修正できます。必要に応じて xml を送信できますが、回答をあふれさせたくありません。

上 TextView の左の制約は、ImageView の右の制約に制約されます。また、top TextView -> top 制約はコンテナーの上部に制約されるため、正しいです。Bottom TextView はコンテナーの下部に制限されます。中央の TextView は、上部の TextView の幅に一致するように制約されており、ImageView とは接続されていません。

ここに画像の説明を入力

于 2016-06-09T10:06:31.033 に答える