美文网首页
横向ProgressBar自定义布局

横向ProgressBar自定义布局

作者: 程序员文艺范 | 来源:发表于2016-12-01 14:42 被阅读0次
由于项目需求,简单查询了下横向ProgressBar自定义布局的实现,列出简单的实现步骤,后续补充其他更详细的属性

一、首先定义一个layer-list的drawable(命名:shape_progressbar.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--progressbar的背景颜色-->
<item android:id="@android:id/background">        
        <shape>            
            <corners android:radius="5dip" />            
                <gradient                
                      android:startColor="@color/bar_color"                
                      android:centerColor="@color/bar_color"                
                      android:endColor="@color/bar_color"                
                      android:angle="270"                
                />        
          </shape>    
</item>    
<!--progressBar的缓冲进度颜色-->
<item android:id="@android:id/secondaryProgress">        
    <clip>            
        <shape>                
             <corners android:radius="5dip" />                
                   <gradient                    
                         android:startColor="@color/yellow"                    
                         android:centerColor="@color/yellow"                   
                         android:endColor="@color/yellow"                    
                         android:angle="270"                    
                   />           
        </shape>        
    </clip>    
</item>    
<!--progressBar的最终进度颜色-->
<item android:id="@android:id/progress">        
    <clip>            
        <shape>                
              <corners android:radius="5dip" />                
                  <gradient                    
                      android:startColor="@color/yellow"                    
                      android:centerColor="@color/yellow"                    
                      android:endColor="@color/yellow"                    
                      android:angle="270"                    
                  />            
       </shape>        
      </clip>    
</item>
</layer-list>

二、第一步的drawable文件应用再styles中

<!--style属性-->
<style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">    
    <item name="android:maxHeight">50dp</item>    
    <item name="android:minHeight">10dp</item>    
    <item name="android:indeterminateOnly">false</item>    
    <item name="android:progressDrawable">@drawable/shape_progressbar</item>
</style>

三、使用style文件

<ProgressBar    
    android:id="@+id/progressBar"    
    style="@style/StyleProgressBarMini"    
    android:layout_width="match_parent"    
    android:layout_height="wrap_content"    
    android:layout_marginLeft="@dimen/dimen_50px"    
    android:layout_marginRight="@dimen/dimen_50px"    
    android:layout_marginTop="@dimen/dimen_20px"    
    android:max="100"    
    android:progress="30"    
/>
结果图.png
                                                              欢迎留言

相关文章

网友评论

      本文标题:横向ProgressBar自定义布局

      本文链接:https://www.haomeiwen.com/subject/zrvxmttx.html