android让你的TabHost滑动起来

在Android应用中，一般TabActivity和若干个Tab选项卡（TabWidget）。如果选项卡的数量超过了5个，就不适合放到一个屏幕中，这样可以让这些选项卡滑动起来。

滑动的选项卡的实现有好几种方式，在这些方式中，最简单也是我最满意的还是在原生的TabActivity上修改，将上面的选项卡改为可滑动的状态。这样既有新的滑动的效果，也保留了原有TabActivity的各项功能。

实现Tab可滑动基本的思路就是把上面的TabWidget放到一个HorizontalScrollView中，让TabWidget滑动起来。不过如果仅仅修改XML还是会产生问题，就是没有办法控制每个选项卡的宽度。所以还是需要在程序中设置每个选项卡的宽度。例如：

[java] view
plaincopy

  1. // 设置窗口的宽度   
  2. DisplayMetrics dm = new DisplayMetrics();   
  3. getWindowManager().getDefaultDisplay().getMetrics(dm);   
  4. int screenWidth = dm.widthPixels;   
  5. if (count < 4) {   
  6.     for (int i = 0; i < count; i++) {   
  7.         // 设置每个选项卡的宽度   
  8.         tabWidget.getChildTabViewAt(i).setMinimumWidth(screenWidth / 4);   
  9.     }   
  10. }  

自定义TabActivity主界面的XML：

[html] view
plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical" android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">   
  5.     <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"  
  6.         android:layout_height="fill_parent">   
  7.         <LinearLayout android:orientation="vertical"  
  8.             android:layout_width="fill_parent" android:layout_height="fill_parent">   
  9.             <HorizontalScrollView android:layout_height="wrap_content"  
  10.                 android:layout_width="fill_parent" android:scrollbars="none">   
  11.                 <TabWidget android:id="@android:id/tabs"  
  12.                     android:layout_width="fill_parent" android:layout_height="60dp" />   
  13.             </HorizontalScrollView>   
  14.             <FrameLayout android:id="@android:id/tabcontent"  
  15.                 android:layout_width="fill_parent" android:layout_height="wrap_content"  
  16.                 android:layout_weight="1" />   
  17.         </LinearLayout>   
  18.     </TabHost>   
  19. </LinearLayout>  

效果图如下

上面的tab是可以滑动的,屏幕左右滑动,tab也会切换

