Android之FanLayout制作圓弧滑動效果

更新時間：2021年08月26日 14:47:06 作者：陳小緣

這篇文章主要介紹了Android之FanLayout制作圓弧滑動效果，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

在上篇文章(Android實現(xiàn)圓弧滑動效果之ArcSlidingHelper篇)中，我們把圓弧滑動手勢處理好了，那么這篇文章我們就來自定義一個ViewGroup，名字叫就風(fēng)扇布局吧，接地氣。在開始之前，我們先來看2張效果圖 (表情包來自百度貼吧)：

這里寫圖片描述

哈哈，其實還有以下特性的，就先不發(fā)那么多圖了：

簡單分析

圓弧手勢滑動我們現(xiàn)在可以跳過了(因為在上一篇文章中做好了)，先從最基本的開始，想一下該怎么layout？其實也很簡單：從上面幾張效果圖中我們可以看出來，那一串串小表情是圍著大表情旋轉(zhuǎn)的，即小表情的旋轉(zhuǎn)點(mPivotX，mPivotY) = 大表情的中心點(寬高 ÷ 2)，至于旋轉(zhuǎn)，肯定是用setRotation方法啦，不過在setRotation之前，還要先set一下PivotX和PivotY。

創(chuàng)建FanLayout

首先是onLayout方法：

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        //每個item要旋轉(zhuǎn)的角度
        float angle = 360F / childCount;
        //旋轉(zhuǎn)基點，現(xiàn)在也就是這個ViewGroup的中心點
        mPivotX = getWidth() / 2;
        mPivotY = getHeight() / 2;
        for (int i = 0; i < childCount; i++) {
            View view = getChildAt(i);
            int layoutHeight = view.getMeasuredHeight() / 2;
            int layoutWidth = view.getMeasuredWidth();

            //在圓心的右邊，并且垂直居中
            view.layout(mPivotX, mPivotY - layoutHeight, mPivotX + layoutWidth, mPivotY + layoutHeight);
            //更新旋轉(zhuǎn)的中心點
            view.setPivotX(0);
            view.setPivotY(layoutHeight);
            //設(shè)置旋轉(zhuǎn)的角度
            view.setRotation(i * angle);
        }
    }

onMeasure我們先不考慮那么細(xì)，measureChildren后直接setMeasuredDimension：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
    }

好了，就這么簡單，我們來看看效果怎么樣：我們的布局 (item就是一排ImageView):

    <com.test.FanLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include layout="@layout/item" />

        <include layout="@layout/item" />

        <include layout="@layout/item" />

        <include layout="@layout/item" />

        <include layout="@layout/item" />

        <include layout="@layout/item" />

    </com.test.FanLayout>

效果:

這里寫圖片描述

支持圓弧手勢

哈哈，現(xiàn)在最基本的效果是出來了，但是還未支持手勢，這時候我們上篇做的ArcSlidingHelper要登場了，我們把ArcSlidingHelper添加進(jìn)來：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mArcSlidingHelper == null) {
            mArcSlidingHelper = ArcSlidingHelper.create(this, this);
            //開始慣性滾動
            mArcSlidingHelper.enableInertialSliding(true);
        } else {
            //刷新旋轉(zhuǎn)基點
            mArcSlidingHelper.updatePivotX(w / 2);
            mArcSlidingHelper.updatePivotY(h / 2);
        }
    }

我們把ArcSlidingHelper放到onSizeChanged里面初始化，為什么呢，因為這個方法回調(diào)時，getWidth和getHeight已經(jīng)能獲取到正確的值了

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //把觸摸事件交給Helper去處理
        mArcSlidingHelper.handleMovement(event);
        return true;
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //釋放資源
        if (mArcSlidingHelper != null) {
            mArcSlidingHelper.release();
            mArcSlidingHelper = null;
        }
    }

    @Override
    public void onSliding(float angle) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //更新角度
            child.setRotation(child.getRotation() + angle);
        }
    }

onSliding方法就是ArcSlidingHelper的OnSlidingListener接口，當(dāng)ArcSlidingHelper計算出角度之后，就會回調(diào)onSliding方法，我們在這里面直接更新了子view的角度，并且在onDetachedFromWindow釋放了ArcSlidingHelper，哈哈，節(jié)約內(nèi)存，從每一個細(xì)節(jié)做起。好了，添加支持圓弧手勢滑動就這么簡單，我們來看看效果如何：

這里寫圖片描述

可以看到已經(jīng)成功處理圓弧滑動手勢了，但是還有一個情況就是，當(dāng)子view設(shè)置了自己的OnClickListener，這個時候如果我們手指剛好是按在這個子view上，當(dāng)手指移動時會發(fā)現(xiàn)，旋轉(zhuǎn)不了，因為這個事件正在被這個子view消費。所以還要在onInterceptTouchEvent方法里處理一下：如果手指滑動的距離超過了指定的最小距離，則攔截這個事件，交給我們的ArcSlidingHelper來處理。我們來看看代碼怎么寫：

    private float mStartX, mStartY;//上次的坐標(biāo)
    private int mTouchSlop;//觸發(fā)滑動的最小距離
    private boolean isBeingDragged;//手指是否滑動中

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        //如果已經(jīng)開始了滑動，那就直接攔截這個事件
        if ((event.getAction() == MotionEvent.ACTION_MOVE && isBeingDragged) || super.onInterceptTouchEvent(event)) {
            return true;
        }
        //set了enable為false就不要了
        if (!isEnabled()) {
            return false;
        }
        float x = event.getX(), y = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //當(dāng)手指按下時，停止慣性滾動
                mArcSlidingHelper.abortAnimation();
                //更新記錄坐標(biāo)
                mStartX = x;
                mStartY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                //本次較上一次的滑動距離
                float offsetX = x - mStartX;
                float offsetY = y - mStartY;
                //判斷是否觸發(fā)拖動事件
                if (Math.abs(offsetX) > mTouchSlop || Math.abs(offsetY) > mTouchSlop) {
                    //標(biāo)記已開始滑動 (攔截本次)
                    isBeingDragged = true;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_OUTSIDE:
                //手指松開，刷新狀態(tài)
                isBeingDragged = false;
                break;
        }
        return isBeingDragged;
    }

當(dāng)然了，onTouchEvent方法也要加上手指松開后，標(biāo)記isBeingDragged為false：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //把觸摸事件交給Helper去處理
        mArcSlidingHelper.handleMovement(event);

        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_OUTSIDE:
                //手指抬起，清除正在滑動的標(biāo)記
                isBeingDragged = false;
                break;
        }
        return true;
    }

mTouchSlop的初始化放在構(gòu)造方法中：

        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

哈哈，那個攔截的方法是參考自ScrollView的 (我們平時從SDK源碼中也能學(xué)到不少東西) 好的，看看效果怎么樣：

這里寫圖片描述

