一、选卡布局
二、自定义每个选项卡的内容布局文件。
三、代码
public class MainActivity extends Activity { private RelativeLayout layout; private RelativeLayout layout1; private RelativeLayout layout2; private RelativeLayout layout3; private RelativeLayout layout4; private RelativeLayout layout5; private TextView tab1; private TextView tab2; private TextView tab3; private TextView tab4; private TextView tab5; private TextView first; private int current = 1; private LinearLayout page; private boolean isAdd = false; private int select_width; private int select_height; private int firstLeft; private int startLeft; private View view2; private View view1; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } //初始化UI private void init(){ layout = (RelativeLayout) findViewById(R.id.root); layout1 = (RelativeLayout) findViewById(R.id.layout1); layout2 = (RelativeLayout) findViewById(R.id.layout2); layout3 = (RelativeLayout) findViewById(R.id.layout3); layout4 = (RelativeLayout) findViewById(R.id.layout4); layout5 = (RelativeLayout) findViewById(R.id.layout5); page=(LinearLayout) this.findViewById(R.id.page); tab1 = (TextView) findViewById(R.id.tab1); tab1.setOnClickListener(onClickListener); tab2 = (TextView) findViewById(R.id.tab2); tab2.setOnClickListener(onClickListener); tab3 = (TextView) findViewById(R.id.tab3); tab3.setOnClickListener(onClickListener); tab4 = (TextView) findViewById(R.id.tab4); tab4.setOnClickListener(onClickListener); tab5 = (TextView) findViewById(R.id.tab5); tab5.setOnClickListener(onClickListener); RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); first = new TextView(this); first.setTag("first"); first.setGravity(Gravity.CENTER); first.setBackgroundResource(R.drawable.slidebar); first.setText(tab1.getText()); view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null); view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null); page.addView(view1); 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; case 4: layout4.addView(first, rl); current = R.id.tab4; break; case 5: layout5.addView(first, rl); current = R.id.tab5; break; default: break; } } 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; case R.id.tab4: changeTop(layout4); break; case R.id.tab5: changeTop(layout5); break; default: break; } } private void changeTop(RelativeLayout relativeLayout){ TextView old = (TextView) 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(); TextView tv = new TextView(this); tv.setTag("move"); tv.setBackgroundResource(R.drawable.slidebar); layout.addView(tv , rl); relativeLayout.removeView(old); } //顶部菜单监听事件 private OnClickListener onClickListener = new OnClickListener(){ public void onClick(View v) { if(!isAdd){ replace(); isAdd = true; } TextView top_select = (TextView) layout.findViewWithTag("move"); top_select.setGravity(Gravity.CENTER); top_select.setText(tab1.getText()); int tabLeft; int endLeft = 0; boolean run = false; switch (v.getId()) { case R.id.tab1: if (current != R.id.tab1) { current = R.id.tab1; page.removeAllViews(); tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2; endLeft = tabLeft - select_width / 2; top_select.setText(tab1.getText()); run = true; page.addView(view1); } break; case R.id.tab2: if (current != R.id.tab2) { current = R.id.tab2; page.removeAllViews(); tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2; endLeft = tabLeft - select_width / 2; top_select.setText(tab2.getText()); run = true; page.addView(view2); } break; case R.id.tab3: if (current != R.id.tab3) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2; endLeft = tabLeft - select_width/2; current = R.id.tab3; top_select.setText(tab3.getText()); run = true; View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null); page.addView(view3); } break; case R.id.tab4: if (current != R.id.tab4) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab4.getLeft() + tab4.getWidth() / 2; endLeft = tabLeft - select_width/2; current = R.id.tab4; top_select.setText(tab4.getText()); run = true; View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null); page.addView(view4); } break; case R.id.tab5: if (current != R.id.tab5) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab5.getParent()).getLeft() + tab5.getLeft() + tab5.getWidth() / 2; endLeft = tabLeft - select_width/2; current = R.id.tab5; top_select.setText(tab5.getText()); run = true; View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page5, null); page.addView(view4); } break; default: break; } if(run){ TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0); startLeft = endLeft - firstLeft; animation.setDuration(100); animation.setFillAfter(true); top_select.bringToFront(); top_select.startAnimation(animation); } } }; } 效果：
