将图标对齐到 Seekbar 的顶部

Question

我有一个 Seekbar，上面有 LinearLayout 个图标。我正在使用 LinearLayout weightsum 和 weight 来对齐每一个，但它们仍然没有完全对齐。

有没有办法对齐它们？

<?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="wrap_content"
    android:background="@color/colorWhite"
    android:orientation="vertical">


    <LinearLayout
        android:id="@+id/test_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="5"
        app:layout_constraintEnd_toEndOf="@+id/seekbar"
        app:layout_constraintStart_toStartOf="@+id/seekbar"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />
    </LinearLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="4"
        android:theme="@style/Widget.AppCompat.SeekBar.Discrete"
        android:thumb="@drawable/ic_black_navigation_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_layout"
        app:layout_constraintWidth_percent="0.8" />


</androidx.constraintlayout.widget.ConstraintLayout>

编辑：

我知道您可以使用

android:paddingStart="-16dp"
android:paddingEnd="-16dp"

对齐它们，但我不喜欢使用固定填充，因为这会导致在添加另一个项目时重新调整填充。

比如把icons改成6，需要把weightsum改成6，还需要把padding设置成-14dp。

Answer 1

用LinearLayout很难保持这个，所以我用ConstraintLayout代替，并用Guidelines把宽度分成4等份，然后你可以对齐图像这些指南.. 这将在不同的设备宽度和屏幕方向上保持一致

<?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="wrap_content"
    android:background="@color/colorWhite"
    android:orientation="vertical">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/test_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="@+id/seekbar"
        app:layout_constraintStart_toStartOf="@+id/seekbar"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/iv0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="4dp"
            android:paddingLeft="4dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.25" />

        <ImageView
            android:layout_width="wrap_content"
            android:paddingStart="16dp"
            android:paddingLeft="16dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@+id/guideline1"
            app:layout_constraintEnd_toEndOf="@id/guideline1"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="@id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.75" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="16dp"
            android:paddingRight="16dp"
            app:layout_constraintEnd_toEndOf="@id/guideline3"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="4dp"
            android:paddingRight="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="4"
        android:theme="@style/Widget.AppCompat.SeekBar.Discrete"
        android:thumb="@drawable/ic_black_navigation_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_layout"
        app:layout_constraintWidth_percent="0.8" />

</androidx.constraintlayout.widget.ConstraintLayout>

结果：

纵向：

横向

将图标对齐到 Seekbar 的顶部

Aligning icons to the top of a Seekbar

android

android-layout

android-constraintlayout

android-seekbar