zoukankan      html  css  js  c++  java
  • Android自定义ProgressBar样式

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

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

    • 默认风格的进度条: 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

  • 相关阅读:
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_20-认证接口开发-接口测试
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_19-认证接口开发-接口开发-controller
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_18-认证接口开发-接口开发-service
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_17-认证接口开发-申请令牌测试
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_16-认证接口开发-Api接口定义
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_15-认证接口开发-Redis配置
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_14-认证接口开发-需求分析
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_13-SpringSecurityOauth2研究-JWT研究-生成JWT令牌&验证JWT令牌
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_12-SpringSecurityOauth2研究-JWT研究-生成私钥和公钥
    阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_11-SpringSecurityOauth2研究-JWT研究-JWT介绍
  • 原文地址:https://www.cnblogs.com/xl-phoenix/p/7975490.html
Copyright © 2011-2022 走看看