将图标与搜索栏的顶部对齐

时间:2021-01-15 18:48:40

标签: android android-layout android-constraintlayout android-seekbar

我有一个 Seekbar,上面有 LinearLayout 个图标。我使用 LinearLayout weightsumweight 来对齐每一个,但它们仍然没有完全对齐。

enter image description here

有没有办法对齐它们?

<?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"

对齐它们,但我不喜欢使用 set padding,因为这会导致在添加另一个项目时重新调整 padding。

比如把icon改成6,需要把weightsum改成6,还需要设置padding为-14dp

1 个答案:

答案 0 :(得分: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>

结果:

肖像:

风景

enter image description here