android基础-ProgressBar及其子类和ViewAnimator及其子类

1.ProgressBar及其子类

1.1 进度条ProgressBar的功能和用法

public class MainActivity extends AppCompatActivity {
    // 该程序模拟填充长度为100的数组
    private int[] data = new int[100];
    int hasData = 0;
    // 记录ProgressBar的完成进度
    int status = 0;
    ProgressBar bar , bar2;
    // 创建一个负责更新的进度的Handler
    Handler mHandler = new Handler()
    {
        @Override

        public void handleMessage(Message msg)
        {
            // 表明消息是由该程序发送的
            if (msg.what == 0x111)
            {
                bar.setProgress(status);
                bar2.setProgress(status);
            }
        }
    };
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bar = (ProgressBar) findViewById(R.id.bar);
        bar2 = (ProgressBar) findViewById(R.id.bar2);
        // 启动线程来执行任务
        new Thread()
        {
            public void run()
            {
                while (status < 100)
                {
                    // 获取耗时操作的完成百分比
                    status = doWork();
                    // 发送消息
                    mHandler.sendEmptyMessage(0x111);
                }
            }
        }.start();
    }
    // 模拟一个耗时的操作
    public int doWork()
    {
        // 为数组元素赋值
        data[hasData++] = (int) (Math.random() * 100);
        try
        {
            Thread.sleep(100);
        }
        catch (InterruptedException e)
        {
            e.printStackTrace();
        }
        return hasData;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        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"/>
    <!-- 定义一个水平进度条，并改变轨道外观 -->
    <ProgressBar
        android:id="@+id/bar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progressDrawable="@drawable/my_bar"
        style="@android:style/Widget.ProgressBar.Horizontal"/>
</LinearLayout>

1.2 拖动条（SeekBar）的功能和用法
SeekBar继承于ProgressBar

public class MainActivity extends AppCompatActivity {
    ImageView image;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ImageView) findViewById(R.id.image);
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekbar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener()
        {
            // 当拖动条的滑块位置发生改变时触发该方法
            @Override
            public void onProgressChanged(SeekBar arg0, int progress,
                                          boolean fromUser)
            {
                // 动态改变图片的透明度
                image.setImageAlpha(progress);
            }
            @Override
            public void onStartTrackingTouch(SeekBar bar)
            {
            }
            @Override
            public void onStopTrackingTouch(SeekBar bar)
            {
            }
        });
    }
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:src="@drawable/lijiang"/>
    <!-- 定义一个拖动条，并改变它的滑块外观 -->
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"
        android:thumb="@mipmap/ic_launcher"/>
</LinearLayout>

1.3 星级评分条（RatingBar）的功能和用法

实例：通过星星改变图片透明度

public class MainActivity extends AppCompatActivity {
    ImageView image;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ImageView) findViewById(R.id.image);
        RatingBar ratingBar = (RatingBar) findViewById(R.id.rating);
        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener()
        {
            // 当星级评分条的评分发生改变时触发该方法
            @Override
            public void onRatingChanged(RatingBar arg0, float rating,
                                        boolean fromUser)
            {
                // 动态改变图片的透明度，其中255是星级评分条的最大值
                // 5个星星就代表最大值255
                image.setImageAlpha((int) (rating * 255 / 5));
            }
        });

    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:src="@drawable/lijiang"/>
    <!-- 定义一个星级评分条 -->
    <RatingBar
        android:id="@+id/rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:max="255"
        android:progress="255"
        android:stepSize="0.5"/>
</LinearLayout>

2. ViewAnimator及其子类

2.1 ViewSwitcher的功能和用法
实例：仿Android系统的launcher桌面

