UI参考

 

 

 <SeekBar
        android:id="@+id/seekbar"
        
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:progressDrawable="@layout/seekbar_style"
        android:thumb="@layout/thumb" />

方式一：通过背景图片设置实现

seekbar_style.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 背景项 -->
    <item android:id="@android:id/background">
        <!-- 背景图 :这里使用9文件，因此这么配置,
        如果使用的是普通图片可直接使用<drawable />标签，或者使用<shape />标签，自定义图形 -->
        <nine-patch android:src="/blog_article/@drawable/skin_bg/index.html" />
    </item>
    <!-- 进度图 -->
    <item android:id="@android:id/progress">
     <clip >
            <nine-patch android:src="/blog_article/@drawable/skin_bg2/index.html" />
     </clip>
     </item>
</layer-list>

thumb.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- seekbar的滑块样式 -->
    <!-- 按下状态 -->
    <item android:drawable="@drawable/menu_bg" android:state_pressed="true"/>
    <!-- 普通无焦点状态 -->
    <item android:drawable="@drawable/menu_bg" android:state_focused="false" android:state_pressed="false"/>

</selector>

方式二：通过<shape  />标签为SeekBar设置背景和进度的xml配置文件

seekbar_style.xml

<?xml version="1.0" encoding="utf-8"?>   
<!-- ChenJianLi Code: View: Seekbar    
        滑动时的背景效果 -->   
  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
  <!--  背景  -->   
    <item android:id="@android:id/background">   
        <shape>   
            <corners android:radius="5dip" />   
            <gradient   
                    android:startColor="#ffffffff"  
                    android:centerColor="#fffffff0"  
                    android:centerY="0.75"  
                    android:endColor="#fffffafa"  
                    android:angle="270"  
            />   
        </shape>   
    </item>   
    <!--  第二进度条  -->   
    <item android:id="@android:id/secondaryProgress">   
        <clip>   
            <shape>   
                <corners android:radius="5dip" />   
                <gradient   
                        android:startColor="#8000cdcd"  
                        android:centerColor="#8000bfff"  
                        android:centerY="0.75"  
                        android:endColor="#a000b2ee"  
                        android:angle="270"  
                />   
            </shape>   
        </clip>   
    </item>   
    <!--  第一进度条  -->   
    <item android:id="@android:id/progress">   
        <clip>   
            <shape>   
                <corners android:radius="5dip" />   
                <gradient   
                        android:startColor="#ff00ffff"  
                        android:centerColor="#ff00ced1"  
                        android:centerY="0.75"  
                        android:endColor="#ff00f5ff"  
                        android:angle="270"  
                />   
            </shape>   
        </clip>   
    </item>   

 方式三：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 使用<drawable />标签设置背景图片 -->
    <!-- 背景项 -->

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/timeline1"></item>
    <!-- 进度图 -->

    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/timeline2"></item>

</layer-list>

    花了一天功夫，把 TabActivity 捣鼓出了个样子，差不多和自己所想的一致了，下图为滑动效果（带动画）。

    其实做完后，才发现，TabActivity 并不难用，只需要你自己去扩展一些他的方法，就可以达到你自己想到效果。

    不多说了，把实现动画的部分贴出现，其他的自己看源码吧。

@Override
public void setCurrentTab(int index) {
  int mCurrentTabID = getCurrentTab();
  if (null != getCurrentView()) {
   // 第一次设置 Tab 时，该值为 null。
   if (isOpenAnimation) {
    if (mCurrentTabID == (mTabCount - 1) && index == 0) {
     getCurrentView().startAnimation(slideLeftOut);
    } else if (mCurrentTabID == 0 && index == (mTabCount - 1)) {
     getCurrentView().startAnimation(slideRightOut);
    } else if (index > mCurrentTabID) {
     getCurrentView().startAnimation(slideLeftOut);
    } else if (index < mCurrentTabID) {
     getCurrentView().startAnimation(slideRightOut);
    }
   }
  }
  super.setCurrentTab(index);
  if (isOpenAnimation) {
   if (mCurrentTabID == (mTabCount - 1) && index == 0) {
    getCurrentView().startAnimation(slideLeftIn);
   } else if (mCurrentTabID == 0 && index == (mTabCount - 1)) {
    getCurrentView().startAnimation(slideRightIn);
   } else if (index > mCurrentTabID) {
    getCurrentView().startAnimation(slideLeftIn);
   } else if (index < mCurrentTabID) {
    getCurrentView().startAnimation(slideRightIn);
   }
  }
}

    不过是继承了 TabHost 组件类，并扩展了其 setCurrentTab(int index) 方法，不过有一个 Bug 没有解决，便当连续快速的滑动屏幕时，当 TabHost 加载的 view 或 activity 背景图为透明效果时，会出现重影现象。
    希望有高价解决。
    关于标签置底，其实可以查看 XML 文件得到答案，使用 TabActivity 时，其布局文件的顶级视图必须为 TabHost 控件，通过看 TabHost 的源码，可以看到，它其实就是一个 FrameLayout，包含了两个控件：FrameLayout mTabContent（展示我们加载的 View 或 Activity）  和 TabWidget mTabWidget（展示 Tab 的标签，其实就是一个 LinearLayout），默认布局都是采用系统的，所以我们可以在自己的 XML 文件中，将这两个的顺序更换一下，就可以了，同样的，既然我们可以得到 TabWidget，那么就可以对其进行布局设计，制定效果也就可以实现了。

       现在想来，QQ、UC这些漂亮的按钮滑动方式，会不会也是这样实现的呢，研究中…………