額。。有沒有發(fā)現(xiàn)，每次攔截之后，開始滑動時都是跳一下，是什么原因呢？就是因為我們的ArcSlidingHelper內(nèi)部也是用startX和startY來記錄上一次手指坐標(biāo)的，在FanLayout攔截事件之前，有一段距離已經(jīng)被消費了，所以ArcSlidingHelper里面的startX和startY并不是最新的距離 (計算出來的滑動距離會偏長)，就會出現(xiàn)上面這種：跳了一下的情況。那么，我們應(yīng)該怎么解決呢，加上觸發(fā)滑動的最小距離嗎？哈哈，當(dāng)然不是了，這個方法太麻煩，還要根據(jù)手指的滑動趨勢來決定是加還是減。其實ArcSlidingHelper早就已經(jīng)準(zhǔn)備了一個方法來應(yīng)對這種情況：

    /**
     * 更新當(dāng)前手指觸摸的坐標(biāo)，在ViewGroup的onInterceptTouchEvent中使用
     */
    public void updateMovement(MotionEvent event) {
        checkIsRecycled();
        if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) {
            if (isSelfSliding) {
                mStartX = event.getRawX();
                mStartY = event.getRawY();
            } else {
                mStartX = event.getX();
                mStartY = event.getY();
            }
        }
    }

我們在onInterceptTouchEvent方法中更新一下坐標(biāo)就可以了：

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
            ...
            case MotionEvent.ACTION_DOWN:
                ...
                //手指按下時更新一次
                mArcSlidingHelper.updateMovement(event);
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(offsetX) > mTouchSlop || Math.abs(offsetY) > mTouchSlop) {
                    //開始攔截之前也更新一次
                    mArcSlidingHelper.updateMovement(event);
                    ...
                }
                break;
        return isBeingDragged;
    }

updateMovement方法里面直接更新了x和y的值，這樣的話，就不會出現(xiàn)跳一下的情況了。

添加軸承（中間的大表情）

我們的軸承有兩種類型：Color和View，Color類型就是指定一種顏色，不能接受點擊事件，是直接用Paint畫出來的。View類型可以自己定義軸承的內(nèi)容，來看看下面兩張效果圖：

這里寫圖片描述

哈哈，可以看到，我們除了添加兩種不同的軸承類型之外，還加上了動態(tài)切換軸承的位置（在頂部或底部）和圓形半徑還有Item偏移量，View類型下還可以設(shè)置是否跟隨子View旋轉(zhuǎn)。

一下子多了這么多屬性，但是不要怕，我們來逐個擊破。現(xiàn)在是時候在attr中自定義這些屬性了：

<resources>
    <declare-styleable name="FanLayout">

        <!--軸承類型-->
        <attr name="bearing_type" format="enum">
            <enum name="color" value="0" />
            <enum name="view" value="1" />
        </attr>

        <!--軸承半徑-->
        <attr name="bearing_radius" format="dimension" />

        <!--軸承顏色 (當(dāng)type=color時才有效)-->
        <attr name="bearing_color" format="color" />

        <!--自定義的軸承布局 (當(dāng)type=view時才有效)-->
        <attr name="bearing_layout" format="reference" />

        <!--軸承是否可以轉(zhuǎn)動-->
        <attr name="bearing_can_roll" format="boolean" />

        <!--軸承是否在底部-->
        <attr name="bearing_on_bottom" format="boolean" />

        <!--item偏移量-->
        <attr name="item_offset" format="dimension" />
    </declare-styleable>
</resources>

好了，定義完布局屬性之后，再回到FanLayout中，也要定義對應(yīng)的屬性：

    public static final int TYPE_COLOR = 0;//Color類型
    public static final int TYPE_VIEW = 1;//View類型

    private int mRadius;//軸承半徑
    private int mItemOffset;//item偏移量
    private boolean isBearingCanRoll;//軸承是否可以滾動
    private boolean isBearingOnBottom;//軸承是否在底部
    private int mCurrentBearingType;//當(dāng)前軸承類型
    private int mBearingColor;//軸承顏色
    private int mBearingLayoutId;//軸承布局id
    private View mBearingView;//軸承view
    private Paint mPaint;

最后，在構(gòu)造方法中獲取這些屬性：

    public FanLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        ...
        initAttrs(context, attrs, defStyleAttr);
        ...
    }

    private void initAttrs(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FanLayout, defStyleAttr, 0);
        //軸承是否可以旋轉(zhuǎn)，默認(rèn)不可以
        isBearingCanRoll = a.getBoolean(R.styleable.FanLayout_bearing_can_roll, false);
        //軸承是否在底部，默認(rèn)不可以
        isBearingOnBottom = a.getBoolean(R.styleable.FanLayout_bearing_on_bottom, false);
        //當(dāng)前軸承類型，默認(rèn)Color類型
        mCurrentBearingType = a.getInteger(R.styleable.FanLayout_bearing_type, TYPE_COLOR);
        //軸承顏色，需設(shè)置類型為Color才有效，默認(rèn)黑色
        mBearingColor = a.getColor(R.styleable.FanLayout_bearing_color, Color.BLACK);

        //判斷是否View類型
        if (isViewType()) {
            //獲取軸承的布局id
            mBearingLayoutId = a.getResourceId(R.styleable.FanLayout_bearing_layout, 0);
            //如果軸承是View類型，必須要指定一個布局，否則報錯
            if (mBearingLayoutId == 0) {
                throw new IllegalStateException("bearing layout not set!");
            } else {
                //加載這個布局，并添加在FanLayout中
                mBearingView = LayoutInflater.from(context).inflate(mBearingLayoutId, this, false);
                addView(mBearingView);
            }
        } else {
            //如果是Color類型，就獲取軸承的半徑，默認(rèn)：0
            mRadius = a.getDimensionPixelSize(R.styleable.FanLayout_bearing_radius, 0);
            //初始化畫筆
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setColor(mBearingColor);
            //使其回調(diào)onDraw方法
            setWillNotDraw(false);
        }
        //獲取item偏移量
        mItemOffset = a.getDimensionPixelSize(R.styleable.FanLayout_item_offset, 0);
        //記得回收資源
        a.recycle();
    }

    /**
     * 判斷當(dāng)前軸承類型是否為View類型
     */
    private boolean isViewType() {
        return mCurrentBearingType == TYPE_VIEW;
    }

