UI组件-ProgressBar及其子类

作者: olaH | 来源:发表于2017-10-20 22:24 被阅读0次

    前言

    余生希望你和让你快乐的那个人度过。

    ProgressBar组件

    进度条也是UI界面中一种常用的组件,Android支持多种风格的进度条,通过style属性可以为ProgressBar指定风格。该属性支持如下几个属性值。
    • @android:style/Widget.ProgressBar.Horizontal:水平进度条

    • "@android:style/Widget.ProgressBar.Inverse:普通大小的环形进度条

    • "@android:style/Widget.ProgressBar.Large:大环形进度条

    • "@android:style/Widget.ProgressBar.Large.Inverse:大环形进度条

    • "@android:style/Widget.ProgressBar.Small:小环形进度条

    • "@android:style/Widget.ProgressBar.Small.Inverse:小环形进度条

    代码示例

    progress.xml
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
              <!-- 定义一个大环形进度条 -->
              <ProgressBar
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  style="@android:style/Widget.ProgressBar.Large"
                  />
              <!-- 定义一个中等大小的环形进度条 -->
              <ProgressBar
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  />
              <!-- 定义一个小环形进度条 -->
              <ProgressBar
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  style="@android:style/Widget.ProgressBar.Small"
                  />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="任务完成的进度"
            />
        <!-- 定义一个水平进度条 -->
        <ProgressBar
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            style="@android:style/Widget.ProgressBar.Horizontal"
            />
    </LinearLayout>
    
    
    MainActivity.java
    public class MainActivity extends Activity {
    
        //该程序模拟填充长度为100的数组
        private int[] data = new int[100];
        int hashData = 0;
        //记录ProgressBar的完成进度
        int status = 0;
        ProgressBar bar;
        //创建一个负责更新进度的Handler
        Handler mHandler = new Handler()
        {
    
            @Override
            public void handleMessage(Message msg) {
                //表明消息是由该程序发送的
                if(msg.what == 1)
                {
                    bar.setProgress(status);
                }
            }
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.progressbar);
            bar = (ProgressBar) findViewById(R.id.bar);
            //启动线程来执行任务
            new Thread()
            {
                public void run()
                {
                    while(status < 100)
                    {
                        //获取耗时操作的完成百分比
                        status = doWork();
                        //发送消息
                        mHandler.sendEmptyMessage(1);
                    }
                }
            }.start();
        }
    
        public int doWork() {
            //为数组赋值
            data[hashData++] = (int) (Math.random() * 100);
            try {
                Thread.sleep(1000);
            }catch (InterruptedException e) {
                e.printStackTrace();
            }
            return hashData;
        }
    }
    

    效果

    Screenshot_20171020-125343.png

    提示

    android:max属性,设置该进度条的最大值。
    android:progress属性,设置该进度条的已完成进度值。

    SeekBar组件

    拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值。可以用来调节音量等等。

    代码示例

    seekbar.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:src="@drawable/kaola"
            />
        <!-- 定义一个拖动条,并改变它的滑块外观 -->
        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="255"
            android:progress="255"
            />
    </LinearLayout>
    
    MainActivity.java
    public class MainActivity extends Activity {
    
        ImageView image;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.seekbar);
            image = (ImageView) findViewById(R.id.image);
            SeekBar seekBar = (SeekBar) findViewById(R.id.seekbar);
            seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
    
                //当拖动条的滑块位置发送改变时触发该方法
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    
                    //动态改变图片透明度
                    image.setImageAlpha(progress);
                }
    
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
    
                }
    
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
    
                }
            });
        }
    
    }
    

    效果

    Screenshot_20171020-131641.png

    RatingBar组件

    星级评分条(RatingBar)与拖动条(SeekBar)的用法、功能十分相似,最大的区别在于RatingBar通过星星来表示进度。

    代码示例

    ratingbar.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:src="@drawable/kaola"
            />
        <!-- 定义一个拖动条,并改变它的滑块外观 -->
        <RatingBar
            android:id="@+id/ratingbar"
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:max="255"
            android:progress="255"
            android:stepSize="0.5"
            />
    </LinearLayout>
    
    
    MainActivity.java
    public class MainActivity extends Activity {
    
        ImageView image;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.ratingbar);
            image = (ImageView) findViewById(R.id.image);
            RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
            ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
    
                @Override
                public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
    
                    //动态改变图片透明度
                    //5颗星星就代表最大值255
                    image.setImageAlpha((int) (rating * 255 / 5));
                }
            });
        }
    }
    
    

    效果

    Screenshot_20171020-133417.png

    提示

    android:isIndicator属性,设置该星级评分条是否允许用户改变。
    android:numStars属性,设置该星级评分条总共有多少星级。
    android:rating属性,设置该星级评分条默认的星级。
    android:stepSize属性,设置每次最少需要改变多少个星级。

    相关文章

      网友评论

        本文标题:UI组件-ProgressBar及其子类

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