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

来源：互联网发布：校园网网络工程设计书编辑：程序博客网时间：2024/06/15 21:02

使用了ActivityGroup。
java code：
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 code：
<?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>