Android开发-UI控件:选项卡切换时改变布局中内容的方法

文章转自: http://www.itstrike.cn/question/8a6e55b3-9dcf-4cb1-a867-49e1611f804b.html

界面

界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<? xml  version = "1.0"  encoding = "utf-8" ?> < LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"      xmlns:umadsdk = "http://schemas.android.com/apk/res/com.LoveBus"      android:layout_width = "fill_parent"      android:layout_height = "fill_parent"      android:orientation = "vertical"  >        < LinearLayout          android:id = "@+id/linearLayout1"          android:layout_width = "fill_parent"          android:layout_height = "100.0dip"          android:background = "#FFFFFF"  >            < TextView              android:id = "@+id/text1"              android:layout_width = "fill_parent"              android:layout_height = "fill_parent"              android:layout_weight = "1.0"              android:gravity = "center"              android:text = "页卡1"              android:textColor = "#000000"              android:textSize = "22.0dip"  />            < TextView              android:id = "@+id/text2"              android:layout_width = "fill_parent"              android:layout_height = "fill_parent"              android:layout_weight = "1.0"              android:gravity = "center"              android:text = "页卡2"              android:textColor = "#000000"              android:textSize = "22.0dip"  />            < TextView              android:id = "@+id/text3"              android:layout_width = "fill_parent"              android:layout_height = "fill_parent"              android:layout_weight = "1.0"              android:gravity = "center"              android:text = "页卡3"              android:textColor = "#000000"              android:textSize = "22.0dip"  />      </ LinearLayout >        < ImageView          android:id = "@+id/cursor"          android:layout_width = "fill_parent"          android:layout_height = "wrap_content"          android:scaleType = "matrix"          android:src = "@drawable/a"  />        < android.support.v4.view.ViewPager          android:id = "@+id/vPager"          android:layout_width = "wrap_content"          android:layout_height = "wrap_content"          android:layout_gravity = "center"          android:layout_weight = "1.0"          android:background = "#000000"          android:flipInterval = "30"          android:persistentDrawingCache = "animation"  />   </ LinearLayout >

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。

1 2 3 4 5 6 7

<? xml  version = "1.0"  encoding = "utf-8" ?> < LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"      android:layout_width = "fill_parent"      android:layout_height = "fill_parent"      android:orientation = "vertical"      android:background = "#158684"  > </ LinearLayout >

代码

(1) 变量的定义

1 2 3 4 5 6 7

private  ViewPager mPager; //页卡内容      private  List<View> listViews;  // Tab页面列表      private  ImageView cursor; // 动画图片      private  TextView t1, t2, t3; // 页卡头标      private  int  offset =  0 ; // 动画图片偏移量      private  int  currIndex =  0 ; // 当前页卡编号      private  int  bmpW; // 动画图片宽度

(2) 初始化头标

1 2 3 4 5 6 7 8 9 10 11 12

/**       * 初始化头标 */      private  void  InitTextView() {          t1 = (TextView) findViewById(R.id.text1);          t2 = (TextView) findViewById(R.id.text2);          t3 = (TextView) findViewById(R.id.text3);            t1.setOnClickListener( new  MyOnClickListener( 0 ));          t2.setOnClickListener( new  MyOnClickListener( 1 ));          t3.setOnClickListener( new  MyOnClickListener( 2 ));      }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/**       * 头标点击监听 */      public  class  MyOnClickListener  implements  View.OnClickListener {          private  int  index =  0 ;            public  MyOnClickListener( int  i) {              index = i;          }            @Override          public  void  onClick(View v) {              mPager.setCurrentItem(index);          }      };

(3) 初始化页卡内容区

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/**       * 初始化ViewPager */      private  void  InitViewPager() {          mPager = (ViewPager) findViewById(R.id.vPager);          listViews =  new  ArrayList<View>();          LayoutInflater mInflater = getLayoutInflater();          listViews.add(mInflater.inflate(R.layout.lay1,  null ));          listViews.add(mInflater.inflate(R.layout.lay2,  null ));          listViews.add(mInflater.inflate(R.layout.lay3,  null ));          mPager.setAdapter( new  MyPagerAdapter(listViews));          mPager.setCurrentItem( 0 );          mPager.setOnPageChangeListener( new  MyOnPageChangeListener());      }

我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

/**       * ViewPager适配器 */      public  class  MyPagerAdapter  extends  PagerAdapter {          public  List<View> mListViews;            public  MyPagerAdapter(List<View> mListViews) {              this .mListViews = mListViews;          }            @Override          public  void  destroyItem(View arg0,  int  arg1, Object arg2) {              ((ViewPager) arg0).removeView(mListViews.get(arg1));          }            @Override          public  void  finishUpdate(View arg0) {          }            @Override          public  int  getCount() {              return  mListViews.size();          }            @Override          public  Object instantiateItem(View arg0,  int  arg1) {              ((ViewPager) arg0).addView(mListViews.get(arg1),  0 );              return  mListViews.get(arg1);          }            @Override          public  boolean  isViewFromObject(View arg0, Object arg1) {              return  arg0 == (arg1);          }            @Override          public  void  restoreState(Parcelable arg0, ClassLoader arg1) {          }            @Override          public  Parcelable saveState() {              return  null ;          }            @Override          public  void  startUpdate(View arg0) {          }      }

(4) 初始化动画

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/**       * 初始化动画 */      private  void  InitImageView() {          cursor = (ImageView) findViewById(R.id.cursor);          bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)                  .getWidth(); // 获取图片宽度          DisplayMetrics dm =  new  DisplayMetrics();          getWindowManager().getDefaultDisplay().getMetrics(dm);          int  screenW = dm.widthPixels; // 获取分辨率宽度          offset = (screenW /  3  - bmpW) /  2 ; // 计算偏移量          Matrix matrix =  new  Matrix();          matrix.postTranslate(offset,  0 );          cursor.setImageMatrix(matrix); // 设置动画初始位置      }

根据屏幕的分辨率和图片的宽度计算动画移动的偏移量

(5) 实现页卡切换监听

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

/**       * 页卡切换监听 */      public  class  MyOnPageChangeListener  implements  OnPageChangeListener {            int  one = offset *  2  + bmpW; // 页卡1 -> 页卡2 偏移量          int  two = one *  2 ; // 页卡1 -> 页卡3 偏移量            @Override          public  void  onPageSelected( int  arg0) {              Animation animation =  null ;              switch  (arg0) {              case  0 :                  if  (currIndex ==  1 ) {                      animation =  new  TranslateAnimation(one,  0 ,  0 ,  0 );                  }  else  if  (currIndex ==  2 ) {                      animation =  new  TranslateAnimation(two,  0 ,  0 ,  0 );                  }                  break ;              case  1 :                  if  (currIndex ==  0 ) {                      animation =  new  TranslateAnimation(offset, one,  0 ,  0 );                  }  else  if  (currIndex ==  2 ) {                      animation =  new  TranslateAnimation(two, one,  0 ,  0 );                  }                  break ;              case  2 :                  if  (currIndex ==  0 ) {                      animation =  new  TranslateAnimation(offset, two,  0 ,  0 );                  }  else  if  (currIndex ==  1 ) {                      animation =  new  TranslateAnimation(one, two,  0 ,  0 );                  }                  break ;              }              currIndex = arg0;              animation.setFillAfter( true ); // True:图片停在动画结束位置              animation.setDuration( 300 );              cursor.startAnimation(animation);          }            @Override          public  void  onPageScrolled( int  arg0,  float  arg1,  int  arg2) {          }            @Override          public  void  onPageScrollStateChanged( int  arg0) {          }      }

演示