android仿腾讯安全管家首页抽屉效果
转载请说明出处最近在做公司新产品的设计，看到腾讯安全管家首页的抽屉效果设计的挺不错，一方面可以讲经常使用的功能模块直接显示给用户，另一方面将用户不常用的功能模块隐藏起来，而这些功能模块的显示和隐藏可以通过一个抽屉组建实现。所以我们想将这个设计理念加入到我们的产品中。腾讯安全管家效果图如下：
http://dl.iteye.com/upload/attachment/0078/6654/652ec652-ee70-3ca7-a705-885b49e7c753.pnghttp://dl.iteye.com/upload/attachment/0078/6658/d87c516c-e43c-3574-ad1d-bae405631da8.png
虽然android 文档中向我们提供了一个叫SlidingDrawer的抽屉组建，但是这个组建的使用限制比较多，也实现不了我们想要的效果。故到网上搜了一会，也没看到有开发者写这样的组建。所以只能靠自己了，但是在网上还是看到了一下有价值的参考案例。
不费话了，直接上实现后的效果图：
http://dl.iteye.com/upload/attachment/0078/6669/107611e2-661d-342d-b49e-007dfcd00cb1.pnghttp://dl.iteye.com/upload/attachment/0078/6671/3b619a39-10e5-3215-a895-31c68006c6f1.png
下面是自定义组建的实现代码
import android.content.Context;import android.os.AsyncTask;import android.util.Log;import android.view.GestureDetector;import android.view.MotionEvent;import android.view.View;import android.widget.Button;import android.widget.LinearLayout;public class CustomSlidingDrawer extends LinearLayout implements GestureDetector.OnGestureListener, View.OnTouchListener{private final static String TAG = "CustomSlidingDrawer";private Button btnHandler;private LinearLayout container;private int mBottonMargin=0;private GestureDetector mGestureDetector;private boolean mIsScrolling=false;private float mScrollY;private int moveDistance;public CustomSlidingDrawer(Context context,View otherView,int width,int height, int hideDistance) {super(context);moveDistance = hideDistance;//定义手势识别mGestureDetector = new GestureDetector(context,this);mGestureDetector.setIsLongpressEnabled(false);//改变CustomSlidingDrawer附近组件的属性LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams();//这一步很重要，要不组建不会显示otherLP.weight=1;otherView.setLayoutParams(otherLP);//设置CustomSlidingDrawer本身的属性LayoutParams lp=new LayoutParams(width, height);lp.bottomMargin = -moveDistance;mBottonMargin=Math.abs(lp.bottomMargin);this.setLayoutParams(lp);this.setOrientation(LinearLayout.VERTICAL);//this.setBackgroundColor(Color.BLUE);//设置Handler的属性btnHandler=new Button(context);btnHandler.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 35));btnHandler.setOnTouchListener(this);this.addView(btnHandler);//设置Container的属性container=new LinearLayout(context);//container.setBackgroundColor(Color.GREEN);container.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));this.addView(container);}/** * 把View放在CustomSlidingDrawer的Container * @param v */public void fillPanelContainer(View v){container.addView(v);}/** * 异步移动CustomSlidingDrawer */class AsynMove extends AsyncTask<Integer, Integer, Void> {@Overrideprotected Void doInBackground(Integer... params) {Log.e(TAG, "AsynMove doInBackground");int times;if (mBottonMargin % Math.abs(params) == 0)// 整除times = mBottonMargin / Math.abs(params);else// 有余数times = mBottonMargin / Math.abs(params) + 1;for (int i = 0; i < times; i++) {publishProgress(params);}return null;}@Overrideprotected void onProgressUpdate(Integer... params) {Log.e(TAG, "AsynMove onProgressUpdate");LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();if (params < 0)lp.bottomMargin = Math.max(lp.bottomMargin + params,(-mBottonMargin));elselp.bottomMargin = Math.min(lp.bottomMargin + params, 0);CustomSlidingDrawer.this.setLayoutParams(lp);}}@Overridepublic boolean onDown(MotionEvent e) {mScrollY=0;mIsScrolling=false;return false;}@Overridepublic boolean onSingleTapUp(MotionEvent e) {LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();if (lp.bottomMargin < 0)new AsynMove().execute(new Integer[] { moveDistance });// 正数展开else if (lp.bottomMargin >= 0)new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩return false;}@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {mIsScrolling=true;mScrollY+=distanceY;LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();if (lp.bottomMargin < -1 && mScrollY > 0) {//往上拖拉lp.bottomMargin = Math.min((lp.bottomMargin + (int) mScrollY),0);CustomSlidingDrawer.this.setLayoutParams(lp);} else if (lp.bottomMargin > -(mBottonMargin) && mScrollY < 0) {//往下拖拉lp.bottomMargin = Math.max((lp.bottomMargin + (int) mScrollY),-mBottonMargin);CustomSlidingDrawer.this.setLayoutParams(lp);}return false;}@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {return false;}@Overridepublic void onLongPress(MotionEvent e) {}@Overridepublic void onShowPress(MotionEvent e) {}@Overridepublic boolean onTouch(View v, MotionEvent event) {if(event.getAction()==MotionEvent.ACTION_UP && //onScroll时的ACTION_UPmIsScrolling==true){LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();if (lp.bottomMargin >= (-mBottonMargin/2)) {//往上超过一半new AsynMove().execute(new Integer[] { moveDistance });// 正数展开} else if (lp.bottomMargin < (-mBottonMargin/2)) {//往下拖拉new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩}}return mGestureDetector.onTouchEvent(event); }}
下面是demo的源码：
页:
[1]