优雅实现垂直SeekBar：不继承Seekbar、不自定义View

<?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:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:paddingStart="0dp"
            android:paddingEnd="0dp"
            android:progressDrawable="?attr/UISeekBarProgressDrawable"
            android:rotation="270"
            android:thumb="@null" />
    </FrameLayout>

    <View
        android:id="@+id/icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

首先，我们可以看到未硬编码任何数据，我知道你想拿270反驳我，但这不就是需求设计如此嘛。

1.1.1 套一层FrameLayout

1）SeekBar旋转270°后会存在尺寸问题，需要套一层FrameLayout，且FrameLayout的宽、高与SeekBar相反，为SeekBar的高、宽，SeekBar也需要指定layout_gravity为center；

2）我们发现XML中两者的宽、高都是使用match_parent，是为了让用户客制化尺寸，我们在代码中根据外部使用处的宽、高会进行动态修改。

1.1.2 SeekBar去除左右间距

SeekBar左右存在默认Padding，设置paddingHorizontal为0未生效，需要设置paddingStart和paddingEnd为0.

1.1.3 SeekBar高度无法设置

需要同时设置minHeight、minWidth、maxHeight、maxWidth，值为宽与高的最小值，因为未硬编码，所以需在代码中实现。

1.1.4 SeekBar背景设置

通过自定义属性UISeekBarProgressDrawable，根据主题指定相应drawable，可做到随主题切换。背景文件ui_seekbar_vertical_bg.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="32dp" />
            <stroke
                android:width="2dp"
                android:color="#3A4266" />
            <solid android:color="#323A60" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="32dp" />
                <solid android:color="#6E779C" />
            </shape>
        </clip>
    </item>
</layer-list>

1.1.5 底部View尺寸和距底部距离不硬编码

1）宽度占比一半实现：通过指定宽高为0，设置layout_constraintDimensionRatio="1:1"，layout_constraintWidth_percent="0.5"，以及左右对齐；

2）距底部距离，因为未硬编码，所以需在代码中实现。

1.2 自定义样式属性与主题

1.2.1 自定义样式属性

    <declare-styleable name="SeekBarVertical">
        <attr name="UISeekBarProgress" format="integer" />
        <attr name="UISeekBarMax" format="integer" />
        <attr name="UISeekBarIcon" format="reference" />
        <attr name="UISeekBarProgressDrawable" format="reference" />
    </declare-styleable>

1.2.2 自定义主题指定属性

    <!--应用Theme主题-->
    <style name="DefaultAppTheme" parent="android:Theme.Black.NoTitleBar.Fullscreen">
        <item name="UISeekBarProgressDrawable">@drawable/ui_seekbar_vertical_bg</item>
    </style>

1.3 编码实现

package com.agg.ui

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.view.View
import android.widget.FrameLayout
import android.widget.SeekBar
import androidx.constraintlayout.widget.ConstraintLayout

/**
 * Description:
 * CreateDate:     2023/7/11 14:58
 * Author:         agg
 */
class SeekBarVertical : ConstraintLayout {

    lateinit var parentView: ConstraintLayout
    lateinit var seekBar: SeekBar
    lateinit var icon: View

    private var selfWidth: Int = -1
    private var selfHeight: Int = -1
    private var seekBarMinMaxValue: Int = -1
    private var selfProgress: Int = -1
    private var selfMax: Int = -1
    private var iconDrawable: Drawable? = null

    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyle: Int = 0) : super(
        context, attrs, defStyle
    ) {
        attrs?.let { initAttrs(context, attrs) }
        initView()
    }

    /**
     * 代码中动态添加时使用。如：
     *
     * binding.root.addView(SeekBarVertical(this,192,432))
     */
    constructor(context: Context, width: Int, height: Int) : super(context) {
        selfWidth = width
        selfHeight = height
        seekBarMinMaxValue = if (selfHeight < selfWidth) selfHeight else selfWidth
        initView()
    }

    @SuppressLint("ResourceType")
    private fun initAttrs(context: Context, attrs: AttributeSet) {
        // 获取Android原生宽、高属性
        context.obtainStyledAttributes(
            attrs, intArrayOf(android.R.attr.layout_width, android.R.attr.layout_height)
        ).apply {
            selfWidth = getDimensionPixelSize(0, -1)
            selfHeight = getDimensionPixelSize(1, -1)
            seekBarMinMaxValue = if (selfHeight < selfWidth) selfHeight else selfWidth
            recycle()
        }

        // 获取SeekBarVertical自定义属性
        context.obtainStyledAttributes(
            attrs, R.styleable.SeekBarVertical
        ).apply {
            selfProgress = getInt(R.styleable.SeekBarVertical_UISeekBarProgress, -1)
            selfMax = getInt(R.styleable.SeekBarVertical_UISeekBarMax, -1)
            iconDrawable = getDrawable(R.styleable.SeekBarVertical_UISeekBarIcon)
            recycle()
        }
    }

    @SuppressLint("NewApi")
    private fun initView() {
        // 未设置宽高则直接返回
        if (selfWidth < 0 || selfHeight < 0) return

        parentView = View.inflate(context, R.layout.ui_seekbar_vertical, this) as ConstraintLayout

        // 设置控件整体宽、高
        (parentView.findViewById<ConstraintLayout>(R.id.parent).layoutParams as LayoutParams).apply {
            width = selfWidth
            height = selfHeight
        }

        // 设置SeekBar宽、高，以及progress和max值
        seekBar = parentView.findViewById<SeekBar>(R.id.seekbar).apply {
            (layoutParams as FrameLayout.LayoutParams).apply {
                width = selfHeight
                height = selfWidth
            }
            minHeight = seekBarMinMaxValue
            maxHeight = seekBarMinMaxValue
            minWidth = seekBarMinMaxValue
            maxWidth = seekBarMinMaxValue

            if (selfProgress >= 0) progress = selfProgress
            if (selfMax >= 0) max = selfMax
        }

        // 设置icon距离底部位置，以及icon背景
        icon = parentView.findViewById<View>(R.id.icon).apply {
            (layoutParams as LayoutParams).bottomMargin = seekBarMinMaxValue / 4
            iconDrawable?.let { setBackgroundDrawable(it) }
        }
    }

}

1.3.1 对外提供客制化

public修饰放开parentView、seekBar以及icon，让应用开发者可自定义相关属性方法。

1.3.2 支持代码中动态添加使用

提供构造方法constructor(context: Context, width: Int, height: Int)，可在代码中动态使用SeekBarVertical。

1.3.3 布局依赖selfWidth/selfHeight

以selfWidth与selfHeight为基准参考，代码中动态控制SeekBarVertical相关尺寸和位置。

2 使用竖直SeekBar

    <com.metabounds.ui.SeekBarVertical
        android:layout_width="96dp"
        android:layout_height="216dp"/>

可在xml中指定相关属性值

        app:UISeekBarIcon="@drawable/ic_user_head"
        app:UISeekBarMax="12"
        app:UISeekBarProgress="3"

也可在代码中指定

binding.seekBar.icon.setBackgroundResource(R.drawable.ic_user_head)
binding.seekBar.seekBar.max = 12
binding.seekBar.seekBar.progress = 3

代码中动态添加SeekBarVertical

binding.root.addView(SeekBarVertical(this, 96, 216))

3 小结

本文的实现依赖于Android11及以上的rotation属性，如果要兼容低版本Android，还是建议采用方案1的自定义View或方案2的canvas旋转+平移。