android中两侧圆形的进度条答案

【问题标题】：Progress bar rounded on both sides in androidandroid中两侧圆形的进度条
【发布时间】：2011-01-05 22:25:34
【问题描述】：

我正在尝试在 android 中创建自定义进度条。我使用了以下 xml 文件（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>
    <corners android:radius="8dip" />
    <stroke android:width="2dip" android:color="#FFFF"/>
    <solid android:color="#FFFF"/>              
   </shape>
  </item>
  <item android:id="@android:id/secondaryProgress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
  <item android:id="@android:id/progress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
 </layer-list>

除了我想让我的进度条中的进度在两边都四舍五入之外，一切都很好。上述代码使进度条在左侧被舍入，而在右侧被简单地切割（不被舍入）。可能是因为剪辑标签。你能帮我吗？我应该改变什么来让我的进度条的进度在两边都四舍五入？

完整的布局如下：

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@drawable/gradient_progress"
  android:padding="10dip"
  >
   <LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   >
    <TextView
     android:id="@+id/progress_header"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="Uploading"               
    />
    <TextView
     android:id="@+id/progress_percent"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="55%"         
     android:paddingLeft="10dip"
    />      
   </LinearLayout>          
   <ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/progress_bar_horizontal"
    android:maxHeight="12dip"    
    android:minHeight="12dip"    
    android:max="100" 
   />
  </LinearLayout>
 </LinearLayout>

这是我努力的结果：link text

我希望红色条的右侧也有圆形边缘。非常感谢您的 cmets。

【问题讨论】：

我们能看到你把这个东西放进去的布局吗？我还假设您在 SDK 中看到了 progress_horizontal.xml。
感谢您的意见。是的，我已经看到了框架示例，但不幸的是它们不能处理我的情况。我已经用完整的布局更新了问题，并上传了显示当前栏的图片。感谢您的考虑。

标签： android user-interface progress-bar android-progressbar material-components-android

【解决方案1】：

所以从你的布局 xml 开始：

<ProgressBar
    android:id="@+id/custom_progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:indeterminateOnly="false"
    android:progressDrawable="@drawable/custom_progress_bar_horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="13"
    android:progress="33"
    android:secondaryProgress="66" />

您可以将其中的很多内容移到样式 xml 中，但这不是重点。我们真正关心的是android:progressDrawable="@drawable/custom_progress_bar_horizontal" - 这将允许我们指定我们自己的自定义进度条：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
          android:drawable="@android:drawable/custom_progress_bg" />
    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%"
               android:drawable="@android:drawable/custom_progress_secondary" />
    </item>
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
               android:drawable="@android:drawable/custom_progress_primary" />
    </item>
</layer-list>

或者您不必为您的背景使用补丁 9 - 例如，这是一个带有 1dp 边框的简单白色背景：

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

        <solid android:color="@android:color/white" />

        <stroke
            android:width="1dp"
            android:color="@android:color/darker_gray" />
    </shape>
</item>

Android Asset Studio 有一个很棒的工具可以帮助您生成 Patch 9 文件： http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

工具前带有填充的主 xdpi png 示例：
示例辅助 xdpi png 在工具之前带有填充：

最后的输出：

【讨论】：

我遇到了问题——一开始的时候，它看起来像是被“挤压”了，所以你能给我举个例子
具有非 9 路径可绘制对象（形状之一）的缩放技巧正是我正在寻找的，并且是一个非常好的技巧:)

【解决方案2】：

只需将标签 <clip> 更改为 <scale>，如下所示：

<scale android:scaleWidth="100%">

【讨论】：

我不知道为什么这没有得到更多的关注。它工作得很好。谢谢！
这应该是答案
效果很好！这是最完美和最简单的方法。谢谢

【解决方案3】：

据我所知，这是不可能的。因为在内部ClipDrawable（即剪辑标签）使用canvas.clipRect() 切割给定的形状/可绘制对象。顺便说一句，您可以从here 复制ClipDrawable 源并根据进度级别剪辑特定路径。

【讨论】：

在图层列表中添加一个新项目怎么样，这会在剪辑的进度条上添加一个圆形结束。喜欢的权利：5dp; ...当酒吧为 100% 或几乎是 100% 时会出现问题，但无论如何有这样的机会吗？还是你已经想到了？
在层列表中添加一个项目不会有帮助，因为它与所有其他层具有相同的高度和宽度。您还需要更改 ProgressBar 来处理新图层。
无法打开此链接..请帮助

