Android UI开发第六篇——仿QQ的滑动Tab

 

代码下载地址：http://www.devdiv.com/thread-101454-1-1.html

使用了ActivityGroup。

 public class MainActivity extends ActivityGroup {




      private RelativeLayout layout;



      private RelativeLayout layout1;

      private RelativeLayout layout2;

      private RelativeLayout layout3;



      private RelativeLayout bodylayout;



      private ImageView tab1;

      private ImageView tab2;

      private ImageView tab3;



      private ImageView first;

      private int current = 1; //默认选中第一个，可以动态的改变此参数值



      public void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(R.layout.main);

          initUI();

      }



      private void initUI(){

          layout = (RelativeLayout) findViewById(R.id.root);



          layout1 = (RelativeLayout) findViewById(R.id.layout1);

          layout2 = (RelativeLayout) findViewById(R.id.layout2);

          layout3 = (RelativeLayout) findViewById(R.id.layout3);

          bodylayout = (RelativeLayout) findViewById(R.id.bodylayout);



          tab1 = (ImageView) findViewById(R.id.tab1);

          tab1.setOnClickListener(onClickListener);

          tab2 = (ImageView) findViewById(R.id.tab2);

          tab2.setOnClickListener(onClickListener);

          tab3 = (ImageView) findViewById(R.id.tab3);

          tab3.setOnClickListener(onClickListener);



          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

          rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);

          first = new ImageView(this);

          first.setTag("first");

          first.setImageResource(R.drawable.topbar_select);



          // 默认选中项

          switch (current) {

          case 1:

              layout1.addView(first, rl);

              current = R.id.tab1;

              break;

          case 2:

              layout2.addView(first, rl);

              current = R.id.tab2;

              break;

          case 3:

              layout3.addView(first, rl);

              current = R.id.tab3;

              break;

          default:

              break;

          }

          View view = getLocalActivityManager().startActivity("index",

                  new Intent(MainActivity.this, Tab1.class))

                  .getDecorView();

          bodylayout.addView(view);



      }




      private boolean isAdd = false; // 是否添加过 top_select

      private int select_width; // top_select_width

      private int select_height; // top_select_height

      private int firstLeft; // 第一次添加后的左边距*****

      private int startLeft; // 起始左边距



      // 添加一个view，移除一个view

      private void replace() {

          switch (current) {

          case R.id.tab1:

              changeTop(layout1);

              break;

          case R.id.tab2:

              changeTop(layout2);

              break;

          case R.id.tab3:

              changeTop(layout3);

              break;

          default:

              break;

          }

      }



      private void changeTop(RelativeLayout relativeLayout){

          ImageView old = (ImageView) relativeLayout.findViewWithTag("first");;

          select_width = old.getWidth();

          select_height = old.getHeight();



          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height);

          rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();

          rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();



          // 获取起始位置

          firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();



          ImageView iv = new ImageView(this);

          iv.setTag("move");

          iv.setImageResource(R.drawable.topbar_select);



          layout.addView(iv , rl);

          relativeLayout.removeView(old);

      }



      private OnClickListener onClickListener = new OnClickListener(){

          public void onClick(View v) {

              if(!isAdd){

                  replace(); // 初次使用移除old 添加新的top_select为RelativeLayout所使用

                  isAdd = true;

              }



              ImageView top_select = (ImageView) layout.findViewWithTag("move");

              int tabLeft;

              int endLeft = 0;



              boolean run = false;




              switch (v.getId()) {

              case R.id.tab1:

                  if (current != R.id.tab1) {

                      // 中心位置

                      tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;

                      // 最终位置

                      endLeft = tabLeft - select_width / 2;

                      current = R.id.tab1;

                      run = true;

                      bodylayout.removeAllViews();

                      View view = getLocalActivityManager().startActivity("index",

                              new Intent(MainActivity.this, Tab1.class))

                              .getDecorView();

                      bodylayout.addView(view);

                  }

                  break;

              case R.id.tab2:

                  if (current != R.id.tab2) {

                      tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;

                      endLeft = tabLeft - select_width / 2;

                      current = R.id.tab2;

                      run = true;

                      bodylayout.removeAllViews();

                      View view = getLocalActivityManager().startActivity("index",

                              new Intent(MainActivity.this, Tab2.class))

                              .getDecorView();

                      bodylayout.addView(view);

                  }

                  break;

              case R.id.tab3:

                  if (current != R.id.tab3) {

                      tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;

                      endLeft = tabLeft - select_width/2;

                      current = R.id.tab3;

                      run = true;

                      bodylayout.removeAllViews();

                      View view = getLocalActivityManager().startActivity("index",

                              new Intent(MainActivity.this, Tab3.class))

                              .getDecorView();

                      bodylayout.addView(view);

                  }

                  break;

              default:

                  break;

              }



              if(run){

                  TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);

                  startLeft = endLeft - firstLeft; // 重新设定起始位置

                  animation.setDuration(400);

                  animation.setFillAfter(true);

                  top_select.bringToFront();

                  top_select.startAnimation(animation);

              }



          }




      };




 }

 

 <?xml version="1.0" encoding="utf-8"?>

 <RelativeLayout

      xmlns:android="http://schemas.android.com/apk/res/android"

      android:id="@+id/root"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      >

      <LinearLayout

          android:orientation="vertical"

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:background="@drawable/default_bg"

          >

          <LinearLayout

              android:orientation="horizontal"

              android:layout_width="fill_parent"

              android:layout_height="fill_parent"

              android:layout_weight="6.0"

              >

              <RelativeLayout

                  android:id="@+id/layout1"

                  android:layout_width="fill_parent"

                  android:layout_height="wrap_content"

                  android:layout_weight="1.0"

                  android:layout_gravity="center_vertical"

                  >

                  <ImageView

                      android:id="@+id/tab1"

                      android:layout_width="wrap_content"

                      android:layout_height="wrap_content"

                      android:src="@drawable/tab1"

                      android:layout_centerInParent="true"

                      />

              </RelativeLayout>

              <RelativeLayout

                  android:id="@+id/layout2"

                  android:layout_width="fill_parent"

                  android:layout_height="wrap_content"

                  android:layout_weight="1.0"

                  android:layout_gravity="center_vertical"

                  >

                  <ImageView

                      android:id="@+id/tab2"

                      android:layout_width="wrap_content"

                      android:layout_height="wrap_content"

                      android:src="@drawable/tab2"

                      android:layout_centerInParent="true"

                      />

              </RelativeLayout>

              <RelativeLayout

                  android:id="@+id/layout3"

                  android:layout_width="fill_parent"

                  android:layout_height="wrap_content"

                  android:layout_weight="1.0"

                  android:layout_gravity="center_vertical"

                  >

                  <ImageView

                      android:id="@+id/tab3"

                      android:layout_width="wrap_content"

                      android:layout_height="wrap_content"

                      android:src="@drawable/tab3"

                      android:layout_centerInParent="true"

                      />

              </RelativeLayout>

          </LinearLayout>

          <RelativeLayout

              android:orientation="horizontal"

              android:layout_width="fill_parent"

              android:layout_height="fill_parent"

              android:layout_weight="1.0"

              android:background="#ffffff"

              android:gravity="center"

              android:id="@+id/bodylayout"

              >



          </RelativeLayout>

      </LinearLayout>

 </RelativeLayout>

/**
* @author 张兴业
* 邮箱：[email protected]
* qq:363302850
*
*/

http://www.devdiv.com/home.php?mod=space&uid=14682&do=blog&id=3841

/**
* @author 张兴业
* 邮箱：[email protected]
* qq:363302850
*
*/