在獲取到這些屬性之后，我們需要改一下onMeasure方法了，剛剛貪方便，測量了子view后直接setMeasuredDimension了，這樣做一般是不可取的，因為還要考慮寬高為wrap_content的情況，好，我們來看看修改之后的onMeasure方法：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //先測量子View們
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int size;
        //如果指定了寬度，那就用這個指定的尺寸
        if (specMode == MeasureSpec.EXACTLY) {
            size = specSize;
        } else {
            //獲取最大的子View寬度
            int childMaxWidth = 0;
            for (int i = 0; i < getChildCount(); i++) {
                childMaxWidth = Math.max(childMaxWidth, getChildAt(i).getMeasuredWidth());
            }
            //如果沒有指定寬度的話，那么FanLayout的寬就用 軸承的直徑 + Item的偏移量 + 最大的子View寬度
            size = 2 * mRadius + mItemOffset + childMaxWidth;
        }
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //這個時候，如果指定了高度，那就用這個指定的尺寸，如果沒有的話，我們就把高度設(shè)置跟寬度一樣
        setMeasuredDimension(size, MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY ? height : size);
        //如果是軸承是View類型的話，那么就更新圓的半徑為 軸承View的寬和高中，更大的一方 的一半
        if (isViewType()) {
            mRadius = Math.max(mBearingView.getMeasuredWidth(), mBearingView.getMeasuredHeight()) / 2;
        }
    }

改完onMeasure方法后，onLayout方法也要改了，因為我們加入了軸承，如果是View類型，那就應(yīng)該不能把它當(dāng)作Item來layout，還加入了Item偏移量和軸承半徑這兩個屬性，所以Item的位置也要調(diào)整一下：

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 旋轉(zhuǎn)基點，現(xiàn)在也就是這個ViewGroup的中心點
        mPivotX = getWidth() / 2;
        mPivotY = getHeight() / 2;
        // 是否View類型的軸承在底部
        boolean isHasBottomBearing = isViewType() && isBearingOnBottom;
        // 如果軸承為View類型，startIndex = 1，否則0，
        // 因為layoutItem的時候會根據(jù)子View的個數(shù)來計算出每個Item應(yīng)該旋轉(zhuǎn)的初始角度，而軸承是在中間的，不用參與本次旋轉(zhuǎn)，
        // 所以等下會用childCount - startIndex
        int startIndex = layoutBearing();
        layoutItems(isHasBottomBearing, startIndex);
    }

    private int layoutBearing() {
        int startIndex = 0;
        //判斷軸承是否View類型
        if (isViewType()) {
            int width = mBearingView.getMeasuredWidth() / 2;
            int height = mBearingView.getMeasuredHeight() / 2;
            //軸承放在旋轉(zhuǎn)中心點上
            mBearingView.layout(mPivotX - width, mPivotY - height, mPivotX + width, mPivotY + height);
            startIndex = 1;
        }
        return startIndex;
    }

    private void layoutItems(boolean isHasBottomBearing, int startIndex) {
        int childCount = getChildCount();
        //每個item要旋轉(zhuǎn)的角度 (如果軸承是View類型，要減一個)
        float angle = 360F / (childCount - startIndex);
        for (int i = 0; i < childCount; i++) {
            View view = getChildAt(i);
            //如果是軸承View的話，我們不處理，直接略過
            if (view == mBearingView) {
                continue;
            }
            int height = view.getMeasuredHeight() / 2;
            int width = view.getMeasuredWidth();
            //Item的left就是旋轉(zhuǎn)點的x軸 + 軸承的半徑 + Item的偏移量
            int baseLeft = mPivotX + mRadius + mItemOffset;
            //在圓心的右邊，并且垂直居中
            view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);
            //更新旋轉(zhuǎn)的中心點
            view.setPivotX(-mRadius - mItemOffset);
            view.setPivotY(height);
            //如果View類型的軸承在底部的話，還要減去1，因為我們要忽略這個軸承
            int index = isHasBottomBearing ? i - 1 : i;
            float rotation = index * angle;
            //設(shè)置旋轉(zhuǎn)的角度
            view.setRotation(rotation);
        }
    }

可以看到，在layoutItem方法中，根據(jù)當(dāng)前軸承的半徑和Item偏移量來計算出正確的Item位置。

好吧，現(xiàn)在已經(jīng)迫不及待的想看看效果了，等等，還是先在布局里面設(shè)置下剛剛加進(jìn)去的一些屬性吧：

<com.wuyr.testview.FanLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:bearing_layout="@layout/bearing"
    app:bearing_type="view"
    app:item_offset="-20dp">

    <include layout="@layout/item" />

    <include layout="@layout/item" />

    <include layout="@layout/item" />

    <include layout="@layout/item" />

    <include layout="@layout/item" />

    <include layout="@layout/item" />

</com.wuyr.testview.FanLayout>

我們把bearing_type設(shè)置為View類型，并且指定了軸承的布局：

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/ic_4" />

軸承的布局就只是一個ImageView，還有，我們還把item_offset設(shè)置為-20dp，好了，現(xiàn)在來看看效果吧：

這里寫圖片描述

emmm，還差一個軸承在頂部的效果沒實現(xiàn)呢，還有一個軸承不跟隨旋轉(zhuǎn)的，這個非常簡單，我們在旋轉(zhuǎn)的回調(diào)方法里面加一個條件就可以了，因為現(xiàn)在是遍歷了全部的子View來設(shè)置旋轉(zhuǎn)角度的：

    @Override
    public void onSliding(float angle) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //如果當(dāng)前遍歷到的子View是軸承View并且當(dāng)前的軸承類型是View類型并且設(shè)置了軸承不能旋轉(zhuǎn)的話，就略過
            if (child == mBearingView && isViewType() && !isBearingCanRoll) {
                continue;
            }
            //更新角度
            child.setRotation(child.getRotation() + angle);
        }
    }

好了，現(xiàn)在我們來想想軸承在頂部的效果應(yīng)該要怎么做呢，可能有同學(xué)就會想了：真是的，把它放到最后添加不就行了，還用想嗎？額，其實還有2點要考慮的：因為我們現(xiàn)在做的是支持動態(tài)增刪Item和動態(tài)的設(shè)置軸承在頂部還是在底部，這樣一來，如果軸承添加進(jìn)去之后，又繼續(xù)添加了Item，這時候新添加的Item就會蓋住軸承的了，所以我們決定重寫addView方法：

    @Override
    public void addView(View child, int index, LayoutParams params) {
        //如果當(dāng)前軸承是View類型并且設(shè)置了在頂部，那就應(yīng)該在移除后繼續(xù)添加回去
        boolean needAdd = false;

        //判斷getChildCount() > 0是因為這個if的最終目的是移除軸承View，如果當(dāng)前沒有子View的話，自然不需要移除了
        //判斷child != mBearingView是因為：如果本次添加的就是軸承View自己，證明現(xiàn)在還沒有被添加進(jìn)去，自然也不需要繼續(xù)執(zhí)行下去了
        if (isViewType() && !isBearingOnBottom && getChildCount() > 0 && child != mBearingView) {
            //如果現(xiàn)在已經(jīng)添加了就先暫時移除
            if (mBearingView != null) {
                super.removeView(mBearingView);
                //標(biāo)記一下需要添加
                needAdd = true;
            }
        }

        //調(diào)用父類的addView方法正常添加
        super.addView(child, index, params);

        //如果被標(biāo)記過需要添加，證明軸承View已被移除，現(xiàn)在把它添加回去
        if (needAdd) {
            addView(mBearingView);
        }
    }

