android - 进度条在android中两边都变圆了

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

我正在尝试在 android 中创建自定义进度条。我为此使用了以下 xml 文件 (progress_bar_horizo​​ntal.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

我希望红色条的右侧也有圆边。 非常感谢您的评论。

最佳答案

这是时代的更新答案:

Android源码使用Patch 9文件实现效果: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizontal_holo_dark.xml/

所以从您的布局 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_horizo​​ntal" - 这将允许我们指定我们自己的自定义进度条:

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

或者您不必为背景使用 Patch 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 示例: Primary progress bar
工具前带有填充的辅助 xdpi png 示例: Secondary progress bar

最终输出: Custom progress bar

关于android - 进度条在android中两边都变圆了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2078809/

相关文章:

javascript - 在哪里可以找到允许我禁用某些日期的 javascript 日历?

Java GUI : JLabel as Bullet should fly through Jpanel, 仅给出 "result"

javascript - Js重新加载这个进度条onclick

css - HTML5 进度条 - 浏览器加载大图

android - exec ("su") 权限被拒绝?

android - 除非您更新 Google Play 服务,否则如何要求更新的播放服务并添加 "This app won' t 运行”

python - 如何使用 Python 在没有窗口的情况下在屏幕上显示文本

c# - 如何将后台代码的进度百分比传递给Jquery进度条?

android - 不显示 EditText 提示

android - 增加 AsyncTask 堆栈大小?