UI组件-ViewAnimator及其子类

2021-07-11 04:56:51

前言

凡事不必太在意，一切随缘随心，缘深多聚聚，缘浅随它去。

ViewSwitcher的功能与用法

ViewSwitcher代表了视图切换组件，它本身继承了FrameLayout，因此可以将多个View层叠在一起，每次只显示一个组件。当程序控制从一个View切换到另一个View时，ViewSwitcher支持指定的动画。下面来看看仿Android系统Launcher界面示例。假设一共有100个应用程序，每个页面显示20个，每行4个。

代码示例

activity_main.xml
<RelativeLayout 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" >

    <!-- 定义个一个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="<"
        />
    <!-- 定义滚动到下一屏的按钮 -->
    <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=">"
        />
</RelativeLayout>
labelicon.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"
    android:gravity="center">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        />
</LinearLayout>
slidelistview.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:numColumns="4"
   android:gravity="center"
   />
slide_in_left.xml
<?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>
slide_out_right.xml
<?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>
slide_in_right.xml
<?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>
slide_out_left.xml
<?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>
MainActivity.java
public class MainActivity extends Activity {

    //定义一个常量，用于显示每屏显示的应用程序数
    public static final int NUMER_PER_SCREEN = 20;
    //代表应用程序的内部类
    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
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        inflater = LayoutInflater.from(MainActivity.this);
        //创建一个包含100个元素的list集合，用于模拟包含100个应用程序
        for (int i = 0; i < 100; i++) {

            String label = "" + i;
            Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
            DataItem item = new DataItem();
            item.dataName = label;
            item.drawable = drawable;
            items.add(item);
        }

        //计算应用程序所占的总屏数
        //如果应用程序的数量能整除NUMBER_PER_SCREEN，除法的结果就是总屏数
        //如果不能整除，总屏数应该是除法的结果加1
        screenCount = items.size() % NUMER_PER_SCREEN == 0 ?
                items.size() / NUMER_PER_SCREEN :
                items.size() / NUMER_PER_SCREEN + 1;

        switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);
        switcher.setFactory(new 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.setInAnimation(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,R.anim.slide_in_left);
            //为ViewSwitcher的组件隐藏过程设置动画
            switcher.setInAnimation(this,R.anim.slide_out_right);
            //控制下一屏将要显示的GridView对应的Adapter
            ((GridView)switcher.getNextView()).setAdapter(adapter);
            //单击右边按钮，显示下一屏
            switcher.showPrevious();
        }
    }

    //该BaseAdapter负责为每屏显示的GridView提供列表项
    private BaseAdapter adapter = new BaseAdapter() {

        @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;
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public DataItem getItem(int position) {
            //根据screenNo计算第position个列表项的数据
            return items.get(screenNo * NUMER_PER_SCREEN + position);
        }
        @Override
        public int getCount() {
            //如果已经到了最后一屏，且应用程序的数量不能整除NUMBER_PER_SCREEN
            if(screenNo == screenCount - 1 && items.size() % NUMER_PER_SCREEN != 0)
            {
                //最后一屏显示的程序数为应用程序的数量对NUMBER_PER_SCREEN求余
                return items.size() % NUMER_PER_SCREEN;
            }
            //否则每屏显示的程序数量为NUMER_PER_SCREEN
            return NUMER_PER_SCREEN;
        }
    };
}

效果

UI组件-ViewAnimator及其子类
Screenshot_20171020-151447.png

提示

也许你会对这个程序的一些代码感到疑惑，比如说这段代码。
    View view =convertView;
    if(convertView == null)
    {
        //加载R.layout.labelicon布局文件
        view = inflater.inflate(R.layout.labelicon, null);
    }
其实它只不过是ListView缓存的一种手段，这样在你快速滑动的时候可以防止内存溢出。
点击按钮会切换到另一个页面，这可不是跳转到另一Activity。以后我会写关于手势操作的文章，这样就可以通过手势来进行页面切换。

ImageSwitcher

ImageSwitcher继承了ViewSwitcher，因此它具有与ViewSwitcher相同的特征：可以在切换View组件时使用动画效果。ImageSwitcher的操作很简单，只需要如下两步即可。

  • 为ImageSwitcher提供一个ViewFactory，该ViewFactory生成的View组件必须是ImageView。

  • 需要切换图片时，只要调用ImageSwitcher的setImageDrawable(Drawable drawable)、setImageResource(int resid)和setImageURI(Uri uri)方法更换图片即可。

代码示例

imageswitch.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"
    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>
MainActivity.java
public class MainActivity extends Activity {

