HiTabs——Android Fragment界面框架快速开发

在如今移动端的即时通讯APP中，微信可谓是江湖霸主。

在做即时通讯的项目时，考虑到用户学习成本，BOSS们往往喜欢“学习微信”一把。

在做项目一期的时候，高仿的微信。

做了俩月，改成独立设计的界面。

是为二期。又是俩月。

二期演示之后，觉得界面太炫花里胡哨。

于是三期又改为仿微信。

此时微信的主界面已由文字Indicator切换为透明过渡的Indicator了。

不管了，做出一个两者都有的通用模板。

下次使用的时候便可快速运用了。

微信透明渐变的原理是用2个图片(绿色和灰色图片)层叠在Framelayout中。

根据手指滑动的距离来决定相关的透明度。

而底部颜色条的指示块的原理是根据滑动的距离在TabIndicator（继承自LinearLayout）中绘制一个矩形。

核心代码如下:

   /**
     * 重要方法，根据scroll距离每次进行绘制
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mUnderLineWidth = getWidth() / size;
        int tabID = mSelectedTab;
        //下面是计算本次滑动的距离
        float scroll_x = (mCurrentScroll - ((tabID) * getWidth())) / size;

        //下面就是如何画线了
        Path path = mPath;
        path.rewind();
        float offset = 0;
        float left_x = mSelectedTab * mUnderLineWidth + offset + scroll_x;
        float right_x = (mSelectedTab + 1) * mUnderLineWidth - offset + scroll_x;
        float top_y = getHeight() - 16f;
        float bottom_y = getHeight();

        path.moveTo(left_x, top_y + 1f);
        path.lineTo(right_x, top_y + 1f);
        path.lineTo(right_x, bottom_y + 1f);
        path.lineTo(left_x, bottom_y + 1f);
        path.close();
        canvas.drawPath(path, mPaintIndicator);
    }

    //当页面滚动的时候，重新绘制滚动条
    public void onScrolled(int h) {
        mCurrentScroll = h;
        invalidate();
    }

工程结构比较简单:

默认状态效果图:

第三个tab左滑到第二个tab效果图:

下载地址:

http://download.csdn.net/detail/singleton1900/8266567