Android之FanLayout制作圓弧滑動效果
前言
在上篇文章(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添加進來：
@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è)置下剛剛加進去的一些屬性吧：
<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è)置軸承在頂部還是在底部，這樣一來，如果軸承添加進去之后，又繼續(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)在還沒有被添加進去，自然也不需要繼續(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īng)過我們重寫addView方法之后，如果是在頂部的話，就算新添加進去的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的，所以想要達到上圖中的效果，必須拿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) {
//進一步判斷當(dāng)前遍歷到的是否偶數(shù)，如果是偶數(shù)的話才+1
//為什么還要這樣判斷呢？
//是因為: 上面判斷isDual，僅僅是為了確定當(dāng)前index的item究竟是逆時針添加還是順時針添加，
//添加的方向是確定了，但要偏移的角度還不知道，而這一次的判斷呢，
//就是為了計算出當(dāng)前index的前面還有多少個跟它相同方向的item，下同
if (j % 2 == 0) {
hitCount++;
}
} else {
//如果是奇數(shù)的話，也進一步判斷當(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 {
//如果軸承在頂部的話，并且傳進來的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)過之前的一些分析，相信上面那些代碼大家都可以輕松看懂了。
來看看效果如何：
哈哈，可以看到，開啟自動選中之后，通過點擊上面那一排數(shù)字，也能正確地旋轉(zhuǎn)到對應(yīng)的Item了。
好啦，我們這篇文章算是結(jié)束了，有錯誤的地方請指出，謝謝大家！ github地址：https://github.com/wuyr/FanLayout 歡迎star
到此這篇關(guān)于Android之FanLayout制作圓弧滑動效果的文章就介紹到這了,更多相關(guān)FanLayout圓弧滑動效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Android 滑動小圓點ViewPager的兩種設(shè)置方法詳解流程
- Android深入探究自定義View之嵌套滑動的實現(xiàn)
- Android實現(xiàn)背景顏色滑動漸變效果的全過程
- Android直播軟件搭建之實現(xiàn)背景顏色滑動漸變效果的詳細(xì)代碼
- Android HorizontalScrollView滑動與ViewPager切換案例詳解
- Android滑動拼圖驗證碼控件使用方法詳解
- Android之ArcSlidingHelper制作圓弧滑動效果
- Android 滑動Scrollview標(biāo)題欄漸變效果(仿京東toolbar)
- Android 實現(xiàn)滑動的六種方式
相關(guān)文章
android Retrofit2網(wǎng)絡(luò)請求封裝介紹
大家好，本篇文章主要講的是android Retrofit2網(wǎng)絡(luò)請求封裝介紹，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
本篇文章主要介紹了Android 列表形式的切換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了詳解android是如何管理內(nèi)存的，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細(xì)介紹了Android幀式布局實現(xiàn)自動切換顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
flutter傳遞值到任意widget(當(dāng)需要widget嵌套使用需要傳遞值的時候)
這篇文章主要介紹了flutter傳遞值到任意widget(當(dāng)需要widget嵌套使用需要傳遞值的時候),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章給大家介紹一個布局吸頂效果,一般出現(xiàn)在內(nèi)容較長頁面還嵌套著分類頁面的情況,比如電商的詳情頁嵌套分類,在頁面滑動到tab的時候我們希望tab還能保留在頁面頂部而不被頂上去,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Android?TextView跑馬燈實現(xiàn)原理及方法實例
字的跑馬燈效果在移動端開發(fā)中是一個比較常見的需求場景,下面這篇文章主要給大家介紹了關(guān)于Android?TextView跑馬燈實現(xiàn)原理及方法的相關(guān)資料,需要的朋友可以參考下2022-05-05
Android自定義Drawable實現(xiàn)圓形和圓角
這篇文章主要為大家詳細(xì)介紹了Android自定義Drawable實現(xiàn)圓形和圓角，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
聊聊GridView實現(xiàn)拖拽排序及數(shù)據(jù)交互的問題
這篇文章主要介紹了聊聊GridView實現(xiàn)拖拽排序及數(shù)據(jù)交互的問題,整體實現(xiàn)思路是通過在一個容器里放置兩個dragview，DragView里面進行View的動態(tài)交換以及數(shù)據(jù)交換，具體實現(xiàn)代碼跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了Android中dumpsys命令用法簡單介紹的相關(guān)資料,需要的朋友可以參考下2017-03-03