带有圆角的进度条？

问题描述 投票：0回答：9

我正在尝试实现这个进度条设计： enter image description here

我当前的代码会产生以下结果： enter image description here

这是代码：

<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"/>

我尝试在 

<size>
中的 
<shape>
上添加 
<clip
属性以使进度形状变小一点，但它不起作用。另外，进度条是平坦的，我想根据设计弯曲。为了实现设计我需要改变什么？

android android-drawable android-progressbar
9个回答
220
投票

如何让进度形状变小一点？

您需要给进度项一点填充，如下所示：

<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>
61
投票

通过材质组件库，您可以使用 

LinearProgressIndicator
和 
app:trackCornerRadius
 属性。
比如：

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

enter image description here

它也适用于确定进度指示器，删除 

android:indeterminate="true"
或使用 
android:indeterminate="false"

注意：至少需要版本

1.3.0
。

16
投票

感谢 Georgi Koemdzhiev 提出了一个很好的问题和图片。对于那些想要制作类似他的作品的人，请执行以下操作。

1) 为 

ProgressBar
创建背景。

progress_bar_background.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
创建一个比例。

curved_progress_bar.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>
7
投票
<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" />
5
投票

The code produce following progress bar
您可以使用内部进度颜色、边框来实现进度条 颜色，空进度与透明色。 

<?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>
2
投票

在 build.gradle(Module) 添加材质依赖 实施

'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>

希望它能完成你的工作。

2
投票

您可以使用 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" />

输出：-

enter image description here

0
投票
  1. 创造新风格
<style name="ProgressBar.Horizontal.Rounded" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/progress_horizontal_material</item>
</style>
  1. 创建一个名为“progress_horizontal.xml”的新绘图
<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2014 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape
            android:shape="rectangle"
            android:tint="?attr/colorControlNormal">
            <corners android:radius="8dp" />
            <size android:height="4dp" />
            <solid android:color="@color/white_disabled" />
        </shape>
    </item>
    <item
        android:id="@android:id/secondaryProgress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape
                android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp" />
                <size android:height="4dp" />
                <solid android:color="@color/white_disabled" />
            </shape>
        </scale>
    </item>
    <item
        android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape
                android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp" />
                <size android:height="4dp" />
                <solid android:color="@android:color/white" />
            </shape>
        </scale>
    </item>
</layer-list>
  1. 创建一个名为“white_disabled.xml”的新颜色
<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2015 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="?android:attr/disabledAlpha" android:color="@android:color/white" />
</selector>
  1. 然后在您的布局中使用它，如下所示：
<ProgressBar
     android:id="@+id/progress_bar_indicator"
     style="@style/ProgressBar.Horizontal.Rounded"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" />
0
投票

在drawable文件夹中创建progress_bg.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>
            <solid
                android:color="@color/grey" />
            <corners android:radius="10dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <gradient android:angle="270" android:endColor="#048B7B" android:startColor="#00BBA5" />
                <corners android:radius="10dp" />
            </shape>
        </scale>
    </item>

</layer-list>

在ProgressBar中使用上面的progress_bg.xml作为progressDrawable属性（例如android:progressDrawable="@drawable/progress_bg"）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.