那現(xiàn)在來測試下剛剛加進(jìn)去的那兩個效果如何：

哈哈，可以看到，經(jīng)過我們重寫addView方法之后，如果是在頂部的話，就算新添加進(jìn)去的Item，也不會遮住軸承View的，這是我們想看到的效果。

呼～～現(xiàn)在我們來看看Color類型的應(yīng)該怎么做：其實很簡單，這個圓形直接在onDraw里面去drawCircle就行了，不過這個onDraw方法是draw在子view的下面的，那么我們?nèi)绻谏厦娴脑捲趺崔k呢，嘻嘻，其實View還有一個onDrawForeground方法，如果要畫在子View上面的話，可以在這個方法里面draw，看下代碼怎么寫：

    @Override
    protected void onDraw(Canvas canvas) {
        //必須不是View類型，并且是在底部才draw
        if (!isViewType() && isBearingOnBottom) {
            canvas.drawCircle(mPivotX, mPivotY, mRadius, mPaint);
        }
    }

    @Override
    public void onDrawForeground(Canvas canvas) {
        //必須不是View類型，并且是在頂部才draw
        if (!isViewType() && !isBearingOnBottom) {
            canvas.drawCircle(mPivotX, mPivotY, mRadius, mPaint);
        }
    }

emmm，就是這么簡單，在動態(tài)改變了軸承的位置之后(invalidate())，它也會根據(jù)isBearingOnBottom來決定圓形draw在頂部或底部。

對齊方式

我們的對齊方式有：左(默認(rèn))、右、上、下、左上、右上、左下、右下 8種，可能有同學(xué)看到一共有8種這么多就怕了，其實不用怕，這個很簡單的，代碼很少。在開始之前，我們來回憶一下，剛剛的onLayout方法中，Item是怎么layout的：

//Item的left就是旋轉(zhuǎn)點的x軸 + 軸承的半徑 + Item的偏移量
int baseLeft = mPivotX + mRadius + mItemOffset;
//在圓心的右邊，并且垂直居中
view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);

可以看到，Item的位置都是取決于mPivotX和mPivotY的，這樣的話，我們只需改變一下mPivotX和mPivotY的值，然后requestLayout就行了。那么，怎么根據(jù)不同的對齊方式計算出正確的mPivotX和mPivotY呢？

在開始之前，我們先來看看這張圖：

這里寫圖片描述

這樣思路就清晰很多了，我們根本就不用怎么去計算，都是直接?。?，寬度、高度、一半寬度、一半高度就行了，好了，首先我們要聲明一下有哪些對齊方式：

attr中：

    <!--對齊方式-->
    <attr name="bearing_gravity" format="enum">
        <enum name="left" value="0" />
        <enum name="right" value="1" />
        <enum name="top" value="2" />
        <enum name="bottom" value="3" />
        <enum name="left_top" value="4" />
        <enum name="left_bottom" value="5" />
        <enum name="right_top" value="6" />
        <enum name="right_bottom" value="7" />
    </attr>

FanLayout中：

    public static final int LEFT = 0;
    public static final int RIGHT = 1;
    public static final int TOP = 2;
    public static final int BOTTOM = 3;
    public static final int LEFT_TOP = 4;
    public static final int LEFT_BOTTOM = 5;
    public static final int RIGHT_TOP = 6;
    public static final int RIGHT_BOTTOM = 7;

    private int mCurrentGravity;//當(dāng)前對齊方式

構(gòu)造方法中也要加上一句：

    //對齊方式，默認(rèn)：左
    mCurrentGravity = a.getInteger(R.styleable.FanLayout_bearing_gravity, LEFT);

再看看計算方法怎么寫：

    /**
     * 更新旋轉(zhuǎn)基點
     */
    private void updateCircleCenterPoint() {
        int cx = 0, cy = 0;
        int totalWidth = getMeasuredWidth();
        int totalHeight = getMeasuredHeight();
        switch (mCurrentGravity) {
            case RIGHT:
                cx = totalWidth;
                cy = totalHeight / 2;
                break;
            case LEFT:
                cy = totalHeight / 2;
                break;
            case BOTTOM:
                cy = totalHeight;
                cx = totalWidth / 2;
                break;
            case TOP:
                cx = totalWidth / 2;
                break;
            case RIGHT_BOTTOM:
                cx = totalWidth;
                cy = totalHeight;
                break;
            case LEFT_BOTTOM:
                cy = totalHeight;
                break;
            case RIGHT_TOP:
                cx = totalWidth;
                break;
            default:
                break;
        }
        mPivotX = cx;
        mPivotY = cy;
        //當(dāng)然了，別忘記更新ArcSlidingHelper的旋轉(zhuǎn)基點
        if (mArcSlidingHelper != null) {
            mArcSlidingHelper.updatePivotX(cx);
            mArcSlidingHelper.updatePivotY(cy);
        }
    }

好了，那么我們應(yīng)該在哪里調(diào)用這個方法最好呢？哈哈，當(dāng)然是onMeasure了：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        ...
        updateCircleCenterPoint();
    }

現(xiàn)在可以把onLayout方法里面的

        mPivotX = getWidth() / 2;
        mPivotY = getHeight() / 2;

還有onSizeChanged里面的：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        ...
        else {
            //刷新旋轉(zhuǎn)基點
            mArcSlidingHelper.updatePivotX(w / 2);
            mArcSlidingHelper.updatePivotY(h / 2);
        }
        ...
    }

這4句刪掉了。再提供一個setGravity方法：

    /**
     * 設(shè)置對齊方式
     */
    public void setGravity(@Gravity int gravity) {
        if (mCurrentGravity != gravity) {
            mCurrentGravity = gravity;
            requestLayout();
        }
    }

@Gravity就是使用了@IntDef的自定義注解：

    @IntDef({LEFT, RIGHT, TOP, BOTTOM, LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM})
    @Retention(RetentionPolicy.SOURCE)
    private @interface Gravity {
    }

好，來看看效果：

這里寫圖片描述

哈哈，可以了。咦？等等！

這里寫圖片描述

