ProgressBar

普通进度条

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:progressDrawable="@drawable/jz_bottom_progress"/>

样式

圆形和水平【默认圆形】

自定义水平进度条

<style name="Widget.ProgressBar.Horizontal">  
    <item name="android:indeterminateOnly">false</item>  
    <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>  
    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>  
    <item name="android:minHeight">20dip</item>  
    <item name="android:maxHeight">20dip</item>  
    <item name="android:mirrorForRtl">true</item>  
</style>  

在这个Style中，有一个progressDrawable属性，这个属性其实就是我们的progressBar显示的样式，我们点击去看一下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
      
    <item android:id="@android:id/background">  
        <shape>  
            <corners android:radius="5dip" />  
            <gradient  
                    android:startColor="#ff9d9e9d"  
                    android:centerColor="#ff5a5d5a"  
                    android:centerY="0.75"  
                    android:endColor="#ff747674"  
                    android:angle="270"  
            />  
        </shape>  
    </item>  
      
    <item android:id="@android:id/secondaryProgress">  
        <clip>  
            <shape>  
                <corners android:radius="5dip" />  
                <gradient  
                        android:startColor="#80ffd300"  
                        android:centerColor="#80ffb600"  
                        android:centerY="0.75"  
                        android:endColor="#a0ffcb00"  
                        android:angle="270"  
                />  
            </shape>  
        </clip>  
    </item>  
      
    <item android:id="@android:id/progress">  
        <clip>  
            <shape>  
                <corners android:radius="5dip" />  
                <gradient  
                        android:startColor="#ffffd300"  
                        android:centerColor="#ffffb600"  
                        android:centerY="0.75"  
                        android:endColor="#ffffcb00"  
                        android:angle="270"  
                />  
            </shape>  
        </clip>  
    </item>  
      
</layer-list>  

ProgressBar有两个进度，一个是android:progress（第一显示进度），另一个是android:secondaryProgress（第二显示进度）

自定义圆形进度条

<style name="Widget.ProgressBar">  
    <item name="android:indeterminateOnly">true</item>  
    // true表示不确定，false表示确定
    <item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>  
    //决定了圆形进度条的样式
    <item name="android:indeterminateBehavior">repeat</item>  
//设置小圈旋转的模式
    <item name="android:indeterminateDuration">3500</item>  
//每一圈的旋转时间
    <item name="android:minWidth">48dip</item>  
    <item name="android:maxWidth">48dip</item>  
    <item name="android:minHeight">48dip</item>  
    <item name="android:maxHeight">48dip</item>  
    <item name="android:mirrorForRtl">false</item>  
</style> 

progressbar_rotate.xml文件

<?xml version="1.0" encoding="utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:drawable="@drawable/loading_32dp"  
    android:fromDegrees="0"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:toDegrees="359" >  
</rotate>  

image.png

竖立的进度条

public class VerticalProgressBar extends ProgressBar {

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

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

    public VerticalProgressBar(Context context) {
        super(context);
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
    }
    
    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//      setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }
    
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        canvas.rotate(-90);
        canvas.translate(-getHeight(), 0);
        super.onDraw(canvas);
    }

}

类似歌词字幕

image

代码如下：

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <item  
        android:id="@android:id/background"  
        android:drawable="@drawable/t1"/>  
    <item  
        android:id="@android:id/progress"  
        android:drawable="@drawable/t2"/>  
  
</layer-list>  

其实就是两张图片：

image image