5

我正在尝试为我的 Android 应用程序创建一个自定义搜索栏。我找到了很多解决方案,但它们都使用“自定义”绘图代码作为背景。我的搜索栏很简单——我有一张图片(只有一张)作为背景,一张图片作为拇指。我遇到的问题是缩放:我希望“拇指”和“背景”图像都根据搜索栏控件的大小进行缩放。怎么做?有趣的是,当使用图像(可绘制对象)作为背景/拇指时,Android 默认不会缩放它们,而是将它们保留为原始大小:)

4

2 回答 2

6

您可以制作拇指的前景、背景和滑块。

这是一个很好的教程:

教程 2

以下是制作自定义 9.png 图像的方法:

九补丁

于 2013-10-07T13:40:40.333 回答
2

1 您可以使用 xml ( progress.xml ) 来定义 ProgressBar 的外观并将其放在 res 目录中。

2 可以在声明 ProgressBar 的布局内定义拇指。

3 拇指可以是图像(imgthumb.png),但我注意到2 个最佳实践

  1. 最佳拇指高度是ProgressBar高度2.5
  2. 拇指图像的高度和宽度与拇指的直径完全相同(即圆形拇指)时,最好渲染它,最后,在每个桶中放置不同大小的拇指以实现不同的像素密度

这里是来源

1 进度.xml

<?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 android:shape="rectangle" >
        <corners android:radius="5dp" />

        <gradient
            android:angle="270"
            android:endColor="#cccccc"
            android:startColor="#d3d3d3" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="0dp" />

            <gradient
                android:angle="270"
                android:endColor="#ff0000"
                android:startColor="#ff0000" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="270"
                android:endColor="#1dc0ff"
                android:startColor="#1dc0ff" />
        </shape>
    </clip>
</item>

2 使用自定义拇指在布局中定义 Seekbar

<SeekBar
        android:id="@+id/song_seekbar"
        android:layout_width="0dp"
        android:layout_weight=".84"

        android:minHeight="8dip"
        android:maxHeight="8dip"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"
        android:layout_centerInParent="true"

        android:progressDrawable="@drawable/progressbar"
        android:thumb="@drawable/imgthumb" />

希望这对你有帮助!

于 2015-06-23T17:15:44.637 回答