web-dev-qa-db-ja.com

クリッピングなしでConstraintLayoutでビューを右に揃える

親のConstraintLayoutに対して2つのボタンが右に並んだダイアログを作成しています。

ボタンのテキストが非常に長くなるまで、すべてが正常です。いずれかまたは両方のボタンのテキストが長い場合、ボタンは親の境界を超えて伸び、下の画像に示すようにテキストがクリッピングされます。テキストが長い場合を処理したいと思います。

つまり、望ましい動作は

  • テキストが長い場合、ボタンはテキストを折り返す必要があります
  • ボタンは親の境界内にとどまり、親のパディングに従う必要があります
  • ボタンは親の右側に揃えておく必要があります

ボタンのテキストが短い場合、レイアウトは意図したとおりに機能します：

enter image description here

ボタンのテキストが長い場合：

  • キャンセルボタンのテキストが長い場合、キャンセルテキストは切り捨てられます。これは、ボタン自体が親の境界を超えてプッシュされているために発生しています。 enter image description here
  • ボタンが親の境界を超えてプッシュされるため、[OK]ボタンのテキストが長い場合、親の境界を超えてプッシュされたテキストをキャンセルします。 enter image description here

レイアウトコード

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:paddingBottom="@dimen/dialog_padding"
    Android:paddingLeft="@dimen/dialog_padding"
    Android:paddingRight="@dimen/dialog_padding"
    Android:paddingTop="@dimen/dialog_padding">

    <TextView
        Android:id="@+id/dialog_title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/dialog_text_margin"
        tools:text="Dialog title" />

    <TextView
        Android:id="@+id/dialog_content"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="@dimen/dialog_text_margin"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        tools:text="Dialog text content" />

    <Button
        Android:id="@+id/cancel_btn"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/ok_btn"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Dismiss" />

    <Button
        Android:id="@+id/ok_btn"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Accept" />
</Android.support.constraint.ConstraintLayout>

私が役に立たなかったもの：

  • [キャンセル]ボタンにapp:layout_constraintStart_toStartOf="parent"を追加すると、ボタンが正しく配置されなくなり、ソリューションが正しくなくなります
  • 却下ボタンの終了を承認ボタンの開始に制限すると、ボタンが右に整列しなくなります
  • ボタンにlayout_width="0dp"を使用し、app:layout_constrainedWidth="true"を使用しても効果がありません
androidandroid-layoutandroid-constraintlayoutconstraint-layout-chains
5
VIN

以下は、あなたが達成しようとしていることのスクリーンショットです。

まず、いくつかの短いテキストで：

enter image description here

長いテキストがあります：

enter image description here

私はレイアウトにいくつかの自由を取り、ボタンが制限される幅の33％でガイドラインを導入しました。ボタンを水平方向にどれだけ拡張できるかを指定しなかったので、この仮定をしました。

このレイアウトのXMLは次のとおりです。ボタンの幅を0dpまたはmatch_constraintsに設定して、サイズを調整します。ボタンは、2つのボタンをグループ化するpackedチェーンにも配置されています。水平バイアスは0.5に設定されていますが、それを大きくすると、左に忍び寄ってきた場合にグループが右に移動します。

ConstraintLayoutドキュメント には、これらの機能とそれらの使用方法についての適切な説明があります。

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

<TextView
    Android:id="@+id/dialog_title"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="@dimen/dialog_text_margin"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Dialog title" />

<Button
    Android:id="@+id/cancel_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/ok_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/dialog_title"
    tools:text="Dismiss" />

<Button
    Android:id="@+id/ok_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/cancel_btn"
    app:layout_constraintTop_toTopOf="@+id/cancel_btn"
    tools:text="Accept" />
8
Cheticamp