當(dāng)設(shè)置為右對齊的時候，item居然反了。。額其實不是反了，只是它正的一面我們看不到而已，那么我們要怎么樣使它變正呢？很簡單，layoutItems方法中，加個條件判斷是不是右邊的對其方式，如果是，layout 子View時從左邊開始就行：

    private void layoutItems(boolean isHasBottomBearing, int startIndex) {
        ...
        for (int i = 0; i < childCount; i++) {
            ...
            //判斷對齊方式是不是右、右上、右下
            if (mCurrentGravity == RIGHT || mCurrentGravity == RIGHT_TOP || mCurrentGravity == RIGHT_BOTTOM) {
                //如果是，就把子View layout在圓心的左邊，并且垂直居中
                int baseLeft = mPivotX - mRadius - mItemOffset;
                view.layout(baseLeft - width, mPivotY - height, baseLeft, mPivotY + height);
                //更新旋轉(zhuǎn)的中心點
                view.setPivotX(width + mRadius + mItemOffset);
            } else {
                //如果不是就在圓心的右邊，并且垂直居中
                int baseLeft = mPivotX + mRadius + mItemOffset;
                view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);
                //更新旋轉(zhuǎn)的中心點
                view.setPivotX(-mRadius - mItemOffset);
            }
            ...
        }
    }

哈哈，這樣就可以了。

Item保持垂直

這里寫圖片描述

哈哈，有沒有發(fā)現(xiàn)開啟這個效果之后，小表情們就充滿活力了？其實實現(xiàn)這個效果非常簡單：首先attr中定義個屬性：

    <!--設(shè)置item是否保持垂直-->
    <attr name="item_direction_fixed" format="boolean"/>

FanLayout中：

    private boolean isItemDirectionFixed;

    private void initAttrs(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        ...
        //item是否保持垂直
        isItemDirectionFixed = a.getBoolean(R.styleable.FanLayout_item_direction_fixed, false);
        ...
    }

接下來就是在旋轉(zhuǎn)回調(diào)里面做手腳了，但是有一點需要注意的就是，這個所謂的Item保持垂直，并不是FanLayout的直接子View，而是FanLayout的子View的子View，為什么呢？因為現(xiàn)在FanLayout的Item布局都是一個LinearLayout里面水平放ImageView的，所以想要達(dá)到上圖中的效果，必須拿FanLayout的子View的子View來旋轉(zhuǎn)，而旋轉(zhuǎn)角度，是跟子View的旋轉(zhuǎn)角度相反，而非直接設(shè)置為0，我們來看代碼：

    @Override
    public void onSliding(float angle) {
        for (int i = 0; i < getChildCount(); i++) {
            ...
            //如果開啟了保持垂直效果
            if (isItemDirectionFixed) {
                if (child != mBearingView && child instanceof ViewGroup) {
                    ViewGroup viewGroup = (ViewGroup) child;
                    for (int j = 0; j < viewGroup.getChildCount(); j++) {
                        View childView = viewGroup.getChildAt(j);
                        //這個旋轉(zhuǎn)角度正好跟item的旋轉(zhuǎn)角度相反
                        childView.setRotation(-viewGroup.getRotation());
                    }
                }
            }
        }
    }

哈哈，這樣就可以了，就是這么簡單。

軸承偏移

這里寫圖片描述

可以看到，當(dāng)對齊方式不同的時候，設(shè)置偏移量，這個偏移的方向也會不同（它總是會朝著FanLayout的中心偏移）其實這個也是非常簡單的，因為我們剛剛已經(jīng)做好了對齊方式，那么，現(xiàn)在只要在對齊方式的基礎(chǔ)上，按規(guī)則加上或減去這個軸承的偏移量就行了。

我們添加mBearingOffset屬性之后，把updateCircleCenterPoint方法改成這樣：

    /**
     * 更新旋轉(zhuǎn)的中心點位置
     */
    private void updateCircleCenterPoint() {
        int cx = 0, cy = 0;
        int totalWidth = getMeasuredWidth();
        int totalHeight = getMeasuredHeight();
        switch (mCurrentGravity) {
            case RIGHT:
                cx = totalWidth;
                cy = totalHeight / 2;
                //在右邊: 偏移量越大，越往左邊靠
                cx -= mBearingOffset;
                break;
            case LEFT:
                cy = totalHeight / 2;
                //在右邊: 偏移量越大，越往右邊靠
                cx += mBearingOffset;
                break;
            case BOTTOM:
                cy = totalHeight;
                cx = totalWidth / 2;
                //在底部: 偏移量越大，越往上面靠
                cy -= mBearingOffset;
                break;
            case TOP:
                cx = totalWidth / 2;
                //在頂部: 偏移量越大，越往下面靠
                cy += mBearingOffset;
                break;
            case RIGHT_BOTTOM:
                cx = totalWidth;
                cy = totalHeight;
                //右下: 同時向上和向左靠
                cx -= mBearingOffset;
                cy -= mBearingOffset;
                break;
            case LEFT_BOTTOM:
                cy = totalHeight;
                //左下: 同時向右和向上靠
                cx += mBearingOffset;
                cy -= mBearingOffset;
                break;
            case RIGHT_TOP:
                cx = totalWidth;
                //右上: 同時向左和向下靠
                cx -= mBearingOffset;
                cy += mBearingOffset;
                break;
            case LEFT_TOP:
                //左上的話，同時向右和向下靠，這里可以直接賦值了，因為此時的cx和cy都是0
                cx = cy = mBearingOffset;
                break;
            default:
                break;
        }
        mPivotX = cx;
        mPivotY = cy;
        //當(dāng)然了，別忘記更新ArcSlidingHelper的旋轉(zhuǎn)基點
        if (mArcSlidingHelper != null) {
            mArcSlidingHelper.updatePivotX(cx);
            mArcSlidingHelper.updatePivotY(cy);
        }
    }

哈哈，這樣當(dāng)偏移量設(shè)置得越大的時候，就越向中心靠攏了(當(dāng)然了，太大也會超出范圍的)。

自動選中

好了，到了自動選中就稍微有點復(fù)雜了，但是我們也不要怕他，先看看下面這張圖：

這里寫圖片描述

可以看到，當(dāng)自動選中一打開，就自動選擇了距離中線最近的那一個item，當(dāng)慣性滾動結(jié)束后，也會自動選擇距離最近的item。那現(xiàn)在我們已經(jīng)有初步的思路了：找到離目標(biāo)角度最近的item，然后平滑旋轉(zhuǎn)它，直到item的角度 = 目標(biāo)角度為止

