Android UI開發第六篇——仿QQ的滑動Tab

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>