Android - 自定义 SeekBar - 进度条上的圆角

标签 android rounding android-seekbar

尝试制作自定义 SeekBar。我想实现这一目标。

enter image description here

到目前为止我所做的就是这个。我找不到在进度条上圆角的方法。

enter image description here

有人可以帮忙吗?这是我的代码

main_activity.xml

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:gravity="center">

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="30dp"  
        android:progressDrawable="@drawable/styled_progress"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:progress="90"
        android:thumb="@drawable/thumbler_small"
        android:maxHeight="30dp"
        android:layout_marginTop="125dp" 
        android:layout_marginBottom="15dp" 
        android:indeterminate="false" />

</LinearLayout>

styled_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">
    <shape> 
        <gradient
                android:startColor="#d2e5ff"
                android:endColor="#d2e5ff"
                android:angle="45"
        />
        <corners 
                android:bottomRightRadius="7dp" 
                android:bottomLeftRadius="7dp" 
                android:topLeftRadius="7dp" 
                android:topRightRadius="7dp"/> 
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <gradient
                    android:startColor="#808080"
                    android:endColor="#808080"
                    android:angle="270"
            />
            <corners 
                android:bottomRightRadius="7dp" 
                android:bottomLeftRadius="7dp" 
                android:topLeftRadius="7dp" 
                android:topRightRadius="7dp"/> 
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#c5e6eb"
                android:endColor="#61cabb"
                android:angle="45" />
             <corners 
                android:bottomRightRadius="7dp" 
                android:bottomLeftRadius="7dp" 
                android:topLeftRadius="7dp" 
                android:topRightRadius="7dp"/> 
        </shape>

    </clip>
</item>
</layer-list>

最佳答案

you can see the image here

这个 sulotion 是我能做到这一点的唯一方法。 希望这有帮助

这是我的搜索栏:

         <SeekBar
            android:id="@+id/simpleProgressBar"
            android:layout_width="fill_parent"
            android:layout_height="12dp"
            android:max="100"
            android:progress="0"
            android:background="@null"
            android:shape="oval"
            android:splitTrack="false"
            android:progressDrawable="@drawable/progress_background"
            android:secondaryProgress="0"
            android:thumbOffset="10dp"
            android:thumb="@drawable/oval_seekbar_thumb" />

这是(progress_background.xml):

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="5dp" />

        <gradient
            android:angle="270"
            android:endColor="@color/grey_line"
            android:startColor="@color/grey_line" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape android:shape="oval">
            <corners android:radius="5dp" />
            <gradient
                android:angle="270"
                android:endColor="@color/blue"
                android:startColor="@color/blue" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="90dp" />

            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryDark"
                android:startColor="@color/colorPrimary" />
        </shape>
    </clip>
</item>

这是拇指(oval_seekbar_thumb.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
            <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/>
            <size android:height="12dp" android:width="12dp"/>
        </shape>
    </item>
</selector>

拇指的高度应与搜索栏的高度相同才能正常显示。

关于Android - 自定义 SeekBar - 进度条上的圆角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32807101/

相关文章:

SQL 从 3 位小数舍入到 2 位小数

c++ - 在 C++ 中使用不同的 IEEE 浮点舍入模式

android - 如何删除已设置自定义进度可绘制的搜索栏 [android] 的默认指示器图标

android - 在搜索栏中的两个连续进度点之间添加流畅的动画

android - Android 中的 RatingBar 的 Onclick 属性不起作用

java - 按一个字段对 ArrayList<Hashmap<String,String> 进行排序

c# - 为什么返回 C# Convert.ToDouble(5/100) 0.0 而不是 0.05

android - 循环 ViewPager。 Fragments 在第一轮后无法正常工作

java - 如何通过 JNI 设置 Java 类的 Double/Integer 类型的值

Android:带有自定义可绘制对象的 SeekBar