Android使用TextSwitcher和ImageSwitcher实现平滑过渡

更改view当中的内容,比如TextView是我们进行项目开发过程中经常遇到的操作。

如果直接使用setText方法切换文字的话,TextView的内容是立刻改变的,没有一个平滑的效果,没有良好的视觉体验。

而TextSwitcher和ImageSwitcher正是实现了这样的功能。

布局文件如下:
< LinearLayout 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"
    android:orientation= "vertical"
    android:paddingBottom= "@dimen/activity_vertical_margin"
    android:paddingLeft= "@dimen/activity_horizontal_margin"
    android:paddingRight= "@dimen/activity_horizontal_margin"
    android:paddingTop= "@dimen/activity_vertical_margin"
    tools:context= ".MainActivity" >

    <TextSwitcher
        android:id= "@+id/my_txt_switcher"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content" />

    <ImageSwitcher
        android:id= "@+id/my_img_switcher"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content" />

    <Button
        android:id= "@+id/buttonleft"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content"
        android:text ="切换1" />

    <Button
        android:id= "@+id/buttonright"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content"
        android:text ="切换2" />

</ LinearLayout>

两个switcher的view,两个button,我就不多解释了。

代码如下:
public class MainActivity extends Activity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
           setContentView(R.layout. activity_main);
           
            //使用android自带的左边滑入,右边滑出的动画
           Animation in = AnimationUtils.loadAnimation(MainActivity. this, android.R.anim.slide_in_left );
           Animation out = AnimationUtils.loadAnimation(MainActivity. this, android.R.anim.slide_out_right );
           
            final TextSwitcher txt_switcher = (TextSwitcher)findViewById(R.id.my_txt_switcher );
            //通过ViewFactory创建用于在TextSwitcher中切换的TextView
           txt_switcher.setFactory( new ViewFactory() {
                
                 @Override
                 public View makeView() {
                      // TODO Auto-generated method stub
                     TextView txt = new TextView(MainActivity.this );
                     txt.setGravity(Gravity. CENTER);
                      return txt;
                }
           });
            //设置进入动画,设置移出动画
           txt_switcher.setInAnimation(in);
           txt_switcher.setOutAnimation(out);
           
            final ImageSwitcher img_switcher = (ImageSwitcher)findViewById(R.id.my_img_switcher );
           img_switcher.setFactory( new ViewFactory() {
                
                 @Override
                 public View makeView() {
                      // TODO Auto-generated method stub
                     ImageView img = new ImageView(MainActivity.this );
                     img.setScaleType(ImageView.ScaleType. FIT_CENTER);
                      return img;
                }
           });
           img_switcher.setInAnimation(in);
           img_switcher.setOutAnimation(out);
           
           findViewById(R.id. buttonleft).setOnClickListener( new OnClickListener() {
                
                 @Override
                 public void onClick(View v) {
                     txt_switcher.setText( "This is left");
//                   img_switcher.setImageResource(R.drawable.ic_launcher);
                }
           });
           
           findViewById(R.id. buttonright).setOnClickListener( new OnClickListener() {
                
                 @Override
                 public void onClick(View v) {
                     txt_switcher.setText( "This is Right");
//                   img_switcher.setImageResource(R.drawable.inter_cloud);
                }
           });
           
     }

      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
           getMenuInflater().inflate(R.menu. main, menu);
            return true;
     }

}

就这么几行代码便改变了文本的内容,又增加了很酷的动画效果。本例中使用了slide_in_left/slide_out_right
也可以使用fade_in/fade_out,当然也可以自定义。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章