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 张兴业
* 邮箱：xy-zhang#163.com
* android开发进阶群：278401545
*
*/