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,當然也可以自定義。

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