Android UI开发第六篇——仿QQ的滑动Tab _class

代码下载地址：http://www.devdiv.com/thread-101454-1-1.html

使用了ActivityGroup。

  1. public class MainActivity extends ActivityGroup { 
  2.  
  3.  
  4.  
  5.  
  6.      private RelativeLayout layout; 
  7.  
  8.      
  9.  
  10.      private RelativeLayout layout1; 
  11.  
  12.      private RelativeLayout layout2; 
  13.  
  14.      private RelativeLayout layout3; 
  15.  
  16.      
  17.  
  18.      private RelativeLayout bodylayout; 
  19.  
  20.      
  21.  
  22.      private ImageView tab1; 
  23.  
  24.      private ImageView tab2; 
  25.  
  26.      private ImageView tab3; 
  27.  
  28.      
  29.  
  30.      private ImageView first; 
  31.  
  32.      private int current = 1; //默认选中第一个，可以动态的改变此参数值 
  33.  
  34.      
  35.  
  36.      public void onCreate(Bundle savedInstanceState) { 
  37.  
  38.          super.onCreate(savedInstanceState); 
  39.  
  40.          setContentView(R.layout.main); 
  41.  
  42.          initUI(); 
  43.  
  44.      } 
  45.  
  46.      
  47.  
  48.      private void initUI(){ 
  49.  
  50.          layout = (RelativeLayout) findViewById(R.id.root); 
  51.  
  52.          
  53.  
  54.          layout1 = (RelativeLayout) findViewById(R.id.layout1); 
  55.  
  56.          layout2 = (RelativeLayout) findViewById(R.id.layout2); 
  57.  
  58.          layout3 = (RelativeLayout) findViewById(R.id.layout3); 
  59.  
  60.          bodylayout = (RelativeLayout) findViewById(R.id.bodylayout); 
  61.  
  62.          
  63.  
  64.          tab1 = (ImageView) findViewById(R.id.tab1); 
  65.  
  66.          tab1.setOnClickListener(onClickListener); 
  67.  
  68.          tab2 = (ImageView) findViewById(R.id.tab2); 
  69.  
  70.          tab2.setOnClickListener(onClickListener); 
  71.  
  72.          tab3 = (ImageView) findViewById(R.id.tab3); 
  73.  
  74.          tab3.setOnClickListener(onClickListener); 
  75.  
  76.          
  77.  
  78.          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
  79.  
  80.          rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); 
  81.  
  82.          first = new ImageView(this); 
  83.  
  84.          first.setTag("first"); 
  85.  
  86.          first.setImageResource(R.drawable.topbar_select); 
  87.  
  88.          
  89.  
  90.          // 默认选中项 
  91.  
  92.          switch (current) { 
  93.  
  94.          case 1: 
  95.  
  96.              layout1.addView(first, rl); 
  97.  
  98.              current = R.id.tab1; 
  99.  
  100.              break; 
  101.  
  102.          case 2: 
  103.  
  104.              layout2.addView(first, rl); 
  105.  
  106.              current = R.id.tab2; 
  107.  
  108.              break; 
  109.  
  110.          case 3: 
  111.  
  112.              layout3.addView(first, rl); 
  113.  
  114.              current = R.id.tab3; 
  115.  
  116.              break; 
  117.  
  118.          default: 
  119.  
  120.              break; 
  121.  
  122.          } 
  123.  
  124.          View view = getLocalActivityManager().startActivity("index", 
  125.  
  126.                  new Intent(MainActivity.this, Tab1.class)) 
  127.  
  128.                  .getDecorView(); 
  129.  
  130.          bodylayout.addView(view); 
  131.  
  132.          
  133.  
  134.      } 
  135.  
  136.  
  137.  
  138.  
  139.      private boolean isAdd = false; // 是否添加过 top_select 
  140.  
  141.      private int select_width; // top_select_width 
  142.  
  143.      private int select_height; // top_select_height 
  144.  
  145.      private int firstLeft; // 第一次添加后的左边距***** 
  146.  
  147.      private int startLeft; // 起始左边距 
  148.  
  149.      
  150.  
  151.      // 添加一个view，移除一个view 
  152.  
  153.      private void replace() { 
  154.  
  155.          switch (current) { 
  156.  
  157.          case R.id.tab1: 
  158.  
  159.              changeTop(layout1); 
  160.  
  161.              break; 
  162.  
  163.          case R.id.tab2: 
  164.  
  165.              changeTop(layout2); 
  166.  
  167.              break; 
  168.  
  169.          case R.id.tab3: 
  170.  
  171.              changeTop(layout3); 
  172.  
  173.              break; 
  174.  
  175.          default: 
  176.  
  177.              break; 
  178.  
  179.          } 
  180.  
  181.      } 
  182.  
  183.      
  184.  
  185.      private void changeTop(RelativeLayout relativeLayout){ 
  186.  
  187.          ImageView old = (ImageView) relativeLayout.findViewWithTag("first");; 
  188.  
  189.          select_width = old.getWidth(); 
  190.  
  191.          select_height = old.getHeight(); 
  192.  
  193.          
  194.  
  195.          RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height); 
  196.  
  197.          rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); 
  198.  
  199.          rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop(); 
  200.  
  201.          
  202.  
  203.          // 获取起始位置 
  204.  
  205.          firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); 
  206.  
  207.          
  208.  
  209.          ImageView iv = new ImageView(this); 
  210.  
  211.          iv.setTag("move"); 
  212.  
  213.          iv.setImageResource(R.drawable.topbar_select); 
  214.  
  215.          
  216.  
  217.          layout.addView(iv , rl); 
  218.  
  219.          relativeLayout.removeView(old); 
  220.  
  221.      } 
  222.  
  223.      
  224.  
  225.      private OnClickListener onClickListener = new OnClickListener(){ 
  226.  
  227.          public void onClick(View v) { 
  228.  
  229.              if(!isAdd){ 
  230.  
  231.                  replace(); // 初次使用移除old 添加新的top_select为RelativeLayout所使用 
  232.  
  233.                  isAdd = true; 
  234.  
  235.              } 
  236.  
  237.              
  238.  
  239.              ImageView top_select = (ImageView) layout.findViewWithTag("move"); 
  240.  
  241.              int tabLeft; 
  242.  
  243.              int endLeft = 0; 
  244.  
  245.              
  246.  
  247.              boolean run = false; 
  248.  
  249.  
  250.  
  251.  
  252.              switch (v.getId()) { 
  253.  
  254.              case R.id.tab1: 
  255.  
  256.                  if (current != R.id.tab1) { 
  257.  
  258.                      // 中心位置 
  259.  
  260.                      tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2; 
  261.  
  262.                      // 最终位置 
  263.  
  264.                      endLeft = tabLeft - select_width / 2; 
  265.  
  266.                      current = R.id.tab1; 
  267.  
  268.                      run = true; 
  269.  
  270.                      bodylayout.removeAllViews(); 
  271.  
  272.                      View view = getLocalActivityManager().startActivity("index", 
  273.  
  274.                              new Intent(MainActivity.this, Tab1.class)) 
  275.  
  276.                              .getDecorView(); 
  277.  
  278.                      bodylayout.addView(view); 
  279.  
  280.                  } 
  281.  
  282.                  break; 
  283.  
  284.              case R.id.tab2: 
  285.  
  286.                  if (current != R.id.tab2) { 
  287.  
  288.                      tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2; 
  289.  
  290.                      endLeft = tabLeft - select_width / 2; 
  291.  
  292.                      current = R.id.tab2; 
  293.  
  294.                      run = true; 
  295.  
  296.                      bodylayout.removeAllViews(); 
  297.  
  298.                      View view = getLocalActivityManager().startActivity("index", 
  299.  
  300.                              new Intent(MainActivity.this, Tab2.class)) 
  301.  
  302.                              .getDecorView(); 
  303.  
  304.                      bodylayout.addView(view); 
  305.  
  306.                  } 
  307.  
  308.                  break; 
  309.  
  310.              case R.id.tab3: 
  311.  
  312.                  if (current != R.id.tab3) { 
  313.  
  314.                      tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2; 
  315.  
  316.                      endLeft = tabLeft - select_width/2; 
  317.  
  318.                      current = R.id.tab3; 
  319.  
  320.                      run = true; 
  321.  
  322.                      bodylayout.removeAllViews(); 
  323.  
  324.                      View view = getLocalActivityManager().startActivity("index", 
  325.  
  326.                              new Intent(MainActivity.this, Tab3.class)) 
  327.  
  328.                              .getDecorView(); 
  329.  
  330.                      bodylayout.addView(view); 
  331.  
  332.                  } 
  333.  
  334.                  break; 
  335.  
  336.              default: 
  337.  
  338.                  break; 
  339.  
  340.              } 
  341.  
  342.              
  343.  
  344.              if(run){ 
  345.  
  346.                  TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0); 
  347.  
  348.                  startLeft = endLeft - firstLeft; // 重新设定起始位置 
  349.  
  350.                  animation.setDuration(400); 
  351.  
  352.                  animation.setFillAfter(true); 
  353.  
  354.                  top_select.bringToFront(); 
  355.  
  356.                  top_select.startAnimation(animation); 
  357.  
  358.              } 
  359.  
  360.              
  361.  
  362.          } 
  363.  
  364.  
  365.  
  366.  
  367.      }; 
  368.  
  369.  
  370.  
  371.  
  372. } 

 

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <RelativeLayout  
  4.  
  5.      xmlns:android="http://schemas.android.com/apk/res/android" 
  6.  
  7.      android:id="@+id/root" 
  8.  
  9.      android:layout_width="fill_parent"  
  10.  
  11.      android:layout_height="fill_parent"  
  12.  
  13.      > 
  14.  
  15.      <LinearLayout  
  16.  
  17.          android:orientation="vertical" 
  18.  
  19.          android:layout_width="fill_parent"  
  20.  
  21.          android:layout_height="fill_parent"  
  22.  
  23.          android:background="@drawable/default_bg" 
  24.  
  25.          > 
  26.  
  27.          <LinearLayout  
  28.  
  29.              android:orientation="horizontal" 
  30.  
  31.              android:layout_width="fill_parent"  
  32.  
  33.              android:layout_height="fill_parent"  
  34.  
  35.              android:layout_weight="6.0" 
  36.  
  37.              > 
  38.  
  39.              <RelativeLayout  
  40.  
  41.                  android:id="@+id/layout1" 
  42.  
  43.                  android:layout_width="fill_parent"  
  44.  
  45.                  android:layout_height="wrap_content"  
  46.  
  47.                  android:layout_weight="1.0" 
  48.  
  49.                  android:layout_gravity="center_vertical" 
  50.  
  51.                  > 
  52.  
  53.                  <ImageView 
  54.  
  55.                      android:id="@+id/tab1" 
  56.  
  57.                      android:layout_width="wrap_content"  
  58.  
  59.                      android:layout_height="wrap_content"  
  60.  
  61.                      android:src="@drawable/tab1" 
  62.  
  63.                      android:layout_centerInParent="true" 
  64.  
  65.                      /> 
  66.  
  67.              </RelativeLayout> 
  68.  
  69.              <RelativeLayout  
  70.  
  71.                  android:id="@+id/layout2" 
  72.  
  73.                  android:layout_width="fill_parent"  
  74.  
  75.                  android:layout_height="wrap_content"  
  76.  
  77.                  android:layout_weight="1.0" 
  78.  
  79.                  android:layout_gravity="center_vertical" 
  80.  
  81.                  > 
  82.  
  83.                  <ImageView 
  84.  
  85.                      android:id="@+id/tab2" 
  86.  
  87.                      android:layout_width="wrap_content"  
  88.  
  89.                      android:layout_height="wrap_content"  
  90.  
  91.                      android:src="@drawable/tab2" 
  92.  
  93.                      android:layout_centerInParent="true" 
  94.  
  95.                      /> 
  96.  
  97.              </RelativeLayout> 
  98.  
  99.              <RelativeLayout  
  100.  
  101.                  android:id="@+id/layout3" 
  102.  
  103.                  android:layout_width="fill_parent"  
  104.  
  105.                  android:layout_height="wrap_content"  
  106.  
  107.                  android:layout_weight="1.0" 
  108.  
  109.                  android:layout_gravity="center_vertical" 
  110.  
  111.                  > 
  112.  
  113.                  <ImageView 
  114.  
  115.                      android:id="@+id/tab3" 
  116.  
  117.                      android:layout_width="wrap_content"  
  118.  
  119.                      android:layout_height="wrap_content"  
  120.  
  121.                      android:src="@drawable/tab3" 
  122.  
  123.                      android:layout_centerInParent="true" 
  124.  
  125.                      /> 
  126.  
  127.              </RelativeLayout> 
  128.  
  129.          </LinearLayout> 
  130.  
  131.          <RelativeLayout  
  132.  
  133.              android:orientation="horizontal" 
  134.  
  135.              android:layout_width="fill_parent"  
  136.  
  137.              android:layout_height="fill_parent"  
  138.  
  139.              android:layout_weight="1.0" 
  140.  
  141.              android:background="#ffffff" 
  142.  
  143.              android:gravity="center" 
  144.  
  145.              android:id="@+id/bodylayout" 
  146.  
  147.              > 
  148.  
  149.              
  150.  
  151.          </RelativeLayout> 
  152.  
  153.      </LinearLayout> 
  154.  
  155. </RelativeLayout> 

/**
* @author 张兴业
* 邮箱：xy-zhang#163.com
* android开发进阶群：278401545
*
*/