    int []imageIds = new int[]
    {
        R.drawable.baxianhua,R.drawable.dengta,R.drawable.ic_launcher,R.drawable.juhua,
        R.drawable.kaola,R.drawable.qie,R.drawable.shamo,R.drawable.shuimo,
        R.drawable.yujinx,R.drawable.baxianhua,R.drawable.dengta,R.drawable.ic_launcher,
        R.drawable.juhua,R.drawable.kaola,R.drawable.qie,R.drawable.shamo
    };

    ImageSwitcher switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.imageswitch);

        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 ViewFactory() {

            @Override
            public View makeView() {
                //创建ImageView对象
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
                        LayoutParams.WRAP_CONTENT));

                return imageView;
            }
        });

        SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.cell,
                new String[] {"image"}, new int[] {R.id.image1});

        GridView grid = (GridView) findViewById(R.id.grid01);
        grid.setAdapter(simpleAdapter);

        //添加列表项被选中的监听器
        grid.setOnItemSelectedListener(new GridView.OnItemSelectedListener() {
            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            }


            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                //显示被选中的图片
                switcher.setImageResource(imageIds[position]);
            }
        });

        grid.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //显示被选中的图片
                switcher.setImageResource(imageIds[position]);
            }
        });
    }
}

效果

UI组件-ViewAnimator及其子类
Screenshot_20171020-161723.png

提示

TextSwitcher组件

TextSwitcher组件继承了ViewSwitcher组件，与上面的ImageSwitcher组件的用法相似，唯一不同的是TextSwitcher所需的ViewFactory的makeView()方法必须返回一个TextView组件。

代码示例

textswitcher.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"
    >
    <!-- 定义一个TextSwitcher，并指定了文本切换时的动画效果 -->
    <TextSwitcher
        android:id="@+id/textSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"
        android:onClick="next"
        />
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {

    TextSwitcher textSwitcher;
    String[] strs = new String[]
    {
            "水浒传","三国演义","红楼梦","西游记"
    };
    int curStr;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.textswitcher);

        textSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);
        textSwitcher.setFactory(new ViewFactory() {

            @Override
            public View makeView() {

                TextView tv = new TextView(MainActivity.this);
                tv.setTextSize(40);
                tv.setTextColor(Color.MAGENTA);
                return tv;
            }
        });
        //调用next方法显示一个字符串
        next(null);
    }
    public void next(View v) {
        textSwitcher.setText(strs[curStr++ % strs.length]);
    }
}

效果

UI组件-ViewAnimator及其子类
Screenshot_20171023-092903.png
点击文本会出现切换效果

提示

TextSwitcher与TextView的功能有点相似，它们都可用于显示文本内容，区别在于TextSwitcher的效果更炫，它可以指定文本切换时的动画效果。

ViewFlipper组件

ViewFlipper组件继承了ViewAnimator，它可以调用addView(View v)方法添加多个组件，一旦向ViewFlipper中添加多个组件之后，ViewFlipper就可使动画控制多个组件之间的切换效果。它与前边介绍的AdapterViewFlipper有较大的相似性，区别就是ViewFlipper需要开发者通过addView(View v)添加多个View，而AdapterViewFlipper只要传入一个Adapter，Adapter将会负责提供多个View。

代码示例

viewflipper.xml
<?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/baxianhua"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:src="@drawable/dengta"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:src="@drawable/juhua"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </ViewFlipper>
    <Button
        android:text="<"
        android:onClick="prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        />

    <Button
        android:text="自动播放"
        android:onClick="auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        />
    <Button
        android:text=">"
        android:onClick="next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />
</RelativeLayout>
MainAcitivity.java
public class MainActivity extends Activity {

    private ViewFlipper viewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewflipper);
        viewFlipper = (ViewFlipper) findViewById(R.id.details);
    }

    public void prev(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_right);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_left);
        // 显示上一个组件
        viewFlipper.showPrevious();
        // 停止自动播放
        viewFlipper.stopFlipping();
    }

    public void next(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_left);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_right);
        // 显示下一个组件
        viewFlipper.showNext();
        // 停止自动播放
        viewFlipper.stopFlipping();
    }

    public void auto(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_left);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_right);
        //开始自动播放
        viewFlipper.startFlipping();
    }
}

效果

UI组件-ViewAnimator及其子类
Screenshot_20171023-100803.png

提示

ViewFlipper可以指定与AdapterViewFlipper相同的XML属性。
上一篇：将函数作为子组件的组件


下一篇：Yii 2.0实现联表查询加搜索分页的方法示例