本篇文章已授權微信公眾號碼個蛋獨家釋出
前言:
最近又是公司專案上線一段時間了，又是到了程式汪整理程式碼的節奏了。剛好也用到了ofo主頁選單的效果，於是自己把這部分給整理出來，供小夥伴們一起學習學習。還是和往常一樣，先來個效果圖再說：
下面進入主題，看看如何搭建這樣的效果，還沒看看自己做出來的效果呢，下面也來看看自己的效果圖吧:
後加的:
後加的:
使用:
佈局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--模擬的一個啟動按鈕，這個沒什麼好說的-->
<Button
android:id="@+id/start_ofo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="啟動ofo選單頁面" />
<!--這個就是我們草圖中看到的OfoMenuLayout，
用來管理title和content兩部分的動畫以及事件處理-->
<com.single.ofomenu.view.OfoMenuLayout
android:id="@+id/ofo_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<!--title部分-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff143">
<ImageView
android:id="@+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:src="@drawable/close" />
</RelativeLayout>
<!--content部分-->
<FrameLayout
android:id="@+id/menu_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp">
<!--content中列表view，用來處理自己的動畫-->
<com.single.ofomenu.view.OfoContentLayout
android:id="@+id/ofo_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:orientation="vertical"
android:paddingLeft="60dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/folder" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="我的資料"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/member" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="我的會員"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/wallet" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="我的錢包"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/travel" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="我的行程"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/remind" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="我的訊息"
android:textSize="16sp" />
</LinearLayout>
</com.single.ofomenu.view.OfoContentLayout>
</FrameLayout>
</com.single.ofomenu.view.OfoMenuLayout>
</RelativeLayout>
複製程式碼啟動menu:
//啟動menu
//ofoMenuLayout是最外層的view，用來管理title和content的動畫
ofoMenuLayout.open();
複製程式碼關閉menu:
ofoMenuLayout.close();
複製程式碼menu的監聽:
//menu的監聽
ofoMenuLayout.setOfoMenuStatusListener(new OfoMenuLayout.OfoMenuStatusListener() {
@Override
public void onOpen() {
}
@Override
public void onClose() {
//to do something,隱藏啟動按鈕
}
});
複製程式碼給menu設定content部分:
//給menu設定content部分
ofoMenuLayout.setOfoContentLayout(ofoContentLayout);
複製程式碼講解:
為了更好地理解程式碼，在上程式碼之前可以看看自己畫的圖:
從草圖整體來看，最外層是包裹了OfoMenuLayout,它是專門來管理我們的title和content部分，不難理解它裡面就兩個直接的孩子:
上面的title部分就沒什麼好說的了，就是一個相對佈局,右上角放了一個關閉按鈕,我們們主要是看下Content部分，靜態感受下Content的背景是如何生成的，可以見OfoMenuActivity設定了這麼一句程式碼:
Content背景設定:
FrameLayout menu = (FrameLayout) findViewById(R.id.menu_content);
menu.setBackground(new MenuBrawable(BitmapFactory.decodeResource(getResources(), R.mipmap.bitmap), OfoMenuActivity.this));
複製程式碼可以看到這裡new了一個MenuBrawable，沒錯!!!這裡是自定義了一個Drawable，那就去看下MenuBrawable構造器吧:
MenuBrawable構造器:
//外層弧形path
private Path mPath;
//圖片物件
private Bitmap bitmap;
private Paint paint;
//繪製圖片時要用的畫筆，主要為setXfermode做準備
private Paint mBitmapPaint;
//峰值常亮(80dp)
private static final int HEIGHTEST_Y = 80;
//圖片寬度(80dp)
private static final int BITMAP_XY = 80;
//弧度的峰值，為後面繪製貝塞爾曲線做準備
private int arcY;
//圖片邊長
private int bitmapXY;
//圖片的中心座標
private float[] bitmapCneter;
//圖片離左邊的距離
private int bitmapOffset;
public MenuBrawable(Bitmap bitmap, Context context) {
this.bitmap = bitmap;
arcY = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, HEIGHTEST_Y, context.getResources().getDisplayMetrics());
bitmapXY = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, BITMAP_XY, context.getResources().getDisplayMetrics());
bitmapOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, context.getResources().getDisplayMetrics());
mPath = new Path();
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
}
複製程式碼這裡什麼也沒有幹，就初始化了一些常量
下面就是初始化背景path以及圖片部分，具體在onBoundsChange方法進行處理：
//bounds物件就是view佔據的空間
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mPath.reset();
mPath.moveTo(bounds.left, bounds.top + arcY);
mPath.quadTo(bounds.centerX(), 0, bounds.right, bounds.top + arcY);
mPath.lineTo(bounds.right, bounds.bottom);
mPath.lineTo(bounds.left, bounds.bottom);
mPath.lineTo(bounds.left, bounds.top + arcY);
if (bitmap != null) {
mBitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//圖片的尺寸以小邊為主
int size = Math.min(bitmap.getWidth(), bitmap.getHeight());
//圖片的所放比例
float scale = (float) (bitmapXY * 1.0 / size);
Matrix matrix = new Matrix();
//需要對圖片進行縮放
matrix.setScale(scale, scale);
//傳入上面的matrix裁剪出新的bitmap物件
bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
//生成path的測量工具，主要是獲取到path上某一個點，給path上的圖片使用
PathMeasure pathMeasure = new PathMeasure();
pathMeasure.setPath(mPath, false);
bitmapCneter = new float[2];
//通過path的測量工具獲取到bitmap的中心位置
pathMeasure.getPosTan(bitmapOffset, bitmapCneter, null);
}
}
複製程式碼處理好path軌跡以及bitmap縮放和中心位置確定後，下面就剩下繪製了，Drawable跟我們的View很像，也有自己的繪製。
Drawable繪製:
@Override
public void draw(Canvas canvas) {
//在初始的圖層上繪製path，也就是我們的弧形背景
canvas.drawPath(mPath, paint);
//啟動一個新的圖層
int layer = canvas.saveLayer(getBounds().left, getBounds().top, getBounds().right, getBounds().bottom, null, Canvas.ALL_SAVE_FLAG);
//在新的圖層上繪製Dst層
canvas.drawCircle(bitmapCneter[0], bitmapCneter[1], bitmapXY / 2, mBitmapPaint);
//該mode下取兩部分的交集部分
mBitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//繪製Src層，也就是我們的目標層
canvas.drawBitmap(bitmap, bitmapCneter[0] - bitmapXY / 2, bitmapCneter[1] - bitmapXY / 2, mBitmapPaint);
mBitmapPaint.setXfermode(null);
canvas.restoreToCount(layer);
}
複製程式碼在繪製的時候用到了paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN))，關於PorterDuffXfermode傳的mode網上有對應的圖:
簡單吧，這就是我們Content部分的背景繪製了，關於Drawable的繪製可以見: 洪洋大神: blog.csdn.net/lmj62356579…
最後給張我們Content部分繪製出來的效果圖:
下面就是動態部分的處理了，其實是對三部分在y軸的平移。下面繼續回到我們的草圖中，去看下外層的OfoMenuLayout
獲取title和content:
private View titleView;
private View contentView;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, old);
titleView = getChildAt(0);
contentView = getChildAt(1);
}
複製程式碼選單開啟的動畫:
//動畫物件
private ObjectAnimator titleAnimator, contentAnimator;
//title起始和終止座標，主要為動畫做準備
private int titleStartY, titleEndY;
//content起始和終止座標，主要為動畫做準備
private int contentStartY, contentEndY;
//選單開啟的動畫
public void open() {
int titleHeight = titleView.getLayoutParams().height;
//開啟選單的時候title起始座標正好是y軸負半軸上，也是自己高度的負值
titleStartY = -titleHeight;
//開啟選單的時候title終點座標正好是y軸起點位置
titleEndY = 0;
//content起點座標是在螢幕下面+自身的高度
contentStartY = getHeight() + contentView.getHeight();
//終點位置在y軸平移為0
contentEndY = 0;
definitAnimation();
titleAnimator.start();
contentAnimator.start();
}
複製程式碼定義動畫:
//title動畫標誌，為事件分發做準備
private boolean titleAnimationing;
//content動畫標誌，為事件分發做準備
private boolean contentAnimationing;
//定義動畫部分
private void definitAnimation() {
PropertyValuesHolder titlePropertyValuesHolder = PropertyValuesHolder.ofFloat("translationY", titleStartY, titleEndY);
titleAnimator = ObjectAnimator.ofPropertyValuesHolder(titleView, titlePropertyValuesHolder);
titleAnimator.setDuration(300);
contentAnimator = ObjectAnimator.ofFloat(contentView, "translationY", contentStartY, contentEndY);
//這裡設定的時間比title要長一點
contentAnimator.setDuration(500);
titleAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
titleAnimationing = true;
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
titleAnimationing = false;
}
});
contentAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
contentAnimationing = true;
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
contentAnimationing = false;
isOpen = !isOpen;
setVisibility(isOpen ? VISIBLE : INVISIBLE);
if (isOpen) {
if (ofoMenuStatusListener != null) {
ofoMenuStatusListener.onOpen();
}
} else {
if (ofoMenuStatusListener != null) {
ofoMenuStatusListener.onClose();
}
}
}
});
}
複製程式碼選單關閉的動畫:
//選單關閉的動畫
//content中列表內容佈局，它裡面也有自己的動畫
private OfoContentLayout ofoContentLayout;
public void close() {
int titleHeight = titleView.getLayoutParams().height;
titleStartY = 0;
titleEndY = -titleHeight;
contentStartY = 0;
contentEndY = getHeight() + contentView.getHeight();
definitAnimation();
titleAnimator.start();
contentAnimator.start();
ofoContentLayout.open();
}
複製程式碼上面的開啟和關閉的動畫，其實就是調換了起始座標，好了動畫就是這麼簡單啊，需要主要在動畫期間是不允許事件分發的，需要處理事件分發部分。
事件處理:
//content中列表內容佈局，它裡面也有自己的動畫
private OfoContentLayout ofoContentLayout;
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return titleAnimationing || contentAnimationing || ofoContentLayout.isAnimationing();
}
複製程式碼兩處的動畫已經說完了，還就剩下OfoContentLayout中的動畫了。下面也來一起看看吧：
初始化所有的child:
//儲存每個child的終點座標
List<Float> endOffset = new ArrayList<>();
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, old);
for (int i = 0; i < getChildCount(); i++) {
final View child = getChildAt(i);
child.setTag(i);
child.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
child.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//終點座標按照每個child的起點座標+遞增15dp
endOffset.add(child.getTop() + ((int) child.getTag()) *
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, getContext().getResources().getDisplayMetrics()));
}
});
}
}
複製程式碼啟動OfoContentLayout中動畫:
//是否在動畫中的標誌，為事件分發做準備
private boolean isAnimationing;
//是否新增監聽的標誌，因為所有的child時間都是一樣的，所以監聽第一個child就行
private boolean hasListener;
public void open() {
for (int i = 0; i < getChildCount(); i++) {
ObjectAnimator oa = ObjectAnimator.ofFloat(getChildAt(i), "translationY", endOffset.get(i), 0);
oa.setDuration(700);
if (!hasListener) {
hasListener = true;
oa.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
isAnimationing = true;
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
isAnimationing = false;
hasListener = false;
}
});
}
oa.start();
}
}
複製程式碼總結:
歡迎客官到本店光臨:184793647(qq群)
關於我:
email: a1002326270@163.com
csdn:blog.csdn.net/u010429219/…
github:github.com/1002326270x…