将图标对齐到 Seekbar 的顶部
Aligning icons to the top of a Seekbar
我有一个 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
。
用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
,上面有 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
。
用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>
结果:
纵向:
横向