UI组件-ViewAnimator及其子类-低调大师

UI组件-ViewAnimator及其子类

2017-10-22 493

前言

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

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;
        }
    };
}

效果

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]);
            }
        });
    }
}

效果

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]);
    }
}

效果

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();
    }
}

效果

Screenshot_20171023-100803.png

提示

ViewFlipper可以指定与AdapterViewFlipper相同的XML属性。

微信关注我们

原文链接：https://yq.aliyun.com/articles/637570

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

android:TabWidget/TabHost

一：使用系统自带写好的TabHost（及继承自TabActivity类） tabHost=this.getTabHost(); tabHost.addTab(tabHost.newTabSpec("tab1") .setIndicator("list")//设置显示的tab名 .setContent(new Intent(this, List1.class)));//设置跳转的activity 可参考：http://wangjun.easymorse.com/?p=155 二：就是定义我们自己的tabHost：不用继承TabActivity 自定义一个TabHost的xml布局，注意布局文件中的TabWidget的id必须定义为：android:id="@android:id/tabs"，FrameLayout的id必须定义为：android:id="@android:id/tabcontent" 其它控件没有限制，否则报错。 tabHost=(TabHost)this.findViewById(R.id.TabHost01); 可参考http://fatkun.com/20...

2017-10-22

639

前言我们听过无数的道理，却仍旧过不好这一生。 Toast组件 Toast是一种非常方便的提示消息框，它会在程序界面上显示一个简单的提示信息。它具有如下两个特点。 Toast提示信息不会获得焦点。 Toast提示信息过一段时间会自动消失。使用Toast来生成提示消息也非常简单，只要如下几个步骤。调用Toast的构造器或makeText()静态方法创建一个Toast对象。调用Toast的方法来设置该消息的对齐方式、页边距等。调用Toast的show()方法将它显示出来。除此之外，Toast不仅可以显示文本，还可以显示图片、列表之类的复杂提示。代码示例 toast.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:orie...

2017-10-22

718

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。