ConstralintLayoutでセンタリングしつつ他のViewとかぶらせない

Question

前提・実現したいこと

ImageView と TextView だけのシンプルなレイアウトです。
TextView は parent の中央に配置します。
ImageView は TextView の左に配置します。
TextViewは1行のみ、長い場合は「...」で省略します。

以下のようなレイアウトを作成し、いったんはうまくいきました。

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="textString"
            type="String" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/btn_star_big_on"
            tools:layout_editor_absoluteX="13dp"
            tools:layout_editor_absoluteY="18dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@{textString}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="センタリング" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

発生している問題、試したこと

TextView に設定する文字列が長い場合、左に設置した ImageView と TextViewが重なってしまいます。
そのため、TextView を app:layout_constraintStart_toStartOf="parent" としていたのを
app:layout_constraintStart_toEndOf="@id/imageView" としたところ、文字列が長くてもImageViewとは重ならなくなりました。
しかしながら、これでは文字列が短い場合に、親の中央ではなく、ImageViewのサイズ分 右にずれてしまいます。

Barrier を使って、textViewのstart位置を parentや barrierにしてみましたが、結果変わらずでした。

右にImageViewと同じサイズのViewを設置し、その中でセンタリングすれば中央に表示されますが、今回 TextView は右端（マージンはありますが）まで伸ばしたいのです。

知りたいこと

TextViewは親のセンターに設置しつつ、文字列が長くなった場合は左に設置したViewに重ならないようにするにはどうすればいいでしょうか。
XMLだけでは無理でしょうか。

補足情報（FW/ツールのバージョンなど）

Android Stduio 3.6
targetSdkVersion 29
constraintlayout:1.1.3

Answer 1

以下のようにして解決しました。
XML側で

• Imageと同サイズのSpaceを右端にも配置
• DataBinging の varibale に Spaceのvisibleを切り替えるための変数を追加

そしてKotlinコード側で TextView が省略されている場合は Spaceを非表示にしました。

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <import type="android.view.View" />

        <variable
            name="textString"
            type="String" />

        <variable
            name="spaceVisible"
            type="Boolean" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="@dimen/image_size"
            android:layout_height="@dimen/image_size"
            android:layout_marginStart="@dimen/image_margin"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/btn_star_big_on"
            tools:layout_editor_absoluteX="13dp"
            tools:layout_editor_absoluteY="18dp" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="12dp"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="1"
            android:text="@{textString}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/space"
            app:layout_constraintStart_toEndOf="@id/imageView"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="センタリング" />

        <Space
            android:id="@+id/space"
            android:layout_width="@dimen/image_size"
            android:layout_height="@dimen/image_size"
            android:layout_marginEnd="@dimen/image_margin"
            android:visibility="@{spaceVisible ? View.VISIBLE : View.GONE}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        binding.textString = "長い長い長い長い長い長い長い長い長い長い文字列"
        binding.textView.treeObserver {
            if (it.layout.getEllipsisCount(0) > 0 ) {
                binding.spaceVisible = false
            }
        }

        binding.spaceVisible = true
    }

    fun TextView.treeObserver(callback: (textView: TextView) -> Unit) {
        val listener = object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                callback(this@treeObserver)
                viewTreeObserver.removeOnGlobalLayoutListener(this)
                return
            }
        }
        viewTreeObserver.addOnGlobalLayoutListener(listener)
    }

Comments

[jimbe]

ありがとうございました.

Answer 2

ご提示の ConstralintLayout によるセンタリングは, (上下)左右の隙間を均一にすることによって "結果的に" センタリングされているということですので, 条件によって隙間(の制約)を変えるには, 何某かのコードが必要になるように思います.

Comments

[rkrd]

回答ありがとうございます。

なるほどConstralintLayoutのセンタリングはたしかにそうですね。
では、ConstralintLayoutを諦めて、RelativeLayoutで明示的にCenterに寄せた場合はどうでしょうか。
以下試して見ました。

```XML
<?xml version="1.0" encoding="utf-8"?>
<layout 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">

<data>

<variable
name="textString"
type="String" />
</data>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main2Activity">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
app:srcCompat="@android:drawable/btn_star_big_on"
tools:layout_editor_absoluteX="13dp"
tools:layout_editor_absoluteY="18dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:ellipsize="end"
android:maxLines="1"
android:text="@{textString}"
android:layout_centerInParent="true"
tools:text="センタリング" />
</RelativeLayout>
</layout>
```

これだと、ConstralintLayoutと同じで長い文字列で ImageView と TextViewが重なりました。

TextViewに `android:layout_toRightOf="@id/imageView"` を追加したら重ならなくなったものの、
`android:layout_centerInParent="true"`が効かなくなったのか ImageViewの横に表示されます。
TextView をmatch_parent にして gravitiyを centerにしたら、ConstralintLayoutと同じでImageView分中心からずれます。

ConstralintLayout以外でもXMLのみでは無理ということでしょうか。

[jimbe]

> ConstralintLayout以外でもXMLのみでは無理ということでしょうか
すいませんが, Layout の仕様・使用方法に詳しいわけではありません.
何を用いれば・どこまで出来るかを調査するつもりはありませんので, 追加回答は出来ません.
「私だったらテキトウに ViewGroup を作って対応するかもしれません」ということでご勘弁願います.

[rkrd]

ありがとうございます。

今回は、右端にも左のImageViewと同サイズの Space を設置してセンタリングし、TextView が長い場合のみSpaceのVisibilityを変えることで対応しました。

[jimbe]

もし宜しかったら, その辺りのコードやレイアウトを自己回答としてご提示頂いて, そちらをBAにされては如何でしょうか.
同じようなレイアウトを作ろうという方にはそのほうが有用な情報かと思います.

[rkrd]

そうですね。

自己回答を追記しました。ご指摘ありがとうございます。

Answer 3

ちょうどやろうとしていた内容と合致していたのでBAが参考になりました。
通常のViewの場合はこれで問題ないですが、RecyclerViewのアイテムだとonGlobalLayoutに来てもまだlayoutがnullの場合が多く、結局、postDelayedでnullではなくなるまで投げ続けるようにして、解決できました。

private fun layoutTextViewEllipsized(){
  binding.textView.postDelayed( {
    if(binding.textView.layout==null){
      layoutTextViewEllipsized()
      return@postDelayed
    }
    if (binding.textView.layout.getEllipsisCount(0) > 0 ) {
      binding.spaceVisible = false
    }
  }, 500)
}