android 圆角进度条?

ljsrvy3e  于 2023-01-15  发布在  Android
关注(0)|答案(7)|浏览(186)

我正在尝试实现这个进度条设计:

我目前的代码生成了这样的结果:

这是密码:

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

我的进度条:

<ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

我尝试在<clip中的<shape>上添加<size>属性,以使进度形状小一些,但没有效果。另外,进度条是平的,我希望按照设计弯曲。为了实现设计,我需要更改什么?

yquaqz18

yquaqz181#

    • 如何使进度形状小一点?**

您需要给进度项添加一些填充,如下所示:

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">
    • 如何使进度条按设计弯曲?**

<clip></clip>元素替换为<scale android:scaleWidth="100%"></scale>。这将使形状在增长时保持其形状-而不是被切断。不幸的是,它在开始时会有一点不想要的视觉效果-因为形状角没有足够的空间来绘制。但它可能对大多数情况足够好。

    • 完整代码:**
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
 </item>

 <item android:id="@android:id/progress"
    android:top="1dp"
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp">

    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </scale>
 </item>
</layer-list>
qvtsj1bj

qvtsj1bj2#

通过"材料组件库",可以使用**LinearProgressIndicatorapp:trackCornerRadius**属性。
比如:

<com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:trackThickness="xxdp"
        app:trackCornerRadius="xdp"/>

它也适用于删除android:indeterminate="true"或使用android:indeterminate="false"的确定进度指示器

    • 注意:至少需要版本1.3.0**。
njthzxwz

njthzxwz3#

感谢Georgi Koemdzhiev提出了一个很好的问题和图片。对于那些想制作类似他的作品的人,请做以下操作。
1)为ProgressBar创建背景。
进度条背景.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="3dp" />
    <stroke android:color="@color/white" android:width="1dp" />
</shape>

2)为ProgressBar创建比例。
曲线进度条.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>
            <corners android:radius="2dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3)在布局文件中添加ProgressBar

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_margin="1dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>
fivyi3re

fivyi3re4#

您可以实现进度条与内部进度颜色,边框颜色,空进度与透明颜色.

<?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="15dip" />
        <stroke android:width="1dp" android:color="@color/black" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/trans"
                android:centerY="0.75"
                android:endColor="@color/black"
                android:angle="270"

                />
        </shape>
    </clip>
 </item>

 <item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:endColor="@color/black"
                android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>
sdnqo3pr

sdnqo3pr5#

<com.google.android.material.progressindicator.LinearProgressIndicator
                android:id="@+id/pb_team2"
                android:layout_width="0dp"
                android:layout_height="8dp"
                android:layout_marginStart="55dp"
                android:layout_marginEnd="15dp"
                app:trackColor="#E0E0E0"
                app:trackCornerRadius="6dp"
                app:trackThickness="8dp"
                android:progress="2"
                app:indicatorColor="@color/red"
                android:scaleX="-1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/tv_versus"
                app:layout_constraintTop_toBottomOf="@id/tv_team2_score" />
xriantvc

xriantvc6#

build.gradle(模块)实施'com.google.android.material:material:1.6.0'中添加材料依赖项
返回到
activity_main.xml
。添加

<com.google.android.material.progressindicator.LinearProgressIndicator>
...
 app:trackCornerRadius="3dp"
    </com.google.android.material.progressindicator.LinearProgressIndicator>

希望它能做你的工作。

at0kjp5o

at0kjp5o7#

您可以使用Drawable创建自定义progressbar

1)将第一个可绘制对象创建为custom_progress_bar_horizontal.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>
            <padding
                android:bottom="2dip"
                android:left="2dip"
                android:right="2dip"
                android:top="2dip" />
            <corners android:radius="5dip" />
            <gradient
                android:angle="270"
                android:centerColor="#80385682"
                android:centerY="0.50"
                android:endColor="#80577AAF"
                android:startColor="#80222F44" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="90"
                    android:endColor="#FF1997E1"
                    android:startColor="#FF0E75AF" />
            </shape>
        </clip>
    </item>
</layer-list>
2)在style.xml文件中创建样式。
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
   <item name="android:indeterminateOnly">false</item>
   <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
   <item name="android:minHeight">10dip</item>
   <item name="android:maxHeight">20dip</item>
</style>
3)在项目中的任何位置使用。
<ProgressBar
    android:id="@+id/mProgressBar"
    style="@style/CustomProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

输出:-

相关问题