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_selectprivate int select_width; // top_select_widthprivate int select_height; // top_select_heightprivate int firstLeft; // 第一次添加後的左邊距*****private int startLeft; // 起始左邊距// 添加一個view，移除一個viewprivate 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>