public class MainActivity extends AppCompatActivity {
    // 定义一个常量，用于显示每屏显示的应用程序数
    public static final int NUMBER_PER_SCREEN = 12;
    // 代表应用程序的内部类，
    public static class DataItem
    {
        // 应用程序名称
        public String dataName;
        // 应用程序图标
        public Drawable drawable;
    }
    // 保存系统所有应用程序的List集合
    private ArrayList<DataItem> items = new ArrayList<DataItem>();
    // 记录当前正在显示第几屏的程序
    private int screenNo = -1;
    // 保存程序所占的总屏数
    private int screenCount;
    ViewSwitcher switcher;
    // 创建LayoutInflater对象
    LayoutInflater inflater;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        inflater = LayoutInflater.from(MainActivity.this);
        // 创建一个包含40个元素的List集合，用于模拟包含40个应用程序
        for (int i = 0; i < 40; i++)
        {
            String label = "" + i;
            Drawable drawable = getResources().getDrawable(
                    R.mipmap.ic_launcher);
            DataItem item = new DataItem();
            item.dataName = label;
            item.drawable = drawable;
            items.add(item);
        }
        // 计算应用程序所占的总屏数
        // 如果应用程序的数量能整除NUMBER_PER_SCREEN，除法的结果就是总屏数
        // 如果不能整除，总屏数应该是除法的结果再加1
        screenCount = items.size() % NUMBER_PER_SCREEN == 0 ?
                items.size()/ NUMBER_PER_SCREEN :
                items.size() / NUMBER_PER_SCREEN    + 1;
        switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);
        switcher.setFactory(new ViewSwitcher.ViewFactory()
        {
            // 实际上就是返回一个GridView组件
            @Override
            public View makeView()
            {
                // 加载R.layout.slidelistview组件，实际上就是一个GridView组件
                return inflater.inflate(R.layout.slidelistview, null);
            }
        });
        // 页面加载时先显示第一屏
        next(null);
    }
    public void next(View v)
    {
        if (screenNo < screenCount - 1)
        {
            screenNo++;
            // 为ViewSwitcher的组件显示过程设置动画
            switcher.setInAnimation(this, R.anim.slide_in_right);
            // 为ViewSwitcher的组件隐藏过程设置动画
            switcher.setOutAnimation(this, R.anim.slide_out_left);
            // 控制下一屏将要显示的GridView对应的Adapter
            ((GridView) switcher.getNextView()).setAdapter(adapter);
            // 单击右边按钮，显示下一屏
            // 学习手势检测后，也可通过手势检测实现显示下一屏
            switcher.showNext();  // ①
        }
    }
    public void prev(View v)
    {
        if (screenNo > 0)
        {
            screenNo--;
            // 为ViewSwitcher的组件显示过程设置动画
            switcher.setInAnimation(this, android.R.anim.slide_in_left);
            // 为ViewSwitcher的组件隐藏过程设置动画
            switcher.setOutAnimation(this, android.R.anim.slide_out_right);
            // 控制下一屏将要显示的GridView对应的 Adapter
            ((GridView) switcher.getNextView()).setAdapter(adapter);
            // 单击左边按钮，显示上一屏，当然可以采用手势
            // 学习手势检测后，也可通过手势检测实现显示上一屏
            switcher.showPrevious();  //②
        }
    }
    // 该BaseAdapter负责为每屏显示的GridView提供列表项
    private BaseAdapter adapter = new BaseAdapter()
    {
        @Override
        public int getCount()
        {
            // 如果已经到了最后一屏，且应用程序的数量不能整除NUMBER_PER_SCREEN
            if (screenNo == screenCount - 1
                    && items.size() % NUMBER_PER_SCREEN != 0)
            {
                // 最后一屏显示的程序数为应用程序的数量对NUMBER_PER_SCREEN求余
                return items.size() % NUMBER_PER_SCREEN;
            }
            // 否则每屏显示的程序数量为NUMBER_PER_SCREEN
            return NUMBER_PER_SCREEN;
        }
        @Override
        public DataItem getItem(int position)
        {
            // 根据screenNo计算第position个列表项的数据
            return items.get(screenNo * NUMBER_PER_SCREEN + position);
        }
        @Override
        public long getItemId(int position)
        {
            return position;
        }
        @Override
        public View getView(int position
                , View convertView, ViewGroup parent)
        {
            View view = convertView;
            if (convertView == null)
            {
                // 加载R.layout.labelicon布局文件
                view = inflater.inflate(R.layout.labelicon, null);
            }
            // 获取R.layout.labelicon布局文件中的ImageView组件，并为之设置图标
            ImageView imageView = (ImageView)
                    view.findViewById(R.id.imageview);
            imageView.setImageDrawable(getItem(position).drawable);
            // 获取R.layout.labelicon布局文件中的TextView组件，并为之设置文本
            TextView textView = (TextView)
                    view.findViewById(R.id.textview);
            textView.setText(getItem(position).dataName);
            return view;
        }
    };
}

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 定义一个ViewSwitcher组件 -->
    <ViewSwitcher
        android:id="@+id/viewSwitcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 定义滚动到上一屏的按钮 -->
    <Button
        android:id="@+id/button_prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:onClick="prev"
        android:text="&lt;" />
    <!-- 定义滚动到下一屏的按钮 -->
    <Button
        android:id="@+id/button_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:onClick="next"
        android:text="&gt;" />
