Seekbar 给初学者的使用,自定义样式,颜色等等

Seekbar —>继承自ProgressBar 的扩展类

seekbar系统提供的进度条,可以自定义进度条的图片和滑块图片等

常用属性:

  • android:maxHeight 最大高度
  • android:minHeight 最小高度
  • progressDrawable 进度条样式(未滑过 已滑过 缓冲区域)
  • android:thumb 滑块样式
  • android:max 进度最大值,默认是100
  • android:splitTrack 滑块底部 背景样式 (false为透明 )
  • android:secondaryProgress 第二进度 (如 视频缓冲部分)

下图是一个自定义样式的进度条
这里写图片描述

先贴代码

 <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="8dp"
        android:minHeight="8dp"
        android:progress="50"
        android:progressDrawable="@drawable/seekbar_bg"
        android:splitTrack="false"
        android:thumb="@drawable/icon_feiji" />

thumb设置滑块样式
这里写图片描述

progressDrawable 进度条样式 shape样式 seekbar_bg

<?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>
            <corners android:radius="5dp"/>
            <solid android:color="#33000000"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#66000000"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#ffffff" />
            </shape>
        </clip>
    </item>
</layer-list>

常见问题

  1. 禁止拖动
    解决方法:最简单方法将seekbar enable设置为false

  2. 设置thumb滑块,滑动底部不透明
    解决方法: android:splitTrack=”false”

  3. 如图,有需求在进度条写字
    这里写图片描述
    解决方法:重写ondraw,绘制文字

protected synchronized void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  

        Rect rect = new Rect();  
        this.mPaint.getTextBounds(this.text, 0, this.text.length(), rect);  
        int x = (getWidth() / 2) - rect.centerX();  
        int y = (getHeight() / 2) - rect.centerY();  
        canvas.drawText(this.text, x, y, this.mPaint);  

4.待续

猜你喜欢

转载自blog.csdn.net/zane_xiao/article/details/81189667