首页 > 移动平台 > 详细

Android界面篇【仿QQ的滑动Tab】

时间：2014-02-15 16:34:30      阅读：522      评论：0      收藏：0      [点我收藏+]

bubuko.com,布布扣

 

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

使用了ActivityGroup。

[java] view plaincopyprint?
  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. }  


 

[html] view plaincopyprint?
  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>  

Android界面篇【仿QQ的滑动Tab】

原文：http://blog.csdn.net/zhixiang2010/article/details/19234035
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！