[java] view
plaincopy

  1. package com.xu81.testflip;  
  2.   
  3. import java.util.Vector;  
  4.   
  5. import android.content.Context;  
  6. import android.util.AttributeSet;  
  7. import android.view.MotionEvent;  
  8. import android.view.VelocityTracker;  
  9. import android.view.View;  
  10. import android.view.ViewConfiguration;  
  11. import android.view.ViewGroup;  
  12. import android.widget.Scroller;  
  13.   
  14. public class ScrollLayout extends ViewGroup {  
  15.   
  16.     private Scroller mScroller;  
  17.     private VelocityTracker mVelocityTracker;  
  18.     private int mCurScreen;  
  19.     private int mDefaultScreen = 0;  
  20.     private static final int TOUCH_STATE_REST = 0;  
  21.     private static final int TOUCH_STATE_SCROLLING = 1;  
  22.     private static final int SNAP_VELOCITY = 500;  
  23.     private int mTouchState = TOUCH_STATE_REST;  
  24.     private int mTouchSlop;  
  25.     private float mLastMotionX;  
  26.     private int sensitivity = 30;  
  27.     private boolean spring;  
  28.     private Vector<LayoutChangeListener> listeners;  
  29.   
  30.     public ScrollLayout(Context context, AttributeSet attrs) {  
  31.         super(context, attrs);  
  32.         // TODO Auto-generated constructor stub  
  33.         mScroller = new Scroller(context);  
  34.         mCurScreen = mDefaultScreen;  
  35.         mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();  
  36.         listeners = new Vector<LayoutChangeListener>();  
  37.     }  
  38.   
  39.     public void addChangeListener(LayoutChangeListener listener) {  
  40.         listeners.add(listener);  
  41.     }  
  42.   
  43.     @Override  
  44.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
  45.         // TODO Auto-generated method stub  
  46.         int childLeft = 0;  
  47.         final int childCount = getChildCount();  
  48.         for (int i = 0; i < childCount; i++) {  
  49.             final View childView = getChildAt(i);  
  50.             if (childView.getVisibility() != View.GONE) {  
  51.                 final int childWidth = childView.getMeasuredWidth();  
  52.                 childView.layout(childLeft, 0, childLeft + childWidth,  
  53.                         childView.getMeasuredHeight());  
  54.                 childLeft += childWidth;  
  55.             }  
  56.         }  
  57.     }  
  58.   
  59.     @Override  
  60.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  61.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  62.         final int width = MeasureSpec.getSize(widthMeasureSpec);  
  63.         final int widthMode = MeasureSpec.getMode(widthMeasureSpec);  
  64.         if (widthMode != MeasureSpec.EXACTLY) {  
  65.             throw new IllegalStateException(  
  66.                     "ScrollLayout only canmCurScreen run at EXACTLY mode!");  
  67.         }  
  68.   
  69.         final int heightMode = MeasureSpec.getMode(heightMeasureSpec);  
  70.         if (heightMode != MeasureSpec.EXACTLY) {  
  71.             throw new IllegalStateException(  
  72.                     "ScrollLayout only can run at EXACTLY mode!");  
  73.         }  
  74.   
  75.         // The children are given the same width and height as the scrollLayout  
  76.         final int count = getChildCount();  
  77.         for (int i = 0; i < count; i++) {  
  78.             getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);  
  79.         }  
  80.         scrollTo(mCurScreen * width, 0);  
  81.     }  
  82.   
  83.     public void snapToDestination() {  
  84.         final int screenWidth = getWidth();  
  85.         final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth;  
  86.         snapToScreen(destScreen);  
  87.     }  
  88.   
  89.     public void snapToScreen(int whichScreen) {  
  90.         // get the valid layout page  
  91.         int lastIndex = mCurScreen;  
  92.         whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));  
  93.         if (getScrollX() != (whichScreen * getWidth())) {  
  94.   
  95.             final int delta = whichScreen * getWidth() - getScrollX();  
  96.             mScroller.startScroll(getScrollX(), 0, delta, 0,  
  97.                     Math.abs(delta) * 2);  
  98.             mCurScreen = whichScreen;  
  99.             invalidate(); // Redraw the layout  
  100.         }  
  101.         for (LayoutChangeListener listener : listeners)  
  102.             listener.doChange(lastIndex, whichScreen);  
  103.     }  
  104.   
  105.     public void setToScreen(int whichScreen) {  
  106.         whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));  
  107.         mCurScreen = whichScreen;  
  108.         scrollTo(whichScreen * getWidth(), 0);  
  109.     }  
  110.   
  111.     public int getCurScreen() {  
  112.         return mCurScreen;  
  113.     }  
  114.   
  115.     @Override  
  116.     public void computeScroll() {  
  117.         // TODO Auto-generated method stub  
  118.         if (mScroller.computeScrollOffset()) {  
  119.             scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  120.             postInvalidate();  
  121.         }  
  122.     }  
  123.   
  124.     public boolean isSpring() {  
  125.         return spring;  
  126.     }  
  127.   
  128.     public void setSpring(boolean spring) {  
  129.         this.spring = spring;  
  130.     }  
  131.   
  132.     @Override  
  133.     public boolean onTouchEvent(MotionEvent event) {  
  134.         // TODO Auto-generated method stub  
  135.         if (mVelocityTracker == null)  
  136.             mVelocityTracker = VelocityTracker.obtain();  
  137.         mVelocityTracker.addMovement(event);  
  138.         final int action = event.getAction();  
  139.         final float x = event.getX();  
  140.         switch (action) {  
  141.         case MotionEvent.ACTION_DOWN:  
  142.             if (!mScroller.isFinished())  
  143.                 mScroller.abortAnimation();  
  144.             mLastMotionX = x;  
  145.             break;  
  146.         case MotionEvent.ACTION_MOVE:  
  147.             int deltaX = (int) (mLastMotionX - x);  
  148.             if (Math.abs(deltaX) > sensitivity) {  
  149.                 // 左滑动为正数、右为负数  
  150.                 if (spring) {  
  151.                     scrollBy(deltaX, 0);  
  152.                     mLastMotionX = x;  
  153.                 } else {  
  154.                     final int childCount = getChildCount();  
  155.                     boolean max = mCurScreen < childCount - 1;  
  156.                     boolean min = mCurScreen > 0;  
  157.                     boolean canMove = deltaX > 0 ? (max ? true : false)  
  158.                             : (min ? true : false);  
  159.                     if (canMove) {  
  160.                         scrollBy(deltaX, 0);  
  161.                         mLastMotionX = x;  
  162.                     }  
  163.                 }  
  164.             }  
  165.             break;  
  166.         case MotionEvent.ACTION_UP:  
  167.             final VelocityTracker velocityTracker = mVelocityTracker;  
  168.             velocityTracker.computeCurrentVelocity(1000);  
  169.             int velocityX = (int) velocityTracker.getXVelocity();  
  170.             if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {  
  171.                 // Fling enough to move left  
  172.                 snapToScreen(mCurScreen - 1);  
  173.             } else if (velocityX < -SNAP_VELOCITY  
  174.                     && mCurScreen < getChildCount() - 1) {  
  175.                 // Fling enough to move right  
  176.                 snapToScreen(mCurScreen + 1);  
  177.             } else {  
  178.                 snapToDestination();  
  179.             }  
  180.             if (mVelocityTracker != null) {  
  181.                 mVelocityTracker.recycle();  
  182.                 mVelocityTracker = null;  
  183.             }  
  184.             mTouchState = TOUCH_STATE_REST;  
  185.             break;  
  186.         case MotionEvent.ACTION_CANCEL:  
  187.             mTouchState = TOUCH_STATE_REST;  
  188.             break;  
  189.         }  
  190.         return true;  
  191.     }  
  192.   
  193.     @Override  
  194.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  195.         // TODO Auto-generated method stub  
  196.         final int action = ev.getAction();  
  197.         if ((action == MotionEvent.ACTION_MOVE)  
  198.                 && (mTouchState != TOUCH_STATE_REST))  
  199.             return true;  
  200.         final float x = ev.getX();  
  201.         switch (action) {  
  202.         case MotionEvent.ACTION_MOVE:  
  203.             final int xDiff = (int) Math.abs(mLastMotionX - x);  
  204.             if (xDiff > mTouchSlop)  
  205.                 mTouchState = TOUCH_STATE_SCROLLING;  
  206.             break;  
  207.         case MotionEvent.ACTION_DOWN:  
  208.             mLastMotionX = x;  
  209.             mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST  
  210.                     : TOUCH_STATE_SCROLLING;  
  211.             break;  
  212.         case MotionEvent.ACTION_CANCEL:  
  213.         case MotionEvent.ACTION_UP:  
  214.             mTouchState = TOUCH_STATE_REST;  
  215.             break;  
  216.         }  
  217.         return mTouchState != TOUCH_STATE_REST;  
  218.     }  
  219.   
  220. }  

