Android自定义ProgressBar样式

Posted on 2017-12-04 09:10  xl_phoenix  阅读(5984)  评论(0编辑  收藏  举报

我们使用的进度条多种多样,下面有几种自定义的进度条的样式,下面介绍几个.

进度条的有基本的四种样式:

  • 默认风格的进度条: android:progressBarStyle
  • 水平长型进度条: android:progressBarStyleHorizontal
  • 大圆形进度条: android:progressBarStyleLarge
  • 小圆形进度条: android:progressBarStyleSmall

下面以横向进度样式作为例子,介绍自定义样式.

思路:

1.自定义进度条的样式.

2.设置样式背景,进度条样式,进度条背景.

例如:自定义颜色背景样式

<style name="progressBarHorizontal_indeter" parent="android:Widget.ProgressBar.Horizontal">  
        <item name="android:indeterminateOnly">false</item>  
        <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>  
        <item name="android:minHeight">5dip</item>  
        <item name="android:maxHeight">5dip</item>  
    </style> 

设置不确定的进度背景,progress_color_horizontal.xml

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

这是自定义圆形背景,和北京颜色,当然也可以使用存在的图片作为背景,设置的有进度条的背景,进度条的进度背景,和第二次进度背景图片.

下面介绍一个使用背景图片作为背景样式的例子.styles.xml

<style name="progressBarHorizontal" parent="android:Widget.ProgressBar.Horizontal">  
       <item name="android:indeterminateOnly">false</item>  
       <item name="android:progressDrawable">@drawable/progress_horizontal</item>  
       <item name="android:minHeight">5dip</item>  
       <item name="android:maxHeight">5dip</item>  
   </style>  

progress_horizontal.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <item  
        android:id="@android:id/background"  
        android:drawable="@drawable/progressbar_back">  
    </item>  
    <item  
        android:id="@android:id/secondaryProgress"  
        android:drawable="@drawable/progressbar_indeter2">  
    </item>  
    <item  
        android:id="@android:id/progress"  
        android:drawable="@drawable/progressbar_indeter1">  
    </item>  
  
</layer-list>  

使用图片作为进度条的背景,进度背景.

使用步骤:

在布局文件中直接加载样式.

<ProgressBar  
       android:id="@+id/progress_indeter"  
       style="@style/progressBarHorizontal_indeter"  
       android:layout_width="200dip"  
       android:layout_height="10dip"  
       android:layout_margin="10dp"  
       android:indeterminate="true"  
       android:max="100"  
       android:progress="41" />  

在调用出获取此对象,然后可以其进度,通过线程.activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:gravity="center"  
    android:orientation="vertical"  
    tools:context="com.example.progressbardemo.MainActivity" >  
  
    <Button  
        android:id="@+id/start"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:gravity="center"  
        android:text="start"  
        android:textSize="30sp" />  
  
    <TextView  
        android:id="@+id/tv_pb"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:gravity="center"  
        android:padding="10dp"  
        android:text="0%"  
        android:textSize="25sp" />  
  
    <ProgressBar  
        android:id="@+id/progress_color"  
        style="@style/progressBarHorizontal_color"  
        android:layout_width="200dip"  
        android:layout_height="10dip"  
        android:layout_margin="10dp"  
        android:indeterminate="true"  
        android:max="100"  
        android:progress="41" />  
  
  
    <ProgressBar  
        android:id="@+id/progress_indeter"  
        style="@style/progressBarHorizontal_indeter"  
        android:layout_width="200dip"  
        android:layout_height="10dip"  
        android:layout_margin="10dp"  
        android:indeterminate="true"  
        android:max="100"  
        android:progress="41" />  
  
    <ProgressBar  
        android:id="@+id/progress_horizontal"  
        style="@style/progressBarHorizontal"  
        android:layout_width="200dip"  
        android:layout_height="10dip"  
        android:layout_margin="10dp"  
        android:indeterminate="true"  
        android:max="100"  
        android:progress="41" />  
  
    <ProgressBar  
        android:id="@+id/progress_arabia"  
        style="@style/progressBarHorizontal_arabia"  
        android:layout_width="200dip"  
        android:layout_height="10dip"  
        android:layout_margin="10dp"  
        android:indeterminate="true"  
        android:max="100"  
        android:progress="41" />  
  
</LinearLayout>  

MainActivity.java

public class MainActivity extends Activity {  
    private final String TAG = MainActivity.class.getSimpleName();  
    /** 
     * 进度条 
     */  
    private ProgressBar mColor = null;  
    private ProgressBar mIndeter = null;  
    private ProgressBar mHorizontal = null;  
    private ProgressBar mArabia = null;  
  
    /** 
     * 当前进度的值 
     */  
    private int mCount = 0;  
    private int mDis = 100;  
    private TextView tv_pb;// 数字进行显示  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        findViewById(R.id.start).setOnClickListener(new OnClickListener() {  
  
            @Override  
            public void onClick(View v) {  
                showIndeterDialog();  
            }  
        });  
        tv_pb = (TextView) findViewById(R.id.tv_pb);  
        initProgressBarView();  
    }  
  
    public void initProgressBarView() {  
        mColor = (ProgressBar) findViewById(R.id.progress_color);  
        mIndeter = (ProgressBar) findViewById(R.id.progress_indeter);  
        mHorizontal = (ProgressBar) findViewById(R.id.progress_horizontal);  
        mArabia = (ProgressBar) findViewById(R.id.progress_arabia);  
        initProgressBarData(mColor);  
        initProgressBarData(mIndeter);  
        initProgressBarData(mHorizontal);  
        initProgressBarData(mArabia);  
    }  
  
    public void initProgressBarData(ProgressBar bar) {  
        bar.setMax(101);  
        bar.setProgress(0);  
        if (bar == mArabia) {  
            bar.setProgress(101);  
        }  
        bar.setIndeterminate(false);  
    }  
  
    private void showIndeterDialog() {  
        mCount = 0;  
        mDis = 100;  
        new Thread() {  
            public void run() {  
  
                while (mCount <= 100 && mDis > 0) {  
                    mColor.setProgress(mCount);  
                    mIndeter.setProgress(mCount);  
                    mHorizontal.setProgress(mCount);  
                    mArabia.setProgress(mDis);  
                    mCount++;  
                    mDis--;  
                    handle.sendEmptyMessage(0);  
                    SystemClock.sleep(100);  
  
                }  
  
            };  
        }.start();  
    }  
  
    private Handler handle = new Handler() {  
        public void handleMessage(android.os.Message msg) {  
            DecimalFormat format = new DecimalFormat("0.00");  
            tv_pb.setText(String.valueOf(format.format(1.0  
                    * mColor.getProgress() / mColor.getMax() * 100.0))  
                    + "%");  
        };  
    };  
}  

横向的进度条设置最大值,和当前的进度,如果是从0~最大值,那么就是从左到右显示进度.
如果是从最大值~0,那么就是从又到左显示进度.

image

Copyright © 2024 xl_phoenix
Powered by .NET 8.0 on Kubernetes