但是怎么找到這個距離最近的item呢？因為目標(biāo)角度是跟隨著對齊方式的變化而變化的，所以肯定不能把代碼寫死了。 emmm，其實我們可以先根據(jù)當(dāng)前的對齊方式來獲取到目標(biāo)角度：

    /**
     * 獲取目標(biāo)角度 (始終在屏幕內(nèi)能看見的)
     */
    private int getTargetAngle() {
        int targetAngle;
        switch (mCurrentGravity) {
            case TOP:
                //在頂部時，選中的item就應(yīng)該垂直向下了，所以應(yīng)該是90度
                targetAngle = 90;
                break;
            case BOTTOM:
                //在底部時，跟頂部的相反，所以是-90，
                //因為在一個圓中我們看到的-90度跟270度是一樣的，所以這里直接用正的角度
                targetAngle = 270;
                break;
            case LEFT_TOP:
            case RIGHT_BOTTOM:
                //左上，右下就是45度了
                //這里為什么左上的角度跟右下是一樣的呢？
                //正常情況，這個角度應(yīng)該是: 90+45=135才對
                //但是因為右，右上，右下這三種對齊方式，在onLayout時，都是layout在旋轉(zhuǎn)基點的左邊的
                //這時候在正常情況的角度來看，它已經(jīng)是90度了，所以這里直接設(shè)置為45度了，下同
                targetAngle = 45;
                break;
            case LEFT_BOTTOM:
            case RIGHT_TOP:
                //左下，右上跟左上相反:360-45=315度
                targetAngle = 315;
                break;
            case LEFT:
            case RIGHT:
                //居左和居右，都是0了
            default:
                targetAngle = 0;
                break;
        }
        return targetAngle;
    }

拿到目標(biāo)角度之后，下一步就是根據(jù)這個目標(biāo)角度，來找出離它最近的那個item了，大概的思路就是：遍歷子View，逐個判斷，取距離目標(biāo)角度更近的那一個item的索引。然后我們就可以根據(jù)這個索引找到對應(yīng)的子View來計算出所需要的旋轉(zhuǎn)角度了，最后判斷是需要順時針還是逆時針旋轉(zhuǎn)，再播放旋轉(zhuǎn)的動畫就完成了。

我們來看看查找離目標(biāo)角度最近的Item代碼：

    /**
     * 找出最近的Item
     *
     * @param targetAngle 目標(biāo)角度
     * @return 最近Item的index
     */
    private int findClosestViewPos(float targetAngle) {
        int childCount = getChildCount();
        //如果設(shè)置了軸承為View類型并且是放在底部的話，查找的時候就要跳過它
        int startIndex = isHasBottomBearing() ? 1 : 0;
        //獲取第一個Item的當(dāng)前旋轉(zhuǎn)角度
        float temp = getChildAt(startIndex).getRotation();
        if (targetAngle == 0 && temp > 180) {
            //如果對齊方式是 左或右 那當(dāng)這個Item的旋轉(zhuǎn)角度>180時，即超過了半圓
            //這時候拿到的角度就不是更小的那一邊了，所以這里要用360減去它，得到更小那一邊的角度
            temp = 360 - temp;
        }
        //當(dāng)前認(rèn)為是離目標(biāo)角度最近的角度
        float hitRotation = Math.abs(targetAngle - temp);
        //認(rèn)為是離目標(biāo)角度最近的Item索引
        int hitPos = startIndex;

        //遍歷子View，逐個判斷
        for (int i = startIndex; i < childCount; i++) {
            View childView = getChildAt(i);
            //如果是軸承View的話，就可以略過了
            if (childView == mBearingView) {
                continue;
            }
            //獲取當(dāng)前Item的旋轉(zhuǎn)角度
            temp = childView.getRotation();
            //取更小的一邊
            if (targetAngle == 0 && temp > 180) {
                temp = 360 - temp;
            }
            //計算當(dāng)前Item距離
            float rotation = Math.abs(targetAngle - temp);
            //跟現(xiàn)在認(rèn)為最近的距離做比較，取更近的那一方
            if (rotation < hitRotation) {
                hitPos = i;
                hitRotation = rotation;
            }
        }
        return hitPos;
    }

好，我們現(xiàn)在定義一個調(diào)整位置的方法：

    /**
     * 滾動結(jié)束后，調(diào)整位置的動畫
     */
    private void playFixingAnimation() {
        int childCount = getChildCount();
        //如果手指正在拖動中或者沒有Item的話，就不需要播放動畫了
        if (isBeingDragged || childCount == 0 || (childCount == 1 && isViewType())) {
            return;
        }
        //先獲取目標(biāo)角度
        int targetAngle = getTargetAngle();
        //找到最近的Item索引
        int index = findClosestViewPos(targetAngle);
        //獲取這個Item的旋轉(zhuǎn)角度
        float rotation = getChildAt(index).getRotation();
        //判斷一下要旋轉(zhuǎn)的角度是否大于半圓，如果是的話，證明現(xiàn)在還不是最小的角度，需要取它另一邊的角度
        if (Math.abs(rotation - targetAngle) > 180) {
            targetAngle = 360 - targetAngle;
        }
        //計算出需要旋轉(zhuǎn)的角度
        float angle = Math.abs(rotation - fixRotation(targetAngle));
        //用當(dāng)前Item的角度與目標(biāo)角度做比較，如果當(dāng)前角度比目標(biāo)角度大的話，那么就是需要逆時針旋轉(zhuǎn)了，反之
        startValueAnimator(rotation > fixRotation(targetAngle) ? -angle : angle, index);
    }

fixRotation方法就是來用調(diào)整角度，使其始終處于0和360之間的 (這個在上一篇也有介紹到)：

    /**
     * 調(diào)整一下角度，使其保持在0~360之間
     */
    private float fixRotation(float rotation) {
        //周角
        float angle = 360F;
        if (rotation < 0) {
            //將負(fù)的角度變成正的, 比如：-1 --> 359，在視覺上是一樣的，這樣我們內(nèi)部處理起來會比較輕松
            rotation += angle;
        }
        //避免大于360度，即：362 --> 2
        if (rotation > angle) {
            rotation %= angle;
        }
        return rotation;
    }

最后調(diào)用了startValueAnimator方法，來看看：

    /**
     * 開始播放動畫
     *
     * @param end   end值
     * @param index 當(dāng)前選中的index
     */
    private void startValueAnimator(float end, final int index) {
        //記錄當(dāng)前選中的Item索引
        mCurrentSelectedIndex = index;
        //如果上一次的動畫未播放完，就先取消它
        if (mAnimator != null && mAnimator.isRunning()) {
            mAnimator.cancel();
        }
        mAnimator = ValueAnimator.ofFloat(0, end).setDuration(mFixingAnimationDuration);
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            private float mLastScrollOffset;

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentValue = (float) animation.getAnimatedValue();
                if (mLastScrollOffset != 0) {
                    //開始旋轉(zhuǎn)
                    onSliding(currentValue - mLastScrollOffset);
                }
                mLastScrollOffset = currentValue;
            }
        });
        mAnimator.start();
    }

很簡單，就播放了一個ValueAnimator，mFixingAnimationDuration這個就是自定義的動畫時長，貼心的我們還把它做成可以動態(tài)設(shè)置選中動畫時長。動畫更新的時候，通過調(diào)用onSliding方法來旋轉(zhuǎn)Item們，我們還可以提供一個OnItemSelectedListener，在動畫播放結(jié)束后，利用它來通知外部有新的Item選中。