这是模仿qq的滑动实现,和tab不是一个思路,也比较美观实用可以借鉴

源码下载

ScrollTab例子下载

qq滑动特效下载

时间： 2024-10-22 22:17:48

android让你的TabHost滑动起来的相关文章

Android编程实现设置TabHost当中字体的方法_Android

本文实例讲述了Android编程设置TabHost当中字体的方法.分享给大家供大家参考,具体如下: TabWidget tw=this.getTabWidget();//设置TabHost当中的内容的方法 for(int i=0;i<tw.getChildCount();i++){ //设置TabHost字体的相关方法 TextView tv=(TextView)tw.getChildAt(i).findViewById(android.R.id.title); tv.setGravity(BI

Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享_Android

SlidingDrawer效果想必大家也见到过,它就是1.5模拟器上进入应用程序列表的效果.下面是截图 一.简介  SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一 是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局,在布局文件中必须指定handle和content.例如下面 复制代码 代码如下: <SlidingDrawer android:layout_width="fill_

android用ActivityGroup实现tabhost一个tab多界面

问题描述 android用ActivityGroup实现tabhost一个tab多界面 tabhost界面 mTabHost = getTabHost(); //FileMianActivity mTabHost.addTab(mTabHost .newTabSpec(TabBindingConfig.FILE_PERSONAL) .setIndicator( TabBindingConfig.FILE_PERSONAL) .setContent(new Intent(TabActivity.t

Android应用中使用TabHost组件继承TabActivity的布局方法_Android

继承TabActivity并以activity布局先查看下最终效果图: 再看下代码结构: 其中black.gif顾名思义就是一个黑背景图片,grey.gif就是一张灰色的背景图片 然后直接上代码: ArtistActivity.java package cn.com.tagview; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class ArtistA

Android使用ViewPager实现无限滑动效果_Android

前言 其实仔细想一下原理还是挺简单的.无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页. 但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然. 小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果.实现细节以及一些踩过的坑. 1.无限滑动效果(左右无限滑动) 事先准备好2张滑动图片(有想试验的小伙伴,自备图片啊,小编就不提供了...) 运行效果图(左右无限循环): 为了显示更加直观

Android实现仿通讯录侧边栏滑动SiderBar效果代码_Android

本文实例讲述了Android实现仿通讯录侧边栏滑动SiderBar效果代码.分享给大家供大家参考,具体如下: 之前看到某些应用的侧边栏做得不错,想想自己也弄一个出来,现在分享出来,当然里面还有不足的地方,请大家多多包涵. 先上图: 具体实现的代码如下: package com.freesonfish.listview_index; import android.content.Context; import android.graphics.Canvas; import android.grap

Android仿淘宝view滑动至屏幕顶部会一直停留在顶部的位置_Android

在刚刚完成的项目中,在一个页面中,用户体验师提出引用户操作的入住按钮要一直保留在页面当中,不管页面能滚动多长都得停留在页面的可视区域.最终实现效果如下图所示:   如图中的红色框中的view始终会停留在页面中,如果滑动至页面的顶部,会一直保留在顶部. 下面来说下具体的实现思路: 思路:其实整个页面当中一共有两个视觉效果一样的View,通过滑动的位置来进行View的隐藏和显示来达到这种效果.整个页面的在上下滑动的过程中可以总结为两个状态,状态A(如图1所示),view2在可视区域内时,view1不

Android控件之TabHost用法实例分析_Android

本文实例讲述了Android控件之TabHost用法.分享给大家供大家参考.具体如下: 以下通过TabHost实现android选项卡. main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=

Android实现仿通讯录侧边栏滑动SiderBar效果代码

本文实例讲述了Android实现仿通讯录侧边栏滑动SiderBar效果代码.分享给大家供大家参考,具体如下: 之前看到某些应用的侧边栏做得不错,想想自己也弄一个出来,现在分享出来,当然里面还有不足的地方,请大家多多包涵. 先上图: 具体实现的代码如下: package com.freesonfish.listview_index; import android.content.Context; import android.graphics.Canvas; import android.grap