Seekbar快速自定义

自定义Seekbar样式

由于最近项目有使用到seekbar,ui提供了几张seekbar的背景图片,做成类似这种效果
在这里插入图片描述
看到这里第一时间想到用seekbar做了,如果考虑用自定义view的形式去做的话估计做出这种渐变效果比较麻烦,最好的办法当然是贴图了,但是在设置seekbar的时候发现无论你怎么贴图片,样子都是不对的,比如:只显示一半或者显示显示超出范围,样子十分丑

后来看了百度了一下发现如果你要设置这种图片作为背景的话需要使用到"9-patch"图,具体"9-patch"的知识点各位自行百度,比较简单
9-patch图自行在Androidstudio可以制作
在这里插入图片描述

XML文件
 <SeekBar
            android:id="@+id/home_seekabr_block"
            style="@style/CustomSeekbarStyle_block"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/qb_px_13"
            android:layout_marginRight="@dimen/qb_px_13"
            android:max="90"
            android:min="0"
            android:splitTrack="false"/>
Style文件
<style name="CustomSeekbarStyle_block">
        <item name="android:maxHeight">@dimen/qb_px_17</item>
        <item name="android:minHeight">@dimen/qb_px_17</item>
        <item name="android:indeterminateOnly">false</item>
        <!--<item name="android:indeterminateDrawable">@color/colorAccent</item>-->
        <item name="android:progressDrawable">@drawable/seekbarbg_block</item>
        <!--<item name="android:background">@drawable/pic_bar_frame</item>-->
        <item name="android:thumb">@mipmap/button_adjust</item>
    </style>
seekbarbg_block
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <nine-patch android:src="@drawable/pic_bar_gray" />
    </item>

    <!--<item

        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/pic_bar_black" />-->

    <item android:id="@android:id/progress">
        <clip>
            <nine-patch android:src="@drawable/pic_bar_gray" />
        </clip>
    </item>

</layer-list>

最后的显示效果是
在这里插入图片描述
效果还可以吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值