iT邦幫忙

0

Android Studio UI排版問題: ImageView圖片縮放後TextView文字位置跑掉

  • 分享至 

  • xImage

https://ithelp.ithome.com.tw/upload/images/20210106/20123386DReyZVKj7o.jpg

https://ithelp.ithome.com.tw/upload/images/20210106/20123386lYO4sxsEms.jpg

Android APP新手問題:
如圖片中狀況, 當回傳資訊內容超過一排的時候會擠壓下方ImageView的大小, ImageView縮放改變後TextView會跑掉, 無法維持ImageView縮放後的位子移動.
嘗試了多種Layout依然無法讓四個TextView固定在H型的四個角.

目前階層關係是:

linearlayout(分隔線)
linearlayout
    btn_1
    btn_2
    btn_3
linearlayout(分隔線)
ConstraintLayout
    ConstraintLayout
        ImageView
        TextView_1
        TextView_2
        TextView_3
        TextView_4
    linearlayout
        linearlayout
            btn_1
            btn_2
            btn_3
        linearlayout
            ....

Code:

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/linearLayout4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:scaleType="centerInside"
                android:src="@drawable/chair"
                android:visibility="visible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/textview_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"


                android:text="0"
                android:visibility="visible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.28"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.101" />

            <TextView
                android:id="@+id/textview_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:layout_marginBottom="16dp"
                android:layout_weight="1"
                android:gravity="center_horizontal|center_vertical"
                android:text="0"
                android:visibility="visible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.28"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0" />

            <TextView
                android:id="@+id/textview_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:layout_weight="1"
                android:gravity="center_horizontal|center_vertical"
                android:text="0"
                android:visibility="visible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.702"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.101" />

            <TextView
                android:id="@+id/textview_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:layout_weight="1"
                android:gravity="center_horizontal|center_vertical"
                android:text="0"
                android:visibility="visible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.702"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.898" />

        </androidx.constraintlayout.widget.ConstraintLayout>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
evanchen
iT邦新手 2 級 ‧ 2021-01-06 19:10:15

你的需求是:四個TextView固定在H型的四個角。

試試看把這4個TextView要用ImageView來當作Constraint條件約束的對象(你的Code是對齊parent)。

例如TextView要維持在ImageView的左上。
app:layout_constraintBottom_toTopOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/imageView"

picross iT邦新手 5 級 ‧ 2021-01-06 21:08:08 檢舉

我有嘗試這樣過, TextView四個點對ImageView後會先跑到ImageView中心點, 然後再手動拉到H的角落.
但ImageView大小改變後就又會偏移, 仍然沒辦法解決

我要發表回答

立即登入回答