【解决方案4】：

您可以使用材质组件库提供的 LinearProgressIndicator 和 app:trackCornerRadius 属性。

类似：

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

注意：至少需要1.3.0-alpha04版本。

【讨论】：

圆形进度条的属性是否相同？

【解决方案5】：

为了解决进度非常低时结束图形重叠的问题，我写了一个 ProgressBar 类的扩展，为进度条添加了一个固定的起始偏移量，而在其他情况下正常运行。

只需调用 'setMaxWithPercentOffset()' 或 'setMaxWithOffset()' 而不是 'setMax()' 传入您要添加的值作为进度条的起始偏移量。

如果有人在不需要起始偏移量的情况下解决了这个问题，请告诉我！

/**
 * This progress bar can be used when the progress bar end graphics are styled in some way.
 * In this case, the progress bar must always have a small percentage of progress, otherwise
 * the styled ends of the progress overlap each other.
 *
 */
public class EndStyledProgressBar extends ProgressBar {
    private static final int DEFAULT_START_OFFSET_PERCENT = 5;

    private int mStartOffset;
    private int mRealMax;

    public EndStyledProgressBar(Context context) {
        super(context);
        commonConstructor();
    }

    public EndStyledProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        commonConstructor();
    }

    public EndStyledProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        commonConstructor();
    }

    private void commonConstructor() {
        mRealMax = super.getMax();
        mStartOffset = 0;

        setMaxWithPercentOffset(DEFAULT_START_OFFSET_PERCENT, mRealMax);

        super.setProgress(super.getProgress() + mStartOffset);
        super.setSecondaryProgress(super.getSecondaryProgress() + mStartOffset);
    }

    public void setProgress(int progress) {
        super.setProgress(progress + mStartOffset);
    }

    public void setSecondaryProgress(int secondaryProgress) {
        super.setSecondaryProgress(secondaryProgress + mStartOffset);
    }

    public int getProgress() {
        int realProgress = super.getProgress();
        return isIndeterminate() ? 0 : (realProgress - mStartOffset);
    }


    public  int getSecondaryProgress() {
        int realSecondaryProgress = super.getSecondaryProgress();
        return isIndeterminate() ? 0 : (realSecondaryProgress - mStartOffset);
    }

    public int getMax() {
        return mRealMax;
    }


    /**
     * Don't call this, instead call setMaxWithPercentOffset() or setStartOffsetInPercent()
     *
     * @param max
     */
    public void setMax(int max) {
        super.setMax(max);
    }

    /**
     * Sets a new max with a start offset (in percent) included.
     *
     * @param startOffsetInPercent start offset for the progress bar to avoid graphic errors.
     */
    public void setMaxWithPercentOffset(int startOffsetInPercent, int max) {
        mRealMax = max;
        int startOffset = (mRealMax * startOffsetInPercent) / 100;

        setMaxWithOffset(startOffset, max);
    }

    /**
     * Sets a new max with a start offset included.
     *
     * @param startOffset start offset for the progress bar to avoid graphic errors.
     */
    public void setMaxWithOffset(int startOffset, int max) {
        mRealMax = max;

        super.setMax(startOffset + max);

        setStartOffset(startOffset);

        super.setMax(startOffset + max);
    }


    /**
     * Sets a new start offset different from the default of 5%
     *
     * @param startOffset start offset for the progress bar to avoid graphic errors.
     */
    private void setStartOffset(int startOffset) {
        int newStartOffset = startOffset;

        // Ensure the start offset is not outside the range of the progress bar
        if (newStartOffset < 0) newStartOffset = 0;
        if (newStartOffset >= super.getMax()) newStartOffset = super.getMax();

        // Apply the start offset difference
        if (mStartOffset != newStartOffset) {
            int diff = newStartOffset - mStartOffset;
            super.setMax(super.getMax() + diff);
            super.setProgress(super.getProgress() + diff);
            super.setSecondaryProgress(super.getSecondaryProgress() + diff);
            mStartOffset = newStartOffset;
        }
    }
}

【讨论】：

【解决方案6】：

没有 9-patch 的最终圆形两侧进度条是： android:progressDrawable="@drawable/progress_horizontal_green"

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress">
    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="5dip"/>
            <solid android:color="#33FF33"/>
        </shape>
    </scale>
</item>

【讨论】：