使用谷歌材质库的android垂直滑块

Answer 1

        <FrameLayout
            android:layout_width="32dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:orientation="vertical">

            <com.google.android.material.slider.Slider
                android:id="@+id/sldPenWidth"
                android:layout_width="200dp"
                android:layout_height="32dp"
                android:layout_gravity="center"
                android:rotation="270"
                android:value="1"
                android:valueFrom="0.1"
                android:valueTo="10" />

        </FrameLayout>

将 attr

android:rotation

值设置为

270

，然后将其放入 FrameLayout

Answer 2

现在我有这样的东西：

class VerticalSlider @JvmOverloads
constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
    init {
        rotation = 270f
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
    }
}

我还是得把它包起来：

   <FrameLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent">

       <....VerticalSlider
            style="@style/InstSliderWhiteMatchWrap"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:value="100"
            app:haloRadius="15dp"
            app:thumbRadius="9dp" />

    </FrameLayout>

我对 haloRadius 有问题，必须将其设置为较低的值才能不显示硬线，看起来布局边距没有正确考虑，我尝试了无数的东西...否则对我来说这种方式更具可读性和可重用性.

Answer 3

我使用了以下代码（kotlin） 它可以工作，但是滑块上方的值仍然显示在水平位置

我刚刚禁用了它，但我想如果我花更多时间它可以修复

class VerticalSlider @JvmOverloads
constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
    : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
    
    
    override fun onDraw(c: Canvas) {
        c.rotate(270f)
        c.translate(-height.toFloat(), 0f)
        super.onDraw(c)
    }
    
    
    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(h, w, oldh, oldw)
    }
    
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
        setMeasuredDimension(measuredHeight, measuredWidth);
    }
    
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        
        if (!isEnabled) {
            return false
        }
        when (event.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
                onSizeChanged(width, height, 0, 0)
                super.onTouchEvent(MotionEvent.obtain(event.downTime, event.eventTime, event.action,
                    height.toFloat() - event.y, event.x, event.pressure, event.size, event.metaState,event.yPrecision,event.xPrecision, event.deviceId, event.edgeFlags))
            }

            MotionEvent.ACTION_CANCEL -> {}
        }
        return true
    }
    
}
enter code here

可以这样使用

<yourPakage.VerticalSlider
                android:id="@+id/verticalSlider"
                android:layout_width="0dp"
                android:layout_height="0dp"

                app:labelBehavior="gone"

                android:layout_marginTop="@dimen/dp_4"
                android:layout_marginBottom="@dimen/dp_4"
                app:layout_constraintBottom_toTopOf="@+id/textSliderValue"
                app:layout_constraintStart_toStartOf="@+id/sliderMark"
                app:layout_constraintTop_toBottomOf="@+id/sliderMark"
                app:layout_constraintEnd_toEndOf="@+id/sliderMark" />