</RelativeLayout>

动画效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置从右边拖进来的动画
    android:duration指定动画持续时间  -->
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置从左边拖出去的动画 
    android:duration指定动画持续时间 -->
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

2.2 图像切换器（ImageSwitcher）的功能与用法

实例：支持动画的图片浏览器

public class MainActivity extends AppCompatActivity {
    int[] imageIds = new int[]
            {
                    R.drawable.bomb5 , R.drawable.bomb6 , R.drawable.bomb7
                    , R.drawable.bomb8 , R.drawable.bomb9 , R.drawable.bomb10
                    , R.drawable.bomb11 , R.drawable.bomb12 , R.drawable.bomb13
                    , R.drawable.bomb14 , R.drawable.bomb15 , R.drawable.bomb16
            };
    ImageSwitcher switcher;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 创建一个List对象，List对象的元素是Map
        List<Map<String, Object>> listItems =
                new ArrayList<Map<String, Object>>();
        for (int i = 0; i < imageIds.length; i++)
        {
            Map<String, Object> listItem = new HashMap<String, Object>();
            listItem.put("image", imageIds[i]);
            listItems.add(listItem);
        }
        // 获取显示图片的ImageSwitcher
        switcher = (ImageSwitcher)
                findViewById(R.id.switcher);
        // 为ImageSwitcher设置图片切换的动画效果
        switcher.setFactory(new ViewSwitcher.ViewFactory()
        {
            @Override
            public View makeView()
            {
                // 创建ImageView对象
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                // 返回ImageView对象
                return imageView;
            }
        });
        // 创建一个SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,
                listItems
                // 使用/layout/cell.xml文件作为界面布局
                , R.layout.cell, new String[]{"image"},
                new int[] { R.id.image1 });
        GridView grid = (GridView) findViewById(R.id.grid01);
        // 为GridView设置Adapter
        grid.setAdapter(simpleAdapter);
        // 添加列表项被选中的监听器
        grid.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
        {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                                       int position, long id)
            {
                // 显示当前被选中的图片
                switcher.setImageResource(imageIds[position]);
            }
            @Override
            public void onNothingSelected(AdapterView<?> parent)
            {
            }
        });
        // 添加列表项被单击的监听器
        grid.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id)
            {
                // 显示被单击的图片
                switcher.setImageResource(imageIds[position]);
            }
        });
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <!-- 定义一个GridView组件 -->
    <GridView
        android:id="@+id/grid01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="2dp"
        android:verticalSpacing="2dp"
        android:numColumns="4"
        android:gravity="center"/>
    <!-- 定义一个ImageSwitcher组件 -->
    <ImageSwitcher android:id="@+id/switcher"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out"/>
</LinearLayout>

2.3 文本切换器（TextSwitcher）的功能和用法

2.4 ViewFlipper的功能和用法

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = (ViewFlipper) findViewById(R.id.details);
    }
    public void prev(View source)
    {
        viewFlipper.setInAnimation(this , R.anim.slide_in_right);
        viewFlipper.setOutAnimation(this , R.anim.slide_out_left);
        // 显示上一个组件
        viewFlipper.showPrevious();
        // 停止自动播放
        viewFlipper.stopFlipping();
    }
    public void next(View source)
    {
        viewFlipper.setInAnimation(this , android.R.anim.slide_in_left);
        viewFlipper.setOutAnimation(this , android.R.anim.slide_out_right);
        // 显示下一个组件
        viewFlipper.showNext();
        // 停止自动播放
        viewFlipper.stopFlipping();
    }
    public void auto(View source)
    {
        viewFlipper.setInAnimation(this , android.R.anim.slide_in_left);
        viewFlipper.setOutAnimation(this , android.R.anim.slide_out_right);
        // 开始自动播放
        viewFlipper.startFlipping();
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ViewFlipper
        android:id="@+id/details"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:flipInterval="1000">
        <ImageView
            android:src="@drawable/bomb5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ImageView>
        <ImageView
            android:src="@drawable/bomb6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ImageView>
        <ImageView
            android:src="@drawable/bomb7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ImageView>
    </ViewFlipper>
    <Button
        android:text="&lt;"
        android:onClick="prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:onClick="auto"
        android:text="自动播放"/>
    <Button
        android:text="&gt;"
        android:onClick="next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

代码下载地址