[英]Android layout how to horizontal align textView with dynamical width
有 4 個視圖 A (TextView), B(icon), C(TextView), D (TextView) 彼此水平對齊。
B 和 D 具有固定的寬度。 文本將填充在 onBindView() 中。
可以根據屏幕方向計算其父級的寬度。
它需要盡可能多地顯示 A,而 C 將消耗其余部分或直至其內容寬度(如果空間不足,則顯示省略號)。
並且所有 A、B、C、D 都應左對齊前一個的右邊緣。
有幾個案例,但這四個涵蓋了大部分。
1. Parent width is enough for all
|-|AAAA|B|CCCCCCCC|DDD|--------------|-|
2. C is too large and have to show ellipses
|-|AAAAA|B|CCCCCCCCCCCCC...|DDD|-|
3. A is large and have to show ellipse for C to be able to show
|-|AAAAAAA..........|B|CCCCCCCC|DDD|-|
4. the parent width is not enough for showing A and C completely, so A and C both show ellipses
|-|AAAAAAAAAAAAAA...|B|CCCCC...|DDD|-|
所以規則是盡可能多地顯示 A,C 顯示完整或帶有省略號,以防顯示 C 的 minWidth 並且仍然不能完整顯示 A,然后顯示帶有省略號的 A。
嘗試了 LinearLayout、RelativeLayout 和 ConstraintLayout 並不能得到想要的結果。
這對於 A 和 C 有兩個 maxWidth,問題是如果 A 或 C 太小,另一個可能仍然顯示省略號而不使用所有可用空間。
<LinearLayout
android:id="@+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
>
<TextView
android:id="@+id/a_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxWidth="130dp"
android:maxLines="1"
android:textSize="16sp"
android:textStyle="bold"
tools:text="ee" />
<ImageView
android:id="@+id/b_checked"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginStart="3dp"
android:layout_marginEnd="8dp"
android:baselineAlignBottom="true"
app:srcCompat="@drawable/checked" />
<TextView
android:id="@+id/c_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:ellipsize="end"
android:maxWidth="150dp"
android:maxLines="1"
tools:text="aasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa" />
<TextView
android:id="@+id/d_time"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_gravity="left"
tools:text="30 Nov 18"
/>
</LinearLayout>
如果在派生視圖中執行此操作並覆蓋 onMeasure(),則計算不是直接進行的,並且 A、C 寬度可能不會立即可用。
如何僅在布局 xml 中做到這一點,或者有可能嗎?
我不確定這是否符合您的要求,但這是我使用ConstraintLayout
嘗試
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:padding="16dp">
<TextView
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#eee"
android:ellipsize="end"
android:maxLines="1"
android:text="something very very very very very long"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/two"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fixed"
app:layout_constraintBaseline_toBaselineOf="@id/one"
app:layout_constraintLeft_toRightOf="@id/one"
app:layout_constraintRight_toLeftOf="@id/three"/>
<TextView
android:id="@+id/three"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#eee"
android:ellipsize="end"
android:maxLines="1"
android:text="this is pretty short"
app:layout_constraintBaseline_toBaselineOf="@id/one"
app:layout_constraintLeft_toRightOf="@id/two"
app:layout_constraintRight_toLeftOf="@id/four"
app:layout_constraintWidth_default="wrap"/>
<TextView
android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fixed"
app:layout_constraintBaseline_toBaselineOf="@id/one"
app:layout_constraintLeft_toRightOf="@id/three"
app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
這里的重要部分是第一個“可拉伸”視圖使用wrap_content
而第二個使用0dp
加上app:layout_constraintWidth_default="wrap"
。 這將為第一個視圖提供比第二個視圖更高優先級的空間,但將允許兩者增長和縮小。
我發現的唯一問題是,當第一個視圖的文本很長時,它可以將其他視圖推到彼此的頂部。 這可以通過向第一個視圖添加最大寬度來解決:
app:layout_constraintWidth_max="256dp"
一些截圖:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.