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