高仿微信菜单,主布局层次架构，以及实现菜单，动画效果
https://github.com/xufeifandj/MenuBlurTest
布局层次：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_containt">
<!-- 放置fragmetn 容器！-->
<FrameLayout
android:id="@+id/main_fragment_containt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp"
android:background="@drawable/back"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="放置Fragment view"
android:id="@+id/tv_fragment_containt"
android:layout_gravity="center" />
</FrameLayout>
<com.ferris.menu.BlurringView
android:id="@+id/blurView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:blurRadius="11"
app:downsampleFactor="6"
android:visibility="gone"
app:overlayColor="#99FFFFFF"/>
<!-- 弹出菜单-->
<com.ferris.menu.BottomMenuLayout
android:id="@+id/bottom_menu"
android:layout_width="match_parent"
android:layout_height="300dp"
android:visibility="invisible"
android:background="#9983CC39"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu01"
android:id="@+id/tv_bottom_menu_item01"
android:textSize="18sp"
android:drawableTop="@mipmap/ic_launcher"
android:layout_gravity="center"
android:layout_alignTop="@+id/tv_bottom_menu_item02"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="42dp"
android:layout_marginStart="42dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu02"
android:id="@+id/tv_bottom_menu_item02"
android:textSize="18sp"
android:drawableTop="@mipmap/ic_launcher"
android:layout_gravity="center"
android:layout_alignTop="@+id/tv_bottom_menu_item03"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu03"
android:id="@+id/tv_bottom_menu_item03"
android:textSize="18sp"
android:drawableTop="@mipmap/ic_launcher"
android:layout_gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="45dp"
android:layout_marginEnd="45dp"
android:layout_marginTop="36dp" />
</com.ferris.menu.BottomMenuLayout>
<!-- 底部的菜单栏-->
<FrameLayout
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:background="@color/colorAccent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开菜单"
android:id="@+id/tv_bottom_bar"
android:textSize="18sp"
android:layout_gravity="center" />
</FrameLayout>
</FrameLayout>相关代码：
package com.ferris.menu;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;
/**
* Created by ferris on 2016/5/12.
*/
public class BottomMenuLayout extends RelativeLayout implements IMenu {
private boolean isShowing=false;
private int mWidth=0;
private int mHeight=0;
private final long delayTime=100L;
private BlurringView mBlurringView;
public BottomMenuLayout(Context context) {
super(context);
}
public BottomMenuLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BottomMenuLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
ViewTreeObserver vto = getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
getViewTreeObserver().removeGlobalOnLayoutListener(this);
mHeight=getHeight();
mHeight=getWidth();
setTranslationY(mHeight);
}
});
}
@Override
public void show() {
if(isShowing){
return;
}
AnimatorSet mAnimatorSet=new AnimatorSet();
//执行容器平移
ObjectAnimator translationSelf=ObjectAnimator.ofFloat(this, "translationY", mHeight,0).setDuration(300);
translationSelf.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if(getVisibility()!=View.VISIBLE){
setVisibility(View.VISIBLE);
}
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimatorSet.playSequentially(translationSelf);
//为子控件单独设置设置对应动画
long deyTime=0;
for(int i=0;i<getChildCount();i++){
getChildAt(i).setAlpha(0f);
final ObjectAnimator translationChild=ObjectAnimator.ofFloat(getChildAt(i), "translationY", mHeight,0).setDuration(300);
deyTime+=delayTime;
translationChild.setStartDelay(deyTime);
translationChild.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
((View)translationChild.getTarget()).setAlpha(1f);
}
@Override
public void onAnimationEnd(Animator animation) {
isShowing=true;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimatorSet.playSequentially(translationChild);
}
mAnimatorSet.start();
mBlurringView.refreshBlur();
mBlurringView.animate().alpha(1f).setDuration(200).setListener(new android.animation.Animator.AnimatorListener() {
@Override
public void onAnimationStart(android.animation.Animator animation) {
if(mBlurringView.getVisibility()!=View.VISIBLE)
mBlurringView.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd(android.animation.Animator animation) {
}
@Override
public void onAnimationCancel(android.animation.Animator animation) {
}
@Override
public void onAnimationRepeat(android.animation.Animator animation) {
}
}).start();
tv_bottom_bar.setText("关闭菜单");
}
@Override
public void hide() {
if(!isShowing){
return;
}
ObjectAnimator translationSelf=ObjectAnimator.ofFloat(this, "translationY", 0,mHeight).setDuration(300);
translationSelf.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
if(getVisibility()!=View.INVISIBLE){
setVisibility(View.INVISIBLE);
}
isShowing=false;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
translationSelf.start();
mBlurringView.animate().alpha(0f).setDuration(200).setListener(new android.animation.Animator.AnimatorListener() {
@Override
public void onAnimationStart(android.animation.Animator animation) {
}
@Override
public void onAnimationEnd(android.animation.Animator animation) {
if(mBlurringView.getVisibility()!=View.INVISIBLE)
mBlurringView.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationCancel(android.animation.Animator animation) {
}
@Override
public void onAnimationRepeat(android.animation.Animator animation) {
}
}).start();
tv_bottom_bar.setText("打开菜单");
}
@Override
public boolean isShowing() {
return isShowing;
}
public void setBlurView(BlurringView mBlurringView) {
this.mBlurringView=mBlurringView;
}
TextView tv_bottom_bar;
public void setBottomBar(TextView tv_bottom_bar) {
this.tv_bottom_bar=tv_bottom_bar;
}
}
Status API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Contact Help
package com.ferris.menu;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;
import android.util.AttributeSet;
import android.view.View;
/**
* 模糊view
* 必须调用refresh 才能刷新view
* ferris
*/
public class BlurringView extends View {
public BlurringView(Context context) {
this(context, null);
}
public BlurringView(Context context, AttributeSet attrs) {
super(context, attrs);
final Resources res = getResources();
final int defaultBlurRadius = res.getInteger(R.integer.default_blur_radius);
final int defaultDownsampleFactor = res.getInteger(R.integer.default_downsample_factor);
final int defaultOverlayColor = res.getColor(R.color.default_overlay_color);
initializeRenderScript(context);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PxBlurringView);
setBlurRadius(a.getInt(R.styleable.PxBlurringView_blurRadius, defaultBlurRadius));
setDownsampleFactor(a.getInt(R.styleable.PxBlurringView_downsampleFactor,
defaultDownsampleFactor));
setOverlayColor(a.getColor(R.styleable.PxBlurringView_overlayColor, defaultOverlayColor));
a.recycle();
}
public void setBlurredView(View blurredView) {
mBlurredView = blurredView;
}
private boolean isRefresh=false;
public void refreshBlur(){
isRefresh=true;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isRefresh&&mBlurredView != null) {
if (prepare()) {
// If the background of the blurred view is a color drawable, we use it to clear
// the blurring canvas, which ensures that edges of the child views are blurred
// as well; otherwise we clear the blurring canvas with a transparent color.
if (mBlurredView.getBackground() != null && mBlurredView.getBackground() instanceof ColorDrawable) {
mBitmapToBlur.eraseColor(((ColorDrawable) mBlurredView.getBackground()).getColor());
} else {
mBitmapToBlur.eraseColor(Color.TRANSPARENT);
}
mBlurredView.draw(mBlurringCanvas);
blur();
canvas.save();
canvas.translate(mBlurredView.getX() - getX(), mBlurredView.getY() - getY());
canvas.scale(mDownsampleFactor, mDownsampleFactor);
canvas.drawBitmap(mBlurredBitmap, 0, 0, null);
canvas.restore();
}
canvas.drawColor(mOverlayColor);
}
isRefresh=false;
}
public void setBlurRadius(int radius) {
mBlurScript.setRadius(radius);
}
public void setDownsampleFactor(int factor) {
if (factor <= 0) {
throw new IllegalArgumentException("Downsample factor must be greater than 0.");
}
if (mDownsampleFactor != factor) {
mDownsampleFactor = factor;
mDownsampleFactorChanged = true;
}
}
public void setOverlayColor(int color) {
mOverlayColor = color;
}
private void initializeRenderScript(Context context) {
mRenderScript = RenderScript.create(context);
mBlurScript = ScriptIntrinsicBlur.create(mRenderScript, Element.U8_4(mRenderScript));
}
protected boolean prepare() {
final int width = mBlurredView.getWidth();
final int height = mBlurredView.getHeight();
if (mBlurringCanvas == null || mDownsampleFactorChanged
|| mBlurredViewWidth != width || mBlurredViewHeight != height) {
mDownsampleFactorChanged = false;
mBlurredViewWidth = width;
mBlurredViewHeight = height;
int scaledWidth = width / mDownsampleFactor;
int scaledHeight = height / mDownsampleFactor;
// The following manipulation is to avoid some RenderScript artifacts at the edge.
scaledWidth = scaledWidth - scaledWidth % 4 + 4;
scaledHeight = scaledHeight - scaledHeight % 4 + 4;
if (mBlurredBitmap == null
|| mBlurredBitmap.getWidth() != scaledWidth
|| mBlurredBitmap.getHeight() != scaledHeight) {
mBitmapToBlur = Bitmap.createBitmap(scaledWidth, scaledHeight,
Bitmap.Config.ARGB_8888);
if (mBitmapToBlur == null) {
return false;
}
mBlurredBitmap = Bitmap.createBitmap(scaledWidth, scaledHeight,
Bitmap.Config.ARGB_8888);
if (mBlurredBitmap == null) {
return false;
}
}
mBlurringCanvas = new Canvas(mBitmapToBlur);
mBlurringCanvas.scale(1f / mDownsampleFactor, 1f / mDownsampleFactor);
mBlurInput = Allocation.createFromBitmap(mRenderScript, mBitmapToBlur,
Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
mBlurOutput = Allocation.createTyped(mRenderScript, mBlurInput.getType());
}
return true;
}
protected void blur() {
mBlurInput.copyFrom(mBitmapToBlur);
mBlurScript.setInput(mBlurInput);
mBlurScript.forEach(mBlurOutput);
mBlurOutput.copyTo(mBlurredBitmap);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mRenderScript != null) {
mRenderScript.destroy();
}
}
private int mDownsampleFactor;
private int mOverlayColor;
private View mBlurredView;
private int mBlurredViewWidth, mBlurredViewHeight;
private boolean mDownsampleFactorChanged;
private Bitmap mBitmapToBlur, mBlurredBitmap;
private Canvas mBlurringCanvas;
private RenderScript mRenderScript;
private ScriptIntrinsicBlur mBlurScript;
private Allocation mBlurInput, mBlurOutput;
}
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
