文章内容
1. TextSwitcher组件介绍
2. 使用TextSwitcher组件
3. 应用实例代码
1. TextSwitcher组件介绍
TextSwitcher 是android平台自带的组件,它继承了ViewSwitcher和ViewAnimator,主要为文本切换提供动画效果。TextSwitcher包含两个子视图(TextView),但同一时刻只能显示其中的一个。在由一个视图向另一个视图切换时,TextSwitcher可以做到先淡出当前的视图,然后再淡入下一个视图,因而有动画之效果。
2. 使用TextSwitcher组件
TextSwitcher的使用十分简单,其自身包含的成员函数也相当少。使用该组件的代码可以直接扩展Activity类,或者同时实现ViewSwitcher.ViewFactory接口。如果像往常一样直接扩展Activity类,我们需要手动为TextSwitcher添加两个子视图(只能是两个TextView),如果同时实现了ViewSwitcher.ViewFactory接口,则需要使用该接口内的方法来添加视图(该方法被调用两次)。无论使用何种方式,都需要为两个子视图设置动画(淡入,淡出)。最后,在需要切换视图时,只需要调用TextSwitcher内的setText方法。
3. 应用实例代码
最后,我们通过一个简单的例子来具体演示如何使用TextSwitcher组件。
(提示:创建工程及设置应用清单文件的过程省略。)
首先,在工程的res/layout/目录下创建一名为show_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" android:orientation="vertical" > <TextView android:id="@+id/prompt" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Click the button to display the text frade-in and frade-out."/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/click" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30dp" android:text="Click me" /> <TextSwitcher android:id="@+id/switcher" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout>
然后定义活动, 我们先只扩展Activity类:
public class UseTextSwitcher extends Activity{ private TextSwitcher mSwitcher; private int mClickTimes = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.show_textswitcher); mSwitcher = (TextSwitcher) findViewById(R.id.switcher); //1. mSwitcher.addView(makeView()); //2. mSwitcher.addView(makeView()); Animation fade_in = AnimationUtils.loadAnimation(this,android.R.anim.fade_in); Animation fade_out = AnimationUtils.loadAnimation(this, android.R.anim.fade_out); mSwitcher.setInAnimation(fade_in); mSwitcher.setOutAnimation(fade_out); mSwitcher.setText(String.valueOf(mClickTimes)); Button nextButton = (Button) findViewById(R.id.click); nextButton.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { mClickTimes++; mSwitcher.setText(String.valueOf(mClickTimes)); } }); } public View makeView() { TextView t = new TextView(this); t.setGravity(Gravity.CENTER_VERTICAL | Gravity.CENTER_HORIZONTAL); t.setTextSize(30); Log.w("wanjf", "makeView is called!"); return t; } }
在代码里,我们只调用了两次addView(makeView())方法为TextSwitcher添加了两个子视图,必须是两 个。然后使用setInAnimation,setOutAnimation方法设置淡入和淡出动画,最后使用setText设置初始值。在button 的点击事件回调里简单地调用setText方法来执行文本切换。
提示:makeView方法返回一个TextView,该方法可以取任意的名字,之所以使用makeView名字是为了在UseTextSwitcher同时实现ViewSwitcher.ViewFactory接口时可以继续使用。
现在我们让上述代码同时实现ViewSwitcher.ViewFactory接口,该接口内有唯一的方法makeView需要被实现(上述代码已具体该条件),修改后的代码如下:
public class UseTextSwitcher extends Activity implements ViewSwitcher.ViewFactory { private TextSwitcher mSwitcher; private int mClickTimes = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.show_textswitcher); mSwitcher = (TextSwitcher) findViewById(R.id.switcher); mSwitcher.setFactory(this); Animation fade_in = AnimationUtils.loadAnimation(this,android.R.anim.fade_in); Animation fade_out = AnimationUtils.loadAnimation(this, android.R.anim.fade_out); mSwitcher.setInAnimation(fade_in); mSwitcher.setOutAnimation(fade_out); mSwitcher.setText(String.valueOf(mClickTimes)); Button nextButton = (Button) findViewById(R.id.click); nextButton.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { mClickTimes++; mSwitcher.setText(String.valueOf(mClickTimes)); } }); } public View makeView() { TextView t = new TextView(this); t.setGravity(Gravity.CENTER_VERTICAL | Gravity.CENTER_HORIZONTAL); t.setTextSize(30); Log.w("wanjf", "makeView is called!"); return t; } }
仔细观察后发现,修改后的代码和先前区别并不是很大,除了实现ViewSwitcher.ViewFactory外,用mSwitcher.setFactory(this)替换两个mSwitcher.addView(makeView())的调用即可。因为在mSwitcher.setFactory内部完成添加视图的工作。
最后,运行程序如下:
2012年5月10,晚毕