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> 
 
 

 
 

  
  


 
 

 
 

  
       本文转自xyz_lmn51CTO博客，原文链接：http://blog.51cto.com/xyzlmn/817371
  ，如需转载请自行联系原作者