Android之FanLayout制作圓弧滑動(dòng)效果
前言
在上篇文章(Android實(shí)現(xiàn)圓弧滑動(dòng)效果之ArcSlidingHelper篇)中，我們把圓弧滑動(dòng)手勢(shì)處理好了，那么這篇文章我們就來(lái)自定義一個(gè)ViewGroup，名字叫就風(fēng)扇布局吧，接地氣。 在開(kāi)始之前，我們先來(lái)看2張效果圖 (表情包來(lái)自百度貼吧)：
哈哈，其實(shí)還有以下特性的，就先不發(fā)那么多圖了：
簡(jiǎn)單分析
圓弧手勢(shì)滑動(dòng)我們現(xiàn)在可以跳過(guò)了(因?yàn)樵谏弦黄恼轮凶龊昧?，先從最基本的開(kāi)始，想一下該怎么layout？ 其實(shí)也很簡(jiǎn)單：從上面幾張效果圖中我們可以看出來(lái)，那一串串小表情是圍著大表情旋轉(zhuǎn)的，即小表情的旋轉(zhuǎn)點(diǎn)(mPivotX，mPivotY) = 大表情的中心點(diǎn)(寬高 ÷ 2)，至于旋轉(zhuǎn)，肯定是用setRotation方法啦，不過(guò)在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();
//每個(gè)item要旋轉(zhuǎn)的角度
float angle = 360F / childCount;
//旋轉(zhuǎn)基點(diǎn)，現(xiàn)在也就是這個(gè)ViewGroup的中心點(diǎn)
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)的中心點(diǎ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);
}
好了，就這么簡(jiǎn)單，我們來(lái)看看效果怎么樣： 我們的布局 (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>
效果:
支持圓弧手勢(shì)
哈哈，現(xiàn)在最基本的效果是出來(lái)了，但是還未支持手勢(shì)，這時(shí)候我們上篇做的ArcSlidingHelper要登場(chǎng)了，我們把ArcSlidingHelper添加進(jìn)來(lái)：
@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);
//開(kāi)始慣性滾動(dòng)
mArcSlidingHelper.enableInertialSliding(true);
} else {
//刷新旋轉(zhuǎn)基點(diǎn)
mArcSlidingHelper.updatePivotX(w / 2);
mArcSlidingHelper.updatePivotY(h / 2);
}
}
我們把ArcSlidingHelper放到onSizeChanged里面初始化，為什么呢，因?yàn)檫@個(gè)方法回調(diào)時(shí)，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計(jì)算出角度之后，就會(huì)回調(diào)onSliding方法，我們?cè)谶@里面直接更新了子view的角度，并且在onDetachedFromWindow釋放了ArcSlidingHelper，哈哈，節(jié)約內(nèi)存，從每一個(gè)細(xì)節(jié)做起。 好了，添加支持圓弧手勢(shì)滑動(dòng)就這么簡(jiǎn)單，我們來(lái)看看效果如何：
可以看到已經(jīng)成功處理圓弧滑動(dòng)手勢(shì)了，但是還有一個(gè)情況就是，當(dāng)子view設(shè)置了自己的OnClickListener，這個(gè)時(shí)候如果我們手指剛好是按在這個(gè)子view上，當(dāng)手指移動(dòng)時(shí)會(huì)發(fā)現(xiàn)，旋轉(zhuǎn)不了，因?yàn)檫@個(gè)事件正在被這個(gè)子view消費(fèi)。所以還要在onInterceptTouchEvent方法里處理一下：如果手指滑動(dòng)的距離超過(guò)了指定的最小距離，則攔截這個(gè)事件，交給我們的ArcSlidingHelper來(lái)處理。 我們來(lái)看看代碼怎么寫(xiě)：
private float mStartX, mStartY;//上次的坐標(biāo)
private int mTouchSlop;//觸發(fā)滑動(dòng)的最小距離
private boolean isBeingDragged;//手指是否滑動(dòng)中
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
//如果已經(jīng)開(kāi)始了滑動(dòng)，那就直接攔截這個(gè)事件
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)手指按下時(shí)，停止慣性滾動(dòng)
mArcSlidingHelper.abortAnimation();
//更新記錄坐標(biāo)
mStartX = x;
mStartY = y;
break;
case MotionEvent.ACTION_MOVE:
//本次較上一次的滑動(dòng)距離
float offsetX = x - mStartX;
float offsetY = y - mStartY;
//判斷是否觸發(fā)拖動(dòng)事件
if (Math.abs(offsetX) > mTouchSlop || Math.abs(offsetY) > mTouchSlop) {
//標(biāo)記已開(kāi)始滑動(dòng) (攔截本次)
isBeingDragged = true;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_OUTSIDE:
//手指松開(kāi)，刷新?tīng)顟B(tài)
isBeingDragged = false;
break;
}
return isBeingDragged;
}
當(dāng)然了，onTouchEvent方法也要加上手指松開(kāi)后，標(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:
//手指抬起，清除正在滑動(dòng)的標(biāo)記
isBeingDragged = false;
break;
}
return true;
}
mTouchSlop的初始化放在構(gòu)造方法中：
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
哈哈，那個(gè)攔截的方法是參考自ScrollView的 (我們平時(shí)從SDK源碼中也能學(xué)到不少東西) 好的，看看效果怎么樣：
額。。有沒(méi)有發(fā)現(xiàn)，每次攔截之后，開(kāi)始滑動(dòng)時(shí)都是跳一下，是什么原因呢？ 就是因?yàn)槲覀兊腁rcSlidingHelper內(nèi)部也是用startX和startY來(lái)記錄上一次手指坐標(biāo)的，在FanLayout攔截事件之前，有一段距離已經(jīng)被消費(fèi)了，所以ArcSlidingHelper里面的startX和startY并不是最新的距離 (計(jì)算出來(lái)的滑動(dòng)距離會(huì)偏長(zhǎng))，就會(huì)出現(xiàn)上面這種：跳了一下 的情況。 那么，我們應(yīng)該怎么解決呢，加上觸發(fā)滑動(dòng)的最小距離嗎？哈哈，當(dāng)然不是了，這個(gè)方法太麻煩，還要根據(jù)手指的滑動(dòng)趨勢(shì)來(lái)決定是加還是減。 其實(shí)ArcSlidingHelper早就已經(jīng)準(zhǔn)備了一個(gè)方法來(lái)應(yīng)對(duì)這種情況：
/**
* 更新當(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();
}
}
}
我們?cè)趏nInterceptTouchEvent方法中更新一下坐標(biāo)就可以了：
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
...
case MotionEvent.ACTION_DOWN:
...
//手指按下時(shí)更新一次
mArcSlidingHelper.updateMovement(event);
break;
case MotionEvent.ACTION_MOVE:
if (Math.abs(offsetX) > mTouchSlop || Math.abs(offsetY) > mTouchSlop) {
//開(kāi)始攔截之前也更新一次
mArcSlidingHelper.updateMovement(event);
...
}
break;
return isBeingDragged;
}
updateMovement方法里面直接更新了x和y的值，這樣的話，就不會(huì)出現(xiàn)跳一下的情況了。
添加軸承（中間的大表情）
我們的軸承有兩種類型：Color和View，Color類型就是指定一種顏色，不能接受點(diǎn)擊事件，是直接用Paint畫(huà)出來(lái)的。View類型可以自己定義軸承的內(nèi)容，來(lái)看看下面兩張效果圖：
哈哈，可以看到，我們除了添加兩種不同的軸承類型之外，還加上了動(dòng)態(tài)切換軸承的位置（在頂部或底部）和圓形半徑還有Item偏移量，View類型下還可以設(shè)置是否跟隨子View旋轉(zhuǎn)。
一下子多了這么多屬性，但是不要怕，我們來(lái)逐個(gè)擊破。 現(xiàn)在是時(shí)候在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時(shí)才有效)-->
<attr name="bearing_color" format="color" />
<!--自定義的軸承布局 (當(dāng)type=view時(shí)才有效)-->
<attr name="bearing_layout" format="reference" />
<!--軸承是否可以轉(zhuǎn)動(dòng)-->
<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中，也要定義對(duì)應(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;//軸承是否可以滾動(dòng)
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類型，必須要指定一個(gè)布局，否則報(bào)錯(cuò)
if (mBearingLayoutId == 0) {
throw new IllegalStateException("bearing layout not set!");
} else {
//加載這個(gè)布局，并添加在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);
//初始化畫(huà)筆
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方法了，剛剛貪方便，測(cè)量了子view后直接setMeasuredDimension了，這樣做一般是不可取的，因?yàn)檫€要考慮寬高為wrap_content的情況，好，我們來(lái)看看修改之后的onMeasure方法：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//先測(cè)量子View們
measureChildren(widthMeasureSpec, heightMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int size;
//如果指定了寬度，那就用這個(gè)指定的尺寸
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());
}
//如果沒(méi)有指定寬度的話，那么FanLayout的寬就用 軸承的直徑 + Item的偏移量 + 最大的子View寬度
size = 2 * mRadius + mItemOffset + childMaxWidth;
}
int height = MeasureSpec.getSize(heightMeasureSpec);
//這個(gè)時(shí)候，如果指定了高度，那就用這個(gè)指定的尺寸，如果沒(méi)有的話，我們就把高度設(shè)置跟寬度一樣
setMeasuredDimension(size, MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY ? height : size);
//如果是軸承是View類型的話，那么就更新圓的半徑為 軸承View的寬和高中，更大的一方 的一半
if (isViewType()) {
mRadius = Math.max(mBearingView.getMeasuredWidth(), mBearingView.getMeasuredHeight()) / 2;
}
}
改完onMeasure方法后，onLayout方法也要改了，因?yàn)槲覀兗尤肓溯S承，如果是View類型，那就應(yīng)該不能把它當(dāng)作Item來(lái)layout，還加入了Item偏移量和軸承半徑這兩個(gè)屬性，所以Item的位置也要調(diào)整一下：
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// 旋轉(zhuǎn)基點(diǎn)，現(xiàn)在也就是這個(gè)ViewGroup的中心點(diǎn)
mPivotX = getWidth() / 2;
mPivotY = getHeight() / 2;
// 是否View類型的軸承在底部
boolean isHasBottomBearing = isViewType() && isBearingOnBottom;
// 如果軸承為View類型，startIndex = 1，否則0，
// 因?yàn)閘ayoutItem的時(shí)候會(huì)根據(jù)子View的個(gè)數(shù)來(lái)計(jì)算出每個(gè)Item應(yīng)該旋轉(zhuǎn)的初始角度，而軸承是在中間的，不用參與本次旋轉(zhuǎn)，
// 所以等下會(huì)用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)中心點(diǎ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();
//每個(gè)item要旋轉(zhuǎn)的角度 (如果軸承是View類型，要減一個(gè))
float angle = 360F / (childCount - startIndex);
for (int i = 0; i < childCount; i++) {
View view = getChildAt(i);
//如果是軸承View的話，我們不處理，直接略過(guò)
if (view == mBearingView) {
continue;
}
int height = view.getMeasuredHeight() / 2;
int width = view.getMeasuredWidth();
//Item的left就是旋轉(zhuǎn)點(diǎn)的x軸 + 軸承的半徑 + Item的偏移量
int baseLeft = mPivotX + mRadius + mItemOffset;
//在圓心的右邊，并且垂直居中
view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);
//更新旋轉(zhuǎn)的中心點(diǎn)
view.setPivotX(-mRadius - mItemOffset);
view.setPivotY(height);
//如果View類型的軸承在底部的話，還要減去1，因?yàn)槲覀円雎赃@個(gè)軸承
int index = isHasBottomBearing ? i - 1 : i;
float rotation = index * angle;
//設(shè)置旋轉(zhuǎn)的角度
view.setRotation(rotation);
}
}
可以看到，在layoutItem方法中，根據(jù)當(dāng)前軸承的半徑和Item偏移量來(lái)計(jì)算出正確的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" />
軸承的布局就只是一個(gè)ImageView，還有，我們還把item_offset設(shè)置為-20dp，好了，現(xiàn)在來(lái)看看效果吧：
emmm，還差一個(gè)軸承在頂部的效果沒(méi)實(shí)現(xiàn)呢，還有一個(gè)軸承不跟隨旋轉(zhuǎn)的，這個(gè)非常簡(jiǎn)單，我們?cè)谛D(zhuǎn)的回調(diào)方法里面加一個(gè)條件就可以了，因?yàn)楝F(xiàn)在是遍歷了全部的子View來(lái)設(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)的話，就略過(guò)
if (child == mBearingView && isViewType() && !isBearingCanRoll) {
continue;
}
//更新角度
child.setRotation(child.getRotation() + angle);
}
}
好了，現(xiàn)在我們來(lái)想想軸承在頂部的效果應(yīng)該要怎么做呢，可能有同學(xué)就會(huì)想了：真是的，把它放到最后添加不就行了，還用想嗎？ 額，其實(shí)還有2點(diǎn)要考慮的：因?yàn)槲覀儸F(xiàn)在做的是支持動(dòng)態(tài)增刪Item和動(dòng)態(tài)的設(shè)置軸承在頂部還是在底部，這樣一來(lái)，如果軸承添加進(jìn)去之后，又繼續(xù)添加了Item，這時(shí)候新添加的Item就會(huì)蓋住軸承的了，所以我們決定重寫(xiě)addView方法：
@Override
public void addView(View child, int index, LayoutParams params) {
//如果當(dāng)前軸承是View類型并且設(shè)置了在頂部，那就應(yīng)該在移除后繼續(xù)添加回去
boolean needAdd = false;
//判斷getChildCount() > 0是因?yàn)檫@個(gè)if的最終目的是移除軸承View，如果當(dāng)前沒(méi)有子View的話，自然不需要移除了
//判斷child != mBearingView是因?yàn)椋喝绻敬翁砑拥木褪禽S承View自己，證明現(xiàn)在還沒(méi)有被添加進(jìn)去，自然也不需要繼續(xù)執(zhí)行下去了
if (isViewType() && !isBearingOnBottom && getChildCount() > 0 && child != mBearingView) {
//如果現(xiàn)在已經(jīng)添加了就先暫時(shí)移除
if (mBearingView != null) {
super.removeView(mBearingView);
//標(biāo)記一下需要添加
needAdd = true;
}
}
//調(diào)用父類的addView方法正常添加
super.addView(child, index, params);
//如果被標(biāo)記過(guò)需要添加，證明軸承View已被移除，現(xiàn)在把它添加回去
if (needAdd) {
addView(mBearingView);
}
}
那現(xiàn)在來(lái)測(cè)試下剛剛加進(jìn)去的那兩個(gè)效果如何：
哈哈，可以看到，經(jīng)過(guò)我們重寫(xiě)addView方法之后，如果是在頂部的話，就算新添加進(jìn)去的Item，也不會(huì)遮住軸承View的，這是我們想看到的效果。
呼～～ 現(xiàn)在我們來(lái)看看Color類型的應(yīng)該怎么做：其實(shí)很簡(jiǎn)單，這個(gè)圓形直接在onDraw里面去drawCircle就行了，不過(guò)這個(gè)onDraw方法是draw在子view的下面的，那么我們?nèi)绻谏厦娴脑捲趺崔k呢，嘻嘻，其實(shí)View還有一個(gè)onDrawForeground方法，如果要畫(huà)在子View上面的話，可以在這個(gè)方法里面draw，看下代碼怎么寫(xiě)：
@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，就是這么簡(jiǎn)單，在動(dòng)態(tài)改變了軸承的位置之后(invalidate())，它也會(huì)根據(jù)isBearingOnBottom來(lái)決定圓形draw在頂部或底部。
對(duì)齊方式
我們的對(duì)齊方式有：左(默認(rèn))、右、上、下、左上、右上、左下、右下 8種，可能有同學(xué)看到一共有8種這么多就怕了，其實(shí)不用怕，這個(gè)很簡(jiǎn)單的，代碼很少。 在開(kāi)始之前，我們來(lái)回憶一下，剛剛的onLayout方法中，Item是怎么layout的：
//Item的left就是旋轉(zhuǎn)點(diǎn)的x軸 + 軸承的半徑 + Item的偏移量 int baseLeft = mPivotX + mRadius + mItemOffset; //在圓心的右邊，并且垂直居中 view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);
可以看到，Item的位置都是取決于mPivotX和mPivotY的，這樣的話，我們只需改變一下mPivotX和mPivotY的值，然后requestLayout就行了。那么，怎么根據(jù)不同的對(duì)齊方式計(jì)算出正確的mPivotX和mPivotY呢？
在開(kāi)始之前，我們先來(lái)看看這張圖：
這樣思路就清晰很多了，我們根本就不用怎么去計(jì)算，都是直接?。?，寬度、高度、一半寬度、一半高度就行了，好了，首先我們要聲明一下有哪些對(duì)齊方式：
attr中：
<!--對(duì)齊方式-->
<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)前對(duì)齊方式
構(gòu)造方法中也要加上一句：
//對(duì)齊方式，默認(rèn)：左
mCurrentGravity = a.getInteger(R.styleable.FanLayout_bearing_gravity, LEFT);
再看看計(jì)算方法怎么寫(xiě)：
/**
* 更新旋轉(zhuǎn)基點(diǎ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)基點(diǎn)
if (mArcSlidingHelper != null) {
mArcSlidingHelper.updatePivotX(cx);
mArcSlidingHelper.updatePivotY(cy);
}
}
好了，那么我們應(yīng)該在哪里調(diào)用這個(gè)方法最好呢？哈哈，當(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)基點(diǎn)
mArcSlidingHelper.updatePivotX(w / 2);
mArcSlidingHelper.updatePivotY(h / 2);
}
...
}
這4句刪掉了。 再提供一個(gè)setGravity方法：
/**
* 設(shè)置對(duì)齊方式
*/
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 {
}
好，來(lái)看看效果：
哈哈，可以了。 咦？等等！
當(dāng)設(shè)置為右對(duì)齊的時(shí)候，item居然反了。。額其實(shí)不是反了，只是它正的一面我們看不到而已，那么我們要怎么樣使它變正呢？很簡(jiǎn)單，layoutItems方法中，加個(gè)條件判斷是不是右邊的對(duì)其方式，如果是，layout 子View時(shí)從左邊開(kāi)始就行：
private void layoutItems(boolean isHasBottomBearing, int startIndex) {
...
for (int i = 0; i < childCount; i++) {
...
//判斷對(duì)齊方式是不是右、右上、右下
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)的中心點(diǎn)
view.setPivotX(width + mRadius + mItemOffset);
} else {
//如果不是就在圓心的右邊，并且垂直居中
int baseLeft = mPivotX + mRadius + mItemOffset;
view.layout(baseLeft, mPivotY - height, baseLeft + width, mPivotY + height);
//更新旋轉(zhuǎn)的中心點(diǎn)
view.setPivotX(-mRadius - mItemOffset);
}
...
}
}
哈哈，這樣就可以了。
Item保持垂直
哈哈，有沒(méi)有發(fā)現(xiàn)開(kāi)啟這個(gè)效果之后，小表情們就充滿活力了？其實(shí)實(shí)現(xiàn)這個(gè)效果非常簡(jiǎn)單： 首先attr中定義個(gè)屬性：
<!--設(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);
...
}
接下來(lái)就是在旋轉(zhuǎn)回調(diào)里面做手腳了，但是有一點(diǎn)需要注意的就是，這個(gè)所謂的Item保持垂直，并不是FanLayout的直接子View，而是FanLayout的子View的子View，為什么呢？因?yàn)楝F(xiàn)在FanLayout的Item布局都是一個(gè)LinearLayout里面水平放ImageView的，所以想要達(dá)到上圖中的效果，必須拿FanLayout的子View的子View來(lái)旋轉(zhuǎn)，而旋轉(zhuǎn)角度，是跟子View的旋轉(zhuǎn)角度相反，而非直接設(shè)置為0，我們來(lái)看代碼：
@Override
public void onSliding(float angle) {
for (int i = 0; i < getChildCount(); i++) {
...
//如果開(kā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);
//這個(gè)旋轉(zhuǎn)角度正好跟item的旋轉(zhuǎn)角度相反
childView.setRotation(-viewGroup.getRotation());
}
}
}
}
}
哈哈，這樣就可以了，就是這么簡(jiǎn)單。
軸承偏移
可以看到，當(dāng)對(duì)齊方式不同的時(shí)候，設(shè)置偏移量，這個(gè)偏移的方向也會(huì)不同（它總是會(huì)朝著FanLayout的中心偏移） 其實(shí)這個(gè)也是非常簡(jiǎn)單的，因?yàn)槲覀儎倓傄呀?jīng)做好了對(duì)齊方式，那么，現(xiàn)在只要在對(duì)齊方式的基礎(chǔ)上，按規(guī)則加上或減去這個(gè)軸承的偏移量就行了。
我們添加mBearingOffset屬性之后，把updateCircleCenterPoint方法改成這樣：
/**
* 更新旋轉(zhuǎn)的中心點(diǎ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;
//右下: 同時(shí)向上和向左靠
cx -= mBearingOffset;
cy -= mBearingOffset;
break;
case LEFT_BOTTOM:
cy = totalHeight;
//左下: 同時(shí)向右和向上靠
cx += mBearingOffset;
cy -= mBearingOffset;
break;
case RIGHT_TOP:
cx = totalWidth;
//右上: 同時(shí)向左和向下靠
cx -= mBearingOffset;
cy += mBearingOffset;
break;
case LEFT_TOP:
//左上的話，同時(shí)向右和向下靠，這里可以直接賦值了，因?yàn)榇藭r(shí)的cx和cy都是0
cx = cy = mBearingOffset;
break;
default:
break;
}
mPivotX = cx;
mPivotY = cy;
//當(dāng)然了，別忘記更新ArcSlidingHelper的旋轉(zhuǎn)基點(diǎn)
if (mArcSlidingHelper != null) {
mArcSlidingHelper.updatePivotX(cx);
mArcSlidingHelper.updatePivotY(cy);
}
}
哈哈，這樣當(dāng)偏移量設(shè)置得越大的時(shí)候，就越向中心靠攏了(當(dāng)然了，太大也會(huì)超出范圍的)。
自動(dòng)選中
好了，到了自動(dòng)選中就稍微有點(diǎn)復(fù)雜了，但是我們也不要怕他，先看看下面這張圖：
可以看到，當(dāng)自動(dòng)選中一打開(kāi)，就自動(dòng)選擇了距離中線最近的那一個(gè)item，當(dāng)慣性滾動(dòng)結(jié)束后，也會(huì)自動(dòng)選擇距離最近的item。那現(xiàn)在我們已經(jīng)有初步的思路了：找到離目標(biāo)角度最近的item，然后平滑旋轉(zhuǎn)它，直到item的角度 = 目標(biāo)角度為止
但是怎么找到這個(gè)距離最近的item呢？因?yàn)槟繕?biāo)角度是跟隨著對(duì)齊方式的變化而變化的，所以肯定不能把代碼寫(xiě)死了。 emmm，其實(shí)我們可以先根據(jù)當(dāng)前的對(duì)齊方式來(lái)獲取到目標(biāo)角度：
/**
* 獲取目標(biāo)角度 (始終在屏幕內(nèi)能看見(jiàn)的)
*/
private int getTargetAngle() {
int targetAngle;
switch (mCurrentGravity) {
case TOP:
//在頂部時(shí)，選中的item就應(yīng)該垂直向下了，所以應(yīng)該是90度
targetAngle = 90;
break;
case BOTTOM:
//在底部時(shí)，跟頂部的相反，所以是-90，
//因?yàn)樵谝粋€(gè)圓中我們看到的-90度跟270度是一樣的，所以這里直接用正的角度
targetAngle = 270;
break;
case LEFT_TOP:
case RIGHT_BOTTOM:
//左上，右下就是45度了
//這里為什么左上的角度跟右下是一樣的呢？
//正常情況，這個(gè)角度應(yīng)該是: 90+45=135才對(duì)
//但是因?yàn)橛?，右上，右下這三種對(duì)齊方式，在onLayout時(shí)，都是layout在旋轉(zhuǎn)基點(diǎn)的左邊的
//這時(shí)候在正常情況的角度來(lái)看，它已經(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ù)這個(gè)目標(biāo)角度，來(lái)找出離它最近的那個(gè)item了，大概的思路就是：遍歷子View，逐個(gè)判斷，取距離目標(biāo)角度更近的那一個(gè)item的索引。然后我們就可以根據(jù)這個(gè)索引找到對(duì)應(yīng)的子View來(lái)計(jì)算出所需要的旋轉(zhuǎn)角度了，最后判斷是需要順時(shí)針還是逆時(shí)針旋轉(zhuǎn)，再播放旋轉(zhuǎn)的動(dòng)畫(huà)就完成了。
我們來(lái)看看查找離目標(biāo)角度最近的Item代碼：
/**
* 找出最近的Item
*
* @param targetAngle 目標(biāo)角度
* @return 最近Item的index
*/
private int findClosestViewPos(float targetAngle) {
int childCount = getChildCount();
//如果設(shè)置了軸承為View類型并且是放在底部的話，查找的時(shí)候就要跳過(guò)它
int startIndex = isHasBottomBearing() ? 1 : 0;
//獲取第一個(gè)Item的當(dāng)前旋轉(zhuǎn)角度
float temp = getChildAt(startIndex).getRotation();
if (targetAngle == 0 && temp > 180) {
//如果對(duì)齊方式是 左或右 那當(dāng)這個(gè)Item的旋轉(zhuǎn)角度>180時(shí)，即超過(guò)了半圓
//這時(shí)候拿到的角度就不是更小的那一邊了，所以這里要用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，逐個(gè)判斷
for (int i = startIndex; i < childCount; i++) {
View childView = getChildAt(i);
//如果是軸承View的話，就可以略過(guò)了
if (childView == mBearingView) {
continue;
}
//獲取當(dāng)前Item的旋轉(zhuǎn)角度
temp = childView.getRotation();
//取更小的一邊
if (targetAngle == 0 && temp > 180) {
temp = 360 - temp;
}
//計(jì)算當(dāng)前Item距離
float rotation = Math.abs(targetAngle - temp);
//跟現(xiàn)在認(rèn)為最近的距離做比較，取更近的那一方
if (rotation < hitRotation) {
hitPos = i;
hitRotation = rotation;
}
}
return hitPos;
}
好，我們現(xiàn)在定義一個(gè)調(diào)整位置的方法：
/**
* 滾動(dòng)結(jié)束后，調(diào)整位置的動(dòng)畫(huà)
*/
private void playFixingAnimation() {
int childCount = getChildCount();
//如果手指正在拖動(dòng)中或者沒(méi)有Item的話，就不需要播放動(dòng)畫(huà)了
if (isBeingDragged || childCount == 0 || (childCount == 1 && isViewType())) {
return;
}
//先獲取目標(biāo)角度
int targetAngle = getTargetAngle();
//找到最近的Item索引
int index = findClosestViewPos(targetAngle);
//獲取這個(gè)Item的旋轉(zhuǎn)角度
float rotation = getChildAt(index).getRotation();
//判斷一下要旋轉(zhuǎn)的角度是否大于半圓，如果是的話，證明現(xiàn)在還不是最小的角度，需要取它另一邊的角度
if (Math.abs(rotation - targetAngle) > 180) {
targetAngle = 360 - targetAngle;
}
//計(jì)算出需要旋轉(zhuǎn)的角度
float angle = Math.abs(rotation - fixRotation(targetAngle));
//用當(dāng)前Item的角度與目標(biāo)角度做比較，如果當(dāng)前角度比目標(biāo)角度大的話，那么就是需要逆時(shí)針旋轉(zhuǎn)了，反之
startValueAnimator(rotation > fixRotation(targetAngle) ? -angle : angle, index);
}
fixRotation方法就是來(lái)用調(diào)整角度，使其始終處于0和360之間的 (這個(gè)在上一篇也有介紹到)：
/**
* 調(diào)整一下角度，使其保持在0~360之間
*/
private float fixRotation(float rotation) {
//周角
float angle = 360F;
if (rotation < 0) {
//將負(fù)的角度變成正的, 比如：-1 --> 359，在視覺(jué)上是一樣的，這樣我們內(nèi)部處理起來(lái)會(huì)比較輕松
rotation += angle;
}
//避免大于360度，即：362 --> 2
if (rotation > angle) {
rotation %= angle;
}
return rotation;
}
最后調(diào)用了startValueAnimator方法，來(lái)看看：
/**
* 開(kāi)始播放動(dòng)畫(huà)
*
* @param end end值
* @param index 當(dāng)前選中的index
*/
private void startValueAnimator(float end, final int index) {
//記錄當(dāng)前選中的Item索引
mCurrentSelectedIndex = index;
//如果上一次的動(dòng)畫(huà)未播放完，就先取消它
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) {
//開(kāi)始旋轉(zhuǎn)
onSliding(currentValue - mLastScrollOffset);
}
mLastScrollOffset = currentValue;
}
});
mAnimator.start();
}
很簡(jiǎn)單，就播放了一個(gè)ValueAnimator，mFixingAnimationDuration這個(gè)就是自定義的動(dòng)畫(huà)時(shí)長(zhǎng)，貼心的我們還把它做成可以動(dòng)態(tài)設(shè)置選中動(dòng)畫(huà)時(shí)長(zhǎng)。 動(dòng)畫(huà)更新的時(shí)候，通過(guò)調(diào)用onSliding方法來(lái)旋轉(zhuǎn)Item們，我們還可以提供一個(gè)OnItemSelectedListener，在動(dòng)畫(huà)播放結(jié)束后，利用它來(lái)通知外部有新的Item選中。
emmm，現(xiàn)在是萬(wàn)事俱備，只欠東風(fēng)了，我們需要在手指停止滑動(dòng)或慣性滾動(dòng)結(jié)束后，來(lái)調(diào)用playFixingAnimation方法，這個(gè)接口在ArcSlidingHelper里也有提供了，哈哈，我們現(xiàn)在只需這樣：
mArcSlidingHelper.setOnSlideFinishListener(new ArcSlidingHelper.OnSlideFinishListener() {
@Override
public void onSlideFinished() {
playFixingAnimation();
}
});
轉(zhuǎn)為lambda后只有一行代碼：
mArcSlidingHelper.setOnSlideFinishListener(this::playFixingAnimation);
添加是否自動(dòng)選中的自定義屬性的話，可以在調(diào)用playFixingAnimation方法之前判斷一下是否已開(kāi)啟自動(dòng)選中效果就行了。
好啦，快來(lái)看看效果吧：
哈哈，可以了，是不是很開(kāi)心 (*^__^*)
布局模式
對(duì)了，那位同學(xué)提出了個(gè)問(wèn)題就是：當(dāng)Item只有四五個(gè)的時(shí)候，可不可以把他們都顯示出來(lái)呢，因?yàn)楝F(xiàn)在是把360平均分了。 這個(gè)當(dāng)然是可以的，我們干脆就分成兩種布局模式吧：平均分布模式和指定角度模式。指定角度模式，那就肯定要指定一個(gè)角度了，所以如果是設(shè)置了這個(gè)模式的話，我們還要添加一個(gè)mItemAngleOffset屬性來(lái)記錄每個(gè)Item之間的偏移角度。 先來(lái)定義一下屬性：
<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個(gè)新屬性：item_layout_mode(布局方式)和item_angle_offset(Item偏移角度)，布局方式有兩種：average(平均)和fixed(指定角度)，默認(rèn)為前者。當(dāng)設(shè)置為fixed的時(shí)候，還要再指定一個(gè)偏移的角度，因?yàn)镕anLayout不知道每一個(gè)Item的偏移角度是多少。 在FanLayout中，也要添加對(duì)應(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!");
}
}
接下來(lái)就很簡(jiǎn)單了，只需要在layoutItems方法中改一行代碼：
private void layoutItems(boolean isHasBottomBearing, int startIndex) {
...
//AVERAGE模式：每個(gè)item要旋轉(zhuǎn)的角度 (如果軸承是View類型，要減一個(gè))
//FIXED模式：直接使用設(shè)置的偏移量
float angle = mItemLayoutMode == MODE_AVERAGE ? 360F / (childCount - startIndex) : mItemAngleOffset;
...
}
哈哈，判斷一下是不是fixed模式，如果是fixed模式，直接使用指定的偏移角度就行了。 我們?cè)賮?lái)定義兩個(gè)set方法來(lái)動(dòng)態(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時(shí)有效
*/
public void setItemAngleOffset(float angle) {
if (mItemAngleOffset != angle) {
mItemAngleOffset = angle;
if (mItemLayoutMode == MODE_FIXED) {
requestLayout();
}
}
}
setItemLayoutMode方法中的@LayoutMode也是使用了@IntDef的自定義注解。
好，我們來(lái)看看效果：
哈哈，可以了。 但是可能有同學(xué)會(huì)覺(jué)得：為什么添加新Item和偏移時(shí)只能是順時(shí)針呢？而且現(xiàn)在的Item總是在軸承的右下方，如果我要Item顯示在正右方怎么辦？現(xiàn)在是這樣：
這樣看上去就不是很舒服了，因?yàn)樯戏接幸徊糠质菦](méi)有Item的。 好吧，既然這樣，那就再加上一個(gè)可以動(dòng)態(tài)設(shè)置Item的添加方向的效果吧。
Item添加方向
除了順時(shí)針和逆時(shí)針，我們還準(zhǔn)備再添加一個(gè)交叉添加模式，哈哈，就是一個(gè)順時(shí)針一個(gè)逆時(shí)針了，這樣做的話，就可以實(shí)現(xiàn)剛剛說(shuō)的：讓Item整體保持在正右方。 先添加屬性，首先是attr：
<!--item的添加方向: 默認(rèn): 順時(shí)針添加-->
<attr name="item_add_direction" format="enum">
<!--順時(shí)針-->
<enum name="clockwise" value="0" />
<!--逆時(shí)針-->
<enum name="counterclockwise" value="1" />
<!--交叉添加-->
<enum name="interlaced" value="2" />
</attr>
FanLayout：
public static final int ADD_DIRECTION_CLOCKWISE = 0;//順時(shí)針?lè)较蛱砑?
public static final int ADD_DIRECTION_COUNTERCLOCKWISE = 1;//逆時(shí)針添加
public static final int ADD_DIRECTION_INTERLACED = 2;//交叉添加
private int mItemAddDirection;//item添加模式
我們?cè)跇?gòu)造方法中拿到item_add_direction這個(gè)屬性之后，就要想想接下來(lái)應(yīng)該怎么做了：
- 其實(shí)如果是順時(shí)針的話，我們什么都不用做，保持原來(lái)的就行；
- 如果是逆時(shí)針呢？那就剛好跟順時(shí)針相反，順時(shí)針是50度的話，那么逆時(shí)針就是-50度了，所以我們等下直接用360減去順時(shí)針中的角度就行了；
- 交叉模式的話，我們是打算奇數(shù)順時(shí)針添加，偶數(shù)逆時(shí)針添加，這樣就能實(shí)現(xiàn)交叉的效果了；
好，來(lái)看看代碼怎么寫(xiě)（也是只需要在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) {
//逆時(shí)針添加
//如果View類型的軸承在底部的話，還要減去1，因?yàn)槲覀円雎赃@個(gè)軸承
index = isHasBottomBearing ? i - 1 : i;
//這個(gè)角度跟順時(shí)針的相反，所以直接用360減去當(dāng)前角度
rotation = 360F - index * angle;
} else if (mItemAddDirection == ADD_DIRECTION_INTERLACED) {
//交叉添加
//這里計(jì)算的index為什么跟順時(shí)針的和逆時(shí)針的不同呢？總是比它們大1
//是因?yàn)榈谝粋€(gè)Item不用動(dòng)，改變添加方向的是從第二個(gè)Item開(kāi)始的，所以這里要比其他兩個(gè)方向的index值要大1
index = isHasBottomBearing ? i : i + 1;
//當(dāng)前index前面相同方向的item個(gè)數(shù)
int hitCount = 0;
//當(dāng)前index是否偶數(shù)
boolean isDual = index % 2 == 0;
//從0開(kāi)始數(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
//為什么還要這樣判斷呢？
//是因?yàn)? 上面判斷isDual，僅僅是為了確定當(dāng)前index的item究竟是逆時(shí)針添加還是順時(shí)針添加，
//添加的方向是確定了，但要偏移的角度還不知道，而這一次的判斷呢，
//就是為了計(jì)算出當(dāng)前index的前面還有多少個(gè)跟它相同方向的item，下同
if (j % 2 == 0) {
hitCount++;
}
} else {
//如果是奇數(shù)的話，也進(jìn)一步判斷當(dāng)前遍歷到的是否奇數(shù)才+1
if (j % 2 != 0) {
hitCount++;
}
}
}
//我們?cè)O(shè)置，如果當(dāng)前index是奇數(shù)的話，就順時(shí)針添加，否則逆時(shí)針添加，這樣的話，就能實(shí)現(xiàn)交叉添加了
rotation = isDual ? 360F - hitCount * angle : hitCount * angle;
} else {
//順時(shí)針添加
//如果View類型的軸承在底部的話，還要減去1，因?yàn)槲覀円雎赃@個(gè)軸承
index = isHasBottomBearing ? i - 1 : i;
rotation = index * angle;
}
//設(shè)置旋轉(zhuǎn)的角度
view.setRotation(fixRotation(rotation + getTargetAngle()));
}
}
好了，在添加seter方法之后，看看效果如何：
/**
* 設(shè)置Item的添加方向 默認(rèn): 順時(shí)針添加
*/
public void setItemAddDirection(@DirectionMode int direction) {
if (mItemAddDirection != direction) {
mItemAddDirection = direction;
requestLayout();
}
}
哈哈哈，三種模式我們都實(shí)現(xiàn)了，是不是很開(kāi)心。
添加指定選中
可能還有同學(xué)不滿足，ListView有setSelection，RecyclerView有scrollToPosition，為什么FanLayout就不能有一個(gè)選中指定Item的方法呢？ 好吧，那我們也加一個(gè)這個(gè)的效果吧：
/**
* 指定選中
*
* @param index item索引
* @param isSmooth 是否播放平滑動(dòng)畫(huà)
*/
public void setSelection(int index, boolean isSmooth) {
//必須要開(kāi)啟自動(dòng)選中，并且將要選中的index不能大于當(dāng)前子view數(shù)量，再排除軸承view
if (isAutoSelect && index < getChildCount() && getChildCount() > (isViewType() ? 1 : 0)) {
//判斷軸承是否View類型
if (isViewType()) {
//如果軸承在底部的話，那就是要+1了，因?yàn)橐懦S承View
if (isBearingOnBottom) {
//+1的前提是不溢出
if (index + 1 < getChildCount()) {
index++;
}
} else {
//如果軸承在頂部的話，并且傳進(jìn)來(lái)的index剛好是軸承的index，則-1（排除軸承View）
if (index == getChildCount() - 1) {
index--;
//如果減了1之后<0的話，也沒(méi)必要繼續(xù)了
if (index < 0) {
return;
}
}
}
}
//轉(zhuǎn)動(dòng)到指定的index
scrollToPosition(index, isSmooth);
}
}
/**
* 轉(zhuǎn)動(dòng)到指定的index
*
* @param isSmooth 是否平滑滾動(dòng)
*/
private void scrollToPosition(int index, boolean isSmooth) {
//刷新當(dāng)前選中的index
mCurrentSelectedIndex = index;
View view = getChildAt(index);
//目標(biāo)角度
float targetAngle = getTargetAngle();
//當(dāng)前index對(duì)應(yīng)的view的角度
float rotation = view.getRotation();
//取更小的那一邊
if (Math.abs(rotation - targetAngle) > 180) {
targetAngle = 360 - targetAngle;
}
//先拿到正的角度
float angle = Math.abs(rotation - fixRotation(targetAngle));
//如果是平滑滾動(dòng)，就交給ValueAnimator去處理
if (isSmooth) {
startValueAnimator(rotation > fixRotation(targetAngle) ? -angle : angle, index);
} else {
//如果不是就直接滾動(dòng)到目標(biāo)角度
onSliding(rotation > fixRotation(targetAngle) ? -angle : angle);
//回調(diào)有新的Item選中
notifyListener();
}
}
private void notifyListener() {
if (mOnItemSelectedListener != null) {
//根據(jù)記錄的當(dāng)前選中index來(lái)獲取到對(duì)應(yīng)的view
View view = getChildAt(mCurrentSelectedIndex);
//檢查下這個(gè)view是不是軸承view，如果是的話，還要排除它，并且找到正確的item
if (isViewType() && view == mBearingView) {
//如果軸承在底部的話，那就是要+1了
if (isBearingOnBottom) {
//+1的前提是不溢出
if (mCurrentSelectedIndex + 1 < getChildCount()) {
mCurrentSelectedIndex++;
} else {
//如果溢出了，也沒(méi)必要繼續(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);
}
我們一氣之下 一口氣加了三個(gè)方法，經(jīng)過(guò)之前的一些分析，相信上面那些代碼大家都可以輕松看懂了。
來(lái)看看效果如何：
哈哈，可以看到，開(kāi)啟自動(dòng)選中之后，通過(guò)點(diǎn)擊上面那一排數(shù)字，也能正確地旋轉(zhuǎn)到對(duì)應(yīng)的Item了。
好啦，我們這篇文章算是結(jié)束了，有錯(cuò)誤的地方請(qǐng)指出，謝謝大家！ github地址：https://github.com/wuyr/FanLayout 歡迎star
到此這篇關(guān)于Android之FanLayout制作圓弧滑動(dòng)效果的文章就介紹到這了,更多相關(guān)FanLayout圓弧滑動(dòng)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Android 滑動(dòng)小圓點(diǎn)ViewPager的兩種設(shè)置方法詳解流程
- Android深入探究自定義View之嵌套滑動(dòng)的實(shí)現(xiàn)
- Android實(shí)現(xiàn)背景顏色滑動(dòng)漸變效果的全過(guò)程
- Android直播軟件搭建之實(shí)現(xiàn)背景顏色滑動(dòng)漸變效果的詳細(xì)代碼
- Android HorizontalScrollView滑動(dòng)與ViewPager切換案例詳解
- Android滑動(dòng)拼圖驗(yàn)證碼控件使用方法詳解
- Android之ArcSlidingHelper制作圓弧滑動(dòng)效果
- Android 滑動(dòng)Scrollview標(biāo)題欄漸變效果(仿京東toolbar)
- Android 實(shí)現(xiàn)滑動(dòng)的六種方式
相關(guān)文章
android Retrofit2網(wǎng)絡(luò)請(qǐng)求封裝介紹
大家好，本篇文章主要講的是android Retrofit2網(wǎng)絡(luò)請(qǐng)求封裝介紹，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
本篇文章主要介紹了Android 列表形式的切換的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了詳解android是如何管理內(nèi)存的，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
Android幀式布局實(shí)現(xiàn)自動(dòng)切換顏色
這篇文章主要為大家詳細(xì)介紹了Android幀式布局實(shí)現(xiàn)自動(dòng)切換顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
flutter傳遞值到任意widget(當(dāng)需要widget嵌套使用需要傳遞值的時(shí)候)
這篇文章主要介紹了flutter傳遞值到任意widget(當(dāng)需要widget嵌套使用需要傳遞值的時(shí)候),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
基于Android實(shí)現(xiàn)一個(gè)常用的布局吸頂效果
這篇文章給大家介紹一個(gè)布局吸頂效果,一般出現(xiàn)在內(nèi)容較長(zhǎng)頁(yè)面還嵌套著分類頁(yè)面的情況,比如電商的詳情頁(yè)嵌套分類,在頁(yè)面滑動(dòng)到tab的時(shí)候我們希望tab還能保留在頁(yè)面頂部而不被頂上去,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Android?TextView跑馬燈實(shí)現(xiàn)原理及方法實(shí)例
字的跑馬燈效果在移動(dòng)端開(kāi)發(fā)中是一個(gè)比較常見(jiàn)的需求場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Android?TextView跑馬燈實(shí)現(xiàn)原理及方法的相關(guān)資料,需要的朋友可以參考下2022-05-05
Android自定義Drawable實(shí)現(xiàn)圓形和圓角
這篇文章主要為大家詳細(xì)介紹了Android自定義Drawable實(shí)現(xiàn)圓形和圓角，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
聊聊GridView實(shí)現(xiàn)拖拽排序及數(shù)據(jù)交互的問(wèn)題
這篇文章主要介紹了聊聊GridView實(shí)現(xiàn)拖拽排序及數(shù)據(jù)交互的問(wèn)題,整體實(shí)現(xiàn)思路是通過(guò)在一個(gè)容器里放置兩個(gè)dragview，DragView里面進(jìn)行View的動(dòng)態(tài)交換以及數(shù)據(jù)交換，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了Android中dumpsys命令用法簡(jiǎn)單介紹的相關(guān)資料,需要的朋友可以參考下2017-03-03