emmm，現(xiàn)在是萬事俱備，只欠東風(fēng)了，我們需要在手指停止滑動或慣性滾動結(jié)束后，來調(diào)用playFixingAnimation方法，這個接口在ArcSlidingHelper里也有提供了，哈哈，我們現(xiàn)在只需這樣：

    mArcSlidingHelper.setOnSlideFinishListener(new ArcSlidingHelper.OnSlideFinishListener() {
        @Override
        public void onSlideFinished() {
            playFixingAnimation();
        }
    });

轉(zhuǎn)為lambda后只有一行代碼：

mArcSlidingHelper.setOnSlideFinishListener(this::playFixingAnimation);

添加是否自動選中的自定義屬性的話，可以在調(diào)用playFixingAnimation方法之前判斷一下是否已開啟自動選中效果就行了。

好啦，快來看看效果吧：

這里寫圖片描述

哈哈，可以了，是不是很開心 (*^__^*)

布局模式

對了，那位同學(xué)提出了個問題就是：當(dāng)Item只有四五個的時候，可不可以把他們都顯示出來呢，因為現(xiàn)在是把360平均分了。這個當(dāng)然是可以的，我們干脆就分成兩種布局模式吧：平均分布模式和指定角度模式。指定角度模式，那就肯定要指定一個角度了，所以如果是設(shè)置了這個模式的話，我們還要添加一個mItemAngleOffset屬性來記錄每個Item之間的偏移角度。先來定義一下屬性：

    <attr name="item_layout_mode" format="enum">
        <enum name="average" value="0" />
        <enum name="fixed" value="1" />
    </attr>

    <attr name="item_angle_offset" format="float" />

我們添加了2個新屬性：item_layout_mode(布局方式)和item_angle_offset(Item偏移角度)，布局方式有兩種：average(平均)和fixed(指定角度)，默認(rèn)為前者。當(dāng)設(shè)置為fixed的時候，還要再指定一個偏移的角度，因為FanLayout不知道每一個Item的偏移角度是多少。在FanLayout中，也要添加對應(yīng)的屬性：

    public static final int MODE_AVERAGE = 0;//平均分布
    public static final int MODE_FIXED = 1;//指定角度

    private int mItemLayoutMode;//item布局模式
    private float mItemAngleOffset;//item角度偏移量

然后再在構(gòu)造方法中獲取到屬性：

    //獲取布局方式并判斷是不是fixed模式
    if ((mItemLayoutMode = a.getInteger(R.styleable.FanLayout_item_layout_mode, MODE_AVERAGE)) == MODE_FIXED) {
        //如果設(shè)置了fixed模式，則獲取Item偏移角度，如果角度不在1~360之間，則拋出異常
        mItemAngleOffset = a.getFloat(R.styleable.FanLayout_item_angle_offset, 0);
        if (mItemAngleOffset <= 0 || mItemAngleOffset > 360) {
            throw new IllegalStateException("item_angle_offset must be between 1~360!");
        }
    }

接下來就很簡單了，只需要在layoutItems方法中改一行代碼：

    private void layoutItems(boolean isHasBottomBearing, int startIndex) {
        ...
        //AVERAGE模式：每個item要旋轉(zhuǎn)的角度 (如果軸承是View類型，要減一個)
        //FIXED模式：直接使用設(shè)置的偏移量
        float angle = mItemLayoutMode == MODE_AVERAGE ? 360F / (childCount - startIndex) : mItemAngleOffset;
        ...
    }

哈哈，判斷一下是不是fixed模式，如果是fixed模式，直接使用指定的偏移角度就行了。我們再來定義兩個set方法來動態(tài)設(shè)置布局方式和Item偏移量：

    /**
     * item的布局方式: 默認(rèn): MODE_AVERAGE(平均)
     * 如設(shè)置為fixed需指定偏移角度: setItemAngleOffset(float angle)
     */
    public void setItemLayoutMode(@LayoutMode int layoutMode) {
        if (mItemLayoutMode != layoutMode) {
            mItemLayoutMode = layoutMode;
            requestLayout();
        }
    }

    /**
     * 指定Item的偏移角度  LayoutMode=MODE_FIXED時有效
     */
    public void setItemAngleOffset(float angle) {
        if (mItemAngleOffset != angle) {
            mItemAngleOffset = angle;
            if (mItemLayoutMode == MODE_FIXED) {
                requestLayout();
            }
        }
    }

setItemLayoutMode方法中的@LayoutMode也是使用了@IntDef的自定義注解。

好，我們來看看效果：

這里寫圖片描述

哈哈，可以了。但是可能有同學(xué)會覺得：為什么添加新Item和偏移時只能是順時針呢？而且現(xiàn)在的Item總是在軸承的右下方，如果我要Item顯示在正右方怎么辦？現(xiàn)在是這樣：

這里寫圖片描述

這樣看上去就不是很舒服了，因為上方有一部分是沒有Item的。好吧，既然這樣，那就再加上一個可以動態(tài)設(shè)置Item的添加方向的效果吧。

Item添加方向

除了順時針和逆時針，我們還準(zhǔn)備再添加一個交叉添加模式，哈哈，就是一個順時針一個逆時針了，這樣做的話，就可以實現(xiàn)剛剛說的：讓Item整體保持在正右方。先添加屬性，首先是attr：

    <!--item的添加方向: 默認(rèn): 順時針添加-->
    <attr name="item_add_direction" format="enum">
        <!--順時針-->
        <enum name="clockwise" value="0" />
        <!--逆時針-->
        <enum name="counterclockwise" value="1" />
        <!--交叉添加-->
        <enum name="interlaced" value="2" />
    </attr>

FanLayout：

    public static final int ADD_DIRECTION_CLOCKWISE = 0;//順時針方向添加
    public static final int ADD_DIRECTION_COUNTERCLOCKWISE = 1;//逆時針添加
    public static final int ADD_DIRECTION_INTERLACED = 2;//交叉添加

    private int mItemAddDirection;//item添加模式

我們在構(gòu)造方法中拿到item_add_direction這個屬性之后，就要想想接下來應(yīng)該怎么做了：

其實如果是順時針的話，我們什么都不用做，保持原來的就行；
如果是逆時針呢？那就剛好跟順時針相反，順時針是50度的話，那么逆時針就是-50度了，所以我們等下直接用360減去順時針中的角度就行了；
交叉模式的話，我們是打算奇數(shù)順時針添加，偶數(shù)逆時針添加，這樣就能實現(xiàn)交叉的效果了；

