zoukankan      html  css  js  c++  java
  • Android SeekBar 和 draw9patch 的使用

    今天要使用一个SeekBar控件,其实我觉得Android默认样式已经很不错了,无奈设计不同意,而且SeekBar左右两边也有图片,默认样式和图片也确实不协调,因此这里使用图片自定义SeekBar样式,首先上代码:

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:thumbOffset="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="12dp"
        android:thumb="@drawable/device_light_progress_thumb"
        android:progressDrawable="@drawable/device_light_progressbar" />
    android:thumb下的资源就是拖动条的滑块图片,android:thumbOffset的作用是防止thumb滑块不能完全显示,避免被遮挡;
    android:progressDrawable下是自定义拖动条的样式,这里是两张图片,代码如下:
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        
        <item android:id="@android:id/background"   
              android:drawable="@drawable/progressbar_bg" />  
           
        <item android:id="@android:id/progress"  
              android:drawable="@drawable/progressbar_checked">        
        </item>  
    
    </layer-list>

    其中@android:id/background是指滑块未拖动时,拖动条显示的图片;

    @android:id/progress是指拖动滑块后,滑块前面的部分所显示的图片;

    SeekBar的使用大概就是这样,以后再遇到这方面的问题我再来补充,下面说说draw9patch。

    之所以说draw9patch是因为progressbar_bg和progressbar_checked两张图片在配置SeekBar时,出现图片过长,右侧没有结束的圆弧,而直接是一个切面,因此可以看出图片的长度没有收缩,这里首先想到的就是使用SDK-tools中的draw9patch工具将两张图片制作成9图,主要过程包括两个阶段:

    第一:

    考虑到SeekBar的滚动条宽度较小,大约只有5-10个像素,因此第一次制作时只是将图片在横向上做成可以拉伸和收缩,纵向未作处理。将图片导入drawable-h,经调试发现,图片在在上方显示有黑边,而且图片右侧还是切面,可以知道这张图片仍然没有收缩;

    经过查找资料,发现是自己没有搞清楚draw9patch制作9图的机制,即上下左右约束的都是什么:

    左边 是垂直方向可以伸缩的区域
    上边 是水平方向可以伸缩的区域
    右边 是垂直方向的内容区域
    下边 是水平方向的内容区域

    (下边和右边为图片内容的padding值)

    必须高和宽都加上约束,如果只有高或者只有宽添加约束,仍然会有黑线。

    另外,设置黑线时,点不能断,否则9patch图片会按照普通图片进行显示。

    在弄清楚原理之后,将纵向也进行draw9patch处理,经调试,SeekBar右侧也显示了圆弧,即图片适配正常。

    第二:

    然后我将progressbar_checked这张图片也进行了同样的处理,即拖动滑块后的图片也制作成9图。导入应用后,SeekBar的显示反而出错了,即未拖动滑块时,整个SeekBar已经显示为progressbar_checked的图片样式,好像已经拖动到底一样。这个错误让我很不理解,progressbar_checked.png未改为9图时能够正常显示,在改为9图后反而出错了,在将progressbar_checked替换为原来的图片之后,应用又恢复正常。

    这里猜测是9图自动适配控件导致的,具体原因还需要继续研究。

     
  • 相关阅读:
    gson Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2 path
    angularjs-$interval使用
    angularjs的页面拆分思想
    桌面工具的分享
    怎么理解高内聚低耦合
    sqlserver 还原数据库
    Sqlserver 读取EXCEL
    Search everything 使用说明
    根据文件大小搜索电脑文件
    一个不错的录屏的软件的分享
  • 原文地址:https://www.cnblogs.com/fansen/p/4885923.html
Copyright © 2011-2022 走看看