Android 上滑弹性动画+下拉放大图像+淘宝菜单

来源：互联网发布：激光切割编程师傅工资编辑：程序博客网时间：2024/05/09 07:41

最近做项目，要用到一个效果，并加上悬浮旋转菜单，我也不知道该怎么准确描述，反正就是很常见的效果，还是先上图吧

首先第一个上滑弹性效果，这个是仿zaker首页的

package com.gnod.parallaxlistview;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.content.Intent;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.Log;import android.view.MotionEvent;import android.view.View;import android.view.Window;import android.view.WindowManager;import android.view.animation.BounceInterpolator;import android.view.animation.Interpolator;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.Scroller;/** * zaker自定义效果页面 * @author Administrator * */public class PullDoorView extends RelativeLayout {private Context mContext;private Scroller mScroller;private int mScreenWidth = 0;private int mScreenHeigh = 0;private int mLastDownY = 0;private int mCurryY;private int mDelY;private boolean mCloseFlag = false;private ImageView mImgView;public PullDoorView(Context context) {super(context);mContext = context;setupView();}public PullDoorView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;setupView();}@SuppressLint("NewApi")private void setupView() {// 这个Interpolator你可以设置别的 我这里选择的是有弹跳效果的InterpolatorInterpolator polator = new BounceInterpolator();mScroller = new Scroller(mContext, polator);// 获取屏幕分辨率WindowManager wm = (WindowManager) (mContext.getSystemService(Context.WINDOW_SERVICE));DisplayMetrics dm = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(dm);mScreenHeigh = dm.heightPixels;mScreenWidth = dm.widthPixels;// 这里你一定要设置成透明背景,不然会影响你看到底层布局this.setBackgroundColor(Color.argb(0, 0, 0, 0));mImgView = new ImageView(mContext);mImgView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));mImgView.setScaleType(ImageView.ScaleType.FIT_XY);// 填充整个屏幕mImgView.setImageResource(R.drawable.bg1); // 默认背景addView(mImgView);}// 设置推动门背景public void setBgImage(int id) {mImgView.setImageResource(id);}// 设置推动门背景public void setBgImage(Drawable drawable) {mImgView.setImageDrawable(drawable);}// 推动门的动画public void startBounceAnim(int startY, int dy, int duration) {mScroller.startScroll(0, startY, 0, dy, duration);invalidate();}@Overridepublic boolean onTouchEvent(MotionEvent event) {int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN:mLastDownY = (int) event.getY();System.err.println("ACTION_DOWN=" + mLastDownY);return true;case MotionEvent.ACTION_MOVE:mCurryY = (int) event.getY();System.err.println("ACTION_MOVE=" + mCurryY);mDelY = mCurryY - mLastDownY;// 只准上滑有效if (mDelY < 0) {scrollTo(0, -mDelY);}System.err.println("-------------  " + mDelY);break;case MotionEvent.ACTION_UP:mCurryY = (int) event.getY();mDelY = mCurryY - mLastDownY;if (mDelY < 0) {if (Math.abs(mDelY) > mScreenHeigh / 2) {// 向上滑动超过半个屏幕高的时候 开启向上消失动画startBounceAnim(this.getScrollY(), mScreenHeigh, 450);mCloseFlag = true;} else {// 向上滑动未超过半个屏幕高的时候 开启向下弹动动画startBounceAnim(this.getScrollY(), -this.getScrollY(), 1000);}}break;}return super.onTouchEvent(event);}@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());Log.i("scroller", "getCurrX()= " + mScroller.getCurrX()+ "     getCurrY()=" + mScroller.getCurrY()+ "  getFinalY() =  " + mScroller.getFinalY());// 不要忘记更新界面postInvalidate();} else {if (mCloseFlag) {this.setVisibility(View.GONE);}}}}

进入主界面之后，上面为图下面为listview，实际上就是一个listView的扩展类

package com.gnod.parallaxlistview;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.animation.Animation;import android.view.animation.Transformation;import android.widget.AbsListView;import android.widget.AbsListView.OnScrollListener;import android.widget.ImageView;import android.widget.ListView;import android.widget.Toast;public class ParallaxScollListView extends ListView implements OnScrollListener {    public final static double NO_ZOOM = 1;    public final static double ZOOM_X2 = 2;    private ImageView mImageView;    private int mDrawableMaxHeight = -1;    private int mImageViewHeight = -1;    private int mDefaultImageViewHeight = 0;private double mZoomRatio;    private interface OnOverScrollByListener {        public boolean overScrollBy(int deltaX, int deltaY, int scrollX,                                    int scrollY, int scrollRangeX, int scrollRangeY,                                    int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent);    }    private interface OnTouchEventListener {        public void onTouchEvent(MotionEvent ev);    }    public ParallaxScollListView(Context context, AttributeSet attrs,                                 int defStyle) {        super(context, attrs, defStyle);        init(context);    }    public ParallaxScollListView(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    public ParallaxScollListView(Context context) {        super(context);        init(context);    }    public void init(Context context) {        mDefaultImageViewHeight = context.getResources().getDimensionPixelSize(R.dimen.size_default_height);    }    @Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);initViewsBounds(mZoomRatio);}@Override    public void onScrollStateChanged(AbsListView view, int scrollState) {    }    @Override    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,                                   int scrollY, int scrollRangeX, int scrollRangeY,                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {        boolean isCollapseAnimation = false;        isCollapseAnimation = scrollByListener.overScrollBy(deltaX, deltaY,                scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX,                maxOverScrollY, isTouchEvent)                || isCollapseAnimation;        return isCollapseAnimation ? true : super.overScrollBy(deltaX, deltaY,                scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX,                maxOverScrollY, isTouchEvent);    }    @Override    public void onScroll(AbsListView view, int firstVisibleItem,                         int visibleItemCount, int totalItemCount) {    }    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        super.onScrollChanged(l, t, oldl, oldt);        View firstView = (View) mImageView.getParent();        // firstView.getTop < getPaddingTop means mImageView will be covered by top padding,        // so we can layout it to make it shorter        if (firstView.getTop() < getPaddingTop() && mImageView.getHeight() > mImageViewHeight) {            mImageView.getLayoutParams().height = Math.max(mImageView.getHeight() - (getPaddingTop() - firstView.getTop()), mImageViewHeight);            // to set the firstView.mTop to 0,            // maybe use View.setTop() is more easy, but it just support from Android 3.0 (API 11)            firstView.layout(firstView.getLeft(), 0, firstView.getRight(), firstView.getHeight());            mImageView.requestLayout();        }    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        touchListener.onTouchEvent(ev);        return super.onTouchEvent(ev);    }    public void setParallaxImageView(ImageView iv) {        mImageView = iv;        mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);    }    private void initViewsBounds(double zoomRatio) {        if (mImageViewHeight == -1) {            mImageViewHeight = mImageView.getHeight();            if (mImageViewHeight <= 0) {                mImageViewHeight = mDefaultImageViewHeight;            }            double ratio = ((double) mImageView.getDrawable().getIntrinsicWidth()) / ((double) mImageView.getWidth());            mDrawableMaxHeight = (int) ((mImageView.getDrawable().getIntrinsicHeight() / ratio) * (zoomRatio > 1 ?                    zoomRatio : 1));        }    }        public void setZoomRatio(double zoomRatio) {    mZoomRatio = zoomRatio;    }    private OnOverScrollByListener scrollByListener = new OnOverScrollByListener() {        @Override        public boolean overScrollBy(int deltaX, int deltaY, int scrollX,                                    int scrollY, int scrollRangeX, int scrollRangeY,                                    int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {            if (mImageView.getHeight() <= mDrawableMaxHeight && isTouchEvent) {                if (deltaY < 0) {                    if (mImageView.getHeight() - deltaY / 2 >= mImageViewHeight) {                        mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY / 2 < mDrawableMaxHeight ?                                mImageView.getHeight() - deltaY / 2 : mDrawableMaxHeight;                        mImageView.requestLayout();                    }                } else {                    if (mImageView.getHeight() > mImageViewHeight) {                        mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY > mImageViewHeight ?                                mImageView.getHeight() - deltaY : mImageViewHeight;                        mImageView.requestLayout();                        return true;                    }                }            }            return false;        }    };    private OnTouchEventListener touchListener = new OnTouchEventListener() {        @Override        public void onTouchEvent(MotionEvent ev) {            if (ev.getAction() == MotionEvent.ACTION_UP) {                if (mImageViewHeight - 1 < mImageView.getHeight()) {                    ResetAnimimation animation = new ResetAnimimation(                            mImageView, mImageViewHeight);                    animation.setDuration(300);                    mImageView.startAnimation(animation);                }            }        }    };    public class ResetAnimimation extends Animation {        int targetHeight;        int originalHeight;        int extraHeight;        View mView;        protected ResetAnimimation(View view, int targetHeight) {            this.mView = view;            this.targetHeight = targetHeight;            originalHeight = view.getHeight();            extraHeight = this.targetHeight - originalHeight;        }        @Override        protected void applyTransformation(float interpolatedTime,                                           Transformation t) {            int newHeight;            newHeight = (int) (targetHeight - extraHeight * (1 - interpolatedTime));            mView.getLayoutParams().height = newHeight;            mView.requestLayout();        }    }}

看完了两个控件接着看下主界面

package com.gnod.parallaxlistview;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.Toast;public class MainActivity extends Activity {    private ParallaxScollListView mListView;    private ImageView mImageView;        //for PathMenu viewprivate boolean areButtonsShowing;private RelativeLayout composerButtonsWrapper;private ImageView composerButtonsShowHideButtonIcon;private RelativeLayout composerButtonsShowHideButton;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_splash);        initListView();        initPathMenu();    }        private void initPathMenu(){    MyAnimations.initOffset(this);composerButtonsWrapper = (RelativeLayout) findViewById(R.id.composer_buttons_wrapper);composerButtonsShowHideButton = (RelativeLayout) findViewById(R.id.composer_buttons_show_hide_button);composerButtonsShowHideButtonIcon = (ImageView) findViewById(R.id.composer_buttons_show_hide_button_icon);composerButtonsShowHideButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (!areButtonsShowing) {MyAnimations.startAnimationsIn(composerButtonsWrapper, 300);composerButtonsShowHideButtonIcon.startAnimation(MyAnimations.getRotateAnimation(0,-270, 300));} else {MyAnimations.startAnimationsOut(composerButtonsWrapper, 300);composerButtonsShowHideButtonIcon.startAnimation(MyAnimations.getRotateAnimation(-270, 0, 300));}areButtonsShowing = !areButtonsShowing;}});//set onclickListener for each child menufor (int i = 0; i < composerButtonsWrapper.getChildCount(); i++) {final int clickIndex = i;composerButtonsWrapper.getChildAt(i).setOnClickListener(new View.OnClickListener() {@SuppressLint("NewApi")@Overridepublic void onClick(View view) {Toast.makeText(getApplicationContext(), " clickIndex " + clickIndex , Toast.LENGTH_SHORT).show();composerButtonsShowHideButton.callOnClick();}});}composerButtonsShowHideButton.startAnimation(MyAnimations.getRotateAnimation(0, 360, 200));    }        private void initListView(){     mListView = (ParallaxScollListView) findViewById(R.id.layout_listview);         View header = LayoutInflater.from(this).inflate(R.layout.listview_header, null);         mImageView = (ImageView) header.findViewById(R.id.layout_header_image);         mListView.setZoomRatio(ParallaxScollListView.ZOOM_X2);         mListView.setParallaxImageView(mImageView);         mListView.addHeaderView(header);         final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,                 android.R.layout.simple_expandable_list_item_1,                 new String[]{                         "First Item",                         "Second Item",                         "Third Item",                         "Fifth Item",                         "Sixth Item",                         "Seventh Item",                         "Eighth Item",                         "Ninth Item",                         "Tenth Item",                         "....."                 }         );         mListView.setAdapter(adapter);         mListView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), adapter.getItem(position), Toast.LENGTH_SHORT).show(); } });    }}

其中 initListView()和initPathMenu()方法，即为初始化listView和右下角悬浮菜单

项目中还有一个动画的帮助类

package com.gnod.parallaxlistview;import android.content.Context;import android.view.ViewGroup;import android.view.ViewGroup.MarginLayoutParams;import android.view.animation.Animation;import android.view.animation.AnticipateInterpolator;import android.view.animation.OvershootInterpolator;import android.view.animation.RotateAnimation;import android.view.animation.TranslateAnimation;import android.widget.ImageButton;public class MyAnimations {private static int xOffset = 15;private static int yOffset = -13;public static void initOffset(Context context) {// 由布局文件xOffset = (int) (10.667 * context.getResources().getDisplayMetrics().density);yOffset = -(int) (8.667 * context.getResources().getDisplayMetrics().density);}public static Animation getRotateAnimation(float fromDegrees,float toDegrees, int durationMillis) {RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);rotate.setDuration(durationMillis);rotate.setFillAfter(true);return rotate;}public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) {for (int i = 0; i < viewgroup.getChildCount(); i++) {ImageButton inoutimagebutton = (ImageButton) viewgroup.getChildAt(i);inoutimagebutton.setVisibility(0);MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton.getLayoutParams();Animation animation = new TranslateAnimation(mlp.rightMargin- xOffset, 0F, yOffset + mlp.bottomMargin, 0F);animation.setFillAfter(true);animation.setDuration(durationMillis);animation.setStartOffset((i * 100)/ (-1 + viewgroup.getChildCount()));animation.setInterpolator(new OvershootInterpolator(2F));inoutimagebutton.startAnimation(animation);}}public static void startAnimationsOut(ViewGroup viewgroup,int durationMillis) {for (int i = 0; i < viewgroup.getChildCount(); i++) {final ImageButton inoutimagebutton = (ImageButton) viewgroup.getChildAt(i);MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton.getLayoutParams();Animation animation = new TranslateAnimation(0F, mlp.rightMargin- xOffset, 0F, yOffset + mlp.bottomMargin);animation.setFillAfter(true);animation.setDuration(durationMillis);animation.setStartOffset(((viewgroup.getChildCount() - i) * 100)/ (-1 + viewgroup.getChildCount()));// 顺序倒一下比较舒服animation.setInterpolator(new AnticipateInterpolator(2F));animation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation arg0) {}@Overridepublic void onAnimationRepeat(Animation arg0) {}@Overridepublic void onAnimationEnd(Animation arg0) {// TODO Auto-generated method stubinoutimagebutton.setVisibility(8);}});inoutimagebutton.startAnimation(animation);}}}

最后附上本文Demo地址，点击下载

3 1