好，來看看代碼怎么寫（也是只需要在layoutItems方法里面修改一下就行了）：

    private void layoutItems(boolean isHasBottomBearing, int startIndex) {
        ...
        for (int i = 0; i < childCount; i++) {
            ...
            //排除軸承View之后的索引，也就是要忽略軸承View了
            int index;
            //Item最終要旋轉(zhuǎn)的角度
            float rotation;

            if (mItemAddDirection == ADD_DIRECTION_COUNTERCLOCKWISE) {
                //逆時針添加
                //如果View類型的軸承在底部的話，還要減去1，因為我們要忽略這個軸承
                index = isHasBottomBearing ? i - 1 : i;
                //這個角度跟順時針的相反，所以直接用360減去當(dāng)前角度
                rotation = 360F - index * angle;
            } else if (mItemAddDirection == ADD_DIRECTION_INTERLACED) {
                //交叉添加
                //這里計算的index為什么跟順時針的和逆時針的不同呢？總是比它們大1
                //是因為第一個Item不用動，改變添加方向的是從第二個Item開始的，所以這里要比其他兩個方向的index值要大1
                index = isHasBottomBearing ? i : i + 1;
                //當(dāng)前index前面相同方向的item個數(shù)
                int hitCount = 0;
                //當(dāng)前index是否偶數(shù)
                boolean isDual = index % 2 == 0;
                //從0開始數(shù)起，一直數(shù)到當(dāng)前index
                for (int j = 0; j < index; j++) {
                    //判斷當(dāng)前index是否偶數(shù)
                    if (isDual) {
                        //進(jìn)一步判斷當(dāng)前遍歷到的是否偶數(shù)，如果是偶數(shù)的話才+1
                        //為什么還要這樣判斷呢？
                        //是因為: 上面判斷isDual，僅僅是為了確定當(dāng)前index的item究竟是逆時針添加還是順時針添加，
                        //添加的方向是確定了，但要偏移的角度還不知道，而這一次的判斷呢，
                        //就是為了計算出當(dāng)前index的前面還有多少個跟它相同方向的item，下同
                        if (j % 2 == 0) {
                            hitCount++;
                        }
                    } else {
                        //如果是奇數(shù)的話，也進(jìn)一步判斷當(dāng)前遍歷到的是否奇數(shù)才+1
                        if (j % 2 != 0) {
                            hitCount++;
                        }
                    }
                }
                //我們設(shè)置，如果當(dāng)前index是奇數(shù)的話，就順時針添加，否則逆時針添加，這樣的話，就能實現(xiàn)交叉添加了
                rotation = isDual ? 360F - hitCount * angle : hitCount * angle;
            } else {
                //順時針添加
                //如果View類型的軸承在底部的話，還要減去1，因為我們要忽略這個軸承
                index = isHasBottomBearing ? i - 1 : i;
                rotation = index * angle;
            }
            //設(shè)置旋轉(zhuǎn)的角度
            view.setRotation(fixRotation(rotation + getTargetAngle()));
        }
    }

好了，在添加seter方法之后，看看效果如何：

    /**
     * 設(shè)置Item的添加方向 默認(rèn): 順時針添加
     */
    public void setItemAddDirection(@DirectionMode int direction) {
        if (mItemAddDirection != direction) {
            mItemAddDirection = direction;
            requestLayout();
        }
    }

哈哈哈，三種模式我們都實現(xiàn)了，是不是很開心。

添加指定選中

可能還有同學(xué)不滿足，ListView有setSelection，RecyclerView有scrollToPosition，為什么FanLayout就不能有一個選中指定Item的方法呢？好吧，那我們也加一個這個的效果吧：

    /**
     * 指定選中
     *
     * @param index    item索引
     * @param isSmooth 是否播放平滑動畫
     */
    public void setSelection(int index, boolean isSmooth) {
        //必須要開啟自動選中，并且將要選中的index不能大于當(dāng)前子view數(shù)量，再排除軸承view
        if (isAutoSelect && index < getChildCount() && getChildCount() > (isViewType() ? 1 : 0)) {
            //判斷軸承是否View類型
            if (isViewType()) {
                //如果軸承在底部的話，那就是要+1了，因為要排除軸承View
                if (isBearingOnBottom) {
                    //+1的前提是不溢出
                    if (index + 1 < getChildCount()) {
                        index++;
                    }
                } else {
                    //如果軸承在頂部的話，并且傳進(jìn)來的index剛好是軸承的index，則-1（排除軸承View）
                    if (index == getChildCount() - 1) {
                        index--;
                        //如果減了1之后<0的話，也沒必要繼續(xù)了
                        if (index < 0) {
                            return;
                        }
                    }
                }
            }
            //轉(zhuǎn)動到指定的index
            scrollToPosition(index, isSmooth);
        }
    }

    /**
     * 轉(zhuǎn)動到指定的index
     *
     * @param isSmooth 是否平滑滾動
     */
    private void scrollToPosition(int index, boolean isSmooth) {
        //刷新當(dāng)前選中的index
        mCurrentSelectedIndex = index;
        View view = getChildAt(index);
        //目標(biāo)角度
        float targetAngle = getTargetAngle();
        //當(dāng)前index對應(yīng)的view的角度
        float rotation = view.getRotation();
        //取更小的那一邊
        if (Math.abs(rotation - targetAngle) > 180) {
            targetAngle = 360 - targetAngle;
        }
        //先拿到正的角度
        float angle = Math.abs(rotation - fixRotation(targetAngle));
        //如果是平滑滾動，就交給ValueAnimator去處理
        if (isSmooth) {
            startValueAnimator(rotation > fixRotation(targetAngle) ? -angle : angle, index);
        } else {
            //如果不是就直接滾動到目標(biāo)角度
            onSliding(rotation > fixRotation(targetAngle) ? -angle : angle);
            //回調(diào)有新的Item選中
            notifyListener();
        }
    }

    private void notifyListener() {
        if (mOnItemSelectedListener != null) {
            //根據(jù)記錄的當(dāng)前選中index來獲取到對應(yīng)的view
            View view = getChildAt(mCurrentSelectedIndex);
            //檢查下這個view是不是軸承view，如果是的話，還要排除它，并且找到正確的item
            if (isViewType() && view == mBearingView) {
                //如果軸承在底部的話，那就是要+1了
                if (isBearingOnBottom) {
                    //+1的前提是不溢出
                    if (mCurrentSelectedIndex + 1 < getChildCount()) {
                        mCurrentSelectedIndex++;
                    } else {
                        //如果溢出了，也沒必要繼續(xù)了
                        return;
                    }
                } else {
                    //邏輯同上
                    if (mCurrentSelectedIndex - 1 >= 0) {
                        mCurrentSelectedIndex--;
                    } else {
                        return;
                    }
                }
            }
            //回調(diào)接口
            mOnItemSelectedListener.onSelected(getChildAt(mCurrentSelectedIndex));
        }
    }

    /**
     * Item被選中的回調(diào)
     */
    public interface OnItemSelectedListener {
        void onSelected(View item);
    }

我們~~一氣之下~~ 一口氣加了三個方法，經(jīng)過之前的一些分析，相信上面那些代碼大家都可以輕松看懂了。

來看看效果如何：

這里寫圖片描述