解决SeekBa的Thumb中心点不在起始位置上的问题

seekbar这玩意儿在app中也算是不少见了,尤其是音乐播放器,视频播放器等。但是有时候细节上的问题还是挺让对这个控件不熟悉的扎心的。
先上一下期望的效果图
这里写图片描述
嗯,看着挺简单的,不就是seekbar,然后设置一个Thumb么,实际也是挺简单的。
那么我们先在xml中创建一个SeekBar

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

看看预览效果
这里写图片描述

哇塞,感觉就跟真的一样的,换个图片,设置一下颜色不就出效果了么,如此简单,那么接下来就设置一下颜色和加图片吧。

<?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="1dp"/>
            <solid android:color="@color/text_gray"/>
            <size android:height="1dp"/>
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="1dp"/>
                <solid android:color="@color/colorPrimary"/>
                <size android:height="1dp"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="1dp"/>
                <solid android:color="@color/colorPrimary" />
                <size android:height="1dp"/>
            </shape>
        </clip>
    </item>

</layer-list>
<SeekBar
   android:id="@+id/seekBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/common_bg"
   android:progressDrawable="@drawable/bg_audio_progress"
   android:thumb="@mipmap/icon_audio_thumb"
   android:progress="50"
   />

效果一出来,咿,咋这么粗了
这里写图片描述
查阅资料才发现需要设置一下android:maxHeight=”1dp”

这里写图片描述

哈哈,似乎已经成功了,不对,Thumb衔接出出现断裂,两端短了一点,实际宽度,应该是到两头的。

百度了一番,别人是这么设置的:

<SeekBar
   android:id="@+id/seekBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/common_bg"
   android:progressDrawable="@drawable/bg_audio_progress"
   android:thumb="@mipmap/icon_audio_thumb"
   android:progress="50"
   ndroid:thumbOffset="0dp"
   android:paddingStart="0dp"
   android:paddingEnd="0dp"
   android:splitTrack="false"
   />

看下效果
这里写图片描述

好像是这么回事哈, 左边不到头,把android:progress=”0”试试
这里写图片描述

好像并没有什么软用,,这下尴尬了,是不是android:thumbOffset=”0dp”这个不起作用啊
百度Goole了好久,硬是没发现问题,然后想着,,,把ThumbOffset设置成负数试试,
ndroid:thumbOffset=”-10dp”,
效果图
这里写图片描述

这下尴尬了。。。。。。。。
然后我一气之下,,把android:thumbOffset=”0dp”删掉了。。。删掉了。。。删掉了。
这里写图片描述
幸福来的太突然。。。。Thumb图标居然往左动了。。。动了。。。动了
可是跑出去了一半,那是不是把paddingStart 和paddingEnd设置一下大小为Thumb的半径不就好了,兴奋的赶紧去试试。

<SeekBar
   android:id="@+id/seekBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/common_bg"
   android:progressDrawable="@drawable/bg_audio_progress"
   android:thumb="@mipmap/icon_audio_thumb"
   android:progress="50"
   android:paddingStart="7dp"
   android:paddingEnd="7dp"
   android:splitTrack="false"
   />

这里写图片描述

大功告成,,兴奋的想抱抱自己。同时反思自己,拷贝需谨慎,
下一篇就一起来探索一下关于SeekBar的源码,这样以后就不会掉坑了

发布了8 篇原创文章 · 获赞 40 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览