Android 使用ViewDragHelper实现向slidingMenu侧滑菜单的效果

第一步：实现类

import com.android.view.tool.Logger;import android.content.Context;import android.support.v4.widget.ViewDragHelper;import android.support.v4.widget.ViewDragHelper.Callback;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;/** * DrawerLayout侧滑布局 * * @Project App_View * @Package com.android.view.dragview * @author chenlin * @version 1.0 * @Note TODO */public class SlideLayout extends ViewGroup {    private static final String TAG = "SlideLayout";    /** 最小距离 */    private static final int MIN_DRAWER_MARGIN = 64;    /** 最小移动速度 */    private static final int MIN_FLING_VELOCITY = 400;    private ViewDragHelper mHelper;    /** 左侧菜单 */    private View mLeftMenuView;    /** 内容视图 */    private View mContentView;    /** 最小移动速度 */    private float minVel;    /** 菜单的偏移量 */    private float mLeftMenuOffset;    private int mMinDrawerMargin;    public SlideLayout(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public SlideLayout(Context context) {        this(context, null);    }    public SlideLayout(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        // 得到密度        float density = getResources().getDisplayMetrics().density;        minVel = MIN_FLING_VELOCITY * density;        mMinDrawerMargin = (int) (MIN_DRAWER_MARGIN * density + 0.5f);        // 初始化        mHelper = ViewDragHelper.create(this, 1.0f, cb);        // 从左侧滑入        mHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);        // 设置最新速度        mHelper.setMinVelocity(minVel);    }    private Callback cb = new Callback() {        /** * 说明只有mLeftMenuView可以移动 */        @Override        public boolean tryCaptureView(View child, int pointerId) {            Logger.e(TAG, "tryCaptureView");            return child == mLeftMenuView;        }        /** * 触摸到左边时，capture mLeftMenuView */        @Override        public void onEdgeDragStarted(int edgeFlags, int pointerId) {            Logger.e(TAG, "onEdgeDragStarted");            mHelper.captureChildView(mLeftMenuView, pointerId);        }        /** * 水平方向移动的距离 */        @Override        public int getViewHorizontalDragRange(View child) {            return child == mLeftMenuView ? child.getWidth() : 0;        }        /** * 菜单移动时,用来设置菜单是否显示 */        @Override        public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {            // 1.先得到菜单的宽度            int childWidth = changedView.getWidth();            // 2.得到偏移量            float offset = (childWidth + left) * 1.0f / childWidth;            // 3.设置是否可见            changedView.setVisibility(offset == 0 ? VISIBLE : GONE);            // 4.            mLeftMenuOffset = offset;            // 5.视图改变了，重绘制            invalidate();        }        /** * 手指放开时 主要用于设定左侧菜单的位置 */        @Override        public void onViewReleased(View releasedChild, float xvel, float yvel) {            // 1.得到宽度            int childWidth = releasedChild.getWidth();            // 2.得到偏移量            float offset = (childWidth + releasedChild.getLeft()) * 1.0f / childWidth;            // 3.设置位置,如果在右边，则菜单移动到0,否则移动到最左侧            int finalLeft = xvel > 0 || xvel == 0 && offset > 0 ? 0 : -childWidth;            mHelper.settleCapturedViewAt(finalLeft, releasedChild.getTop());        }        /** * 计算left 我们的目标范围是-mLeft.getWidth 到 0 的宽度 */        @Override        public int clampViewPositionHorizontal(View child, int left, int dx) {            return Math.max(-child.getWidth(), Math.min(left, 0));        }        @Override        public int clampViewPositionVertical(View child, int top, int dy) {            return super.clampViewPositionVertical(child, top, dy);        }    };    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        View leftMenuView = getChildAt(1);        // 1.得到测量的size        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        // 2.测量父控件        setMeasuredDimension(widthSize, heightSize);        // 3.先设左菜单        MarginLayoutParams lp = (MarginLayoutParams) leftMenuView.getLayoutParams();        int leftMenuWidthSpec = getChildMeasureSpec(widthMeasureSpec, lp.leftMargin + lp.rightMargin + mMinDrawerMargin, lp.width);        int leftMenuHeighSpec = getChildMeasureSpec(heightMeasureSpec, lp.topMargin + lp.bottomMargin, lp.height);        // 4.测量菜单        leftMenuView.measure(leftMenuWidthSpec, leftMenuHeighSpec);        // 5.右边的内容view        View contentView = getChildAt(0);        lp = (MarginLayoutParams) contentView.getLayoutParams();        int contentWidthSpec = MeasureSpec.makeMeasureSpec(widthSize - lp.leftMargin - lp.rightMargin, lp.width);        int contentHeightSpec = MeasureSpec.makeMeasureSpec(heightSize - lp.topMargin - lp.bottomMargin, lp.height);        contentView.measure(contentWidthSpec, contentHeightSpec);        // 6.把测量后的view赋值给定义的        mLeftMenuView = leftMenuView;        mContentView = contentView;    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        // 1.先获得子view        View menuView = mLeftMenuView;        View contentView = mContentView;        // 2.进行内容定位        MarginLayoutParams lp = (MarginLayoutParams) contentView.getLayoutParams();        contentView.layout(lp.leftMargin, lp.topMargin, lp.leftMargin + mLeftMenuView.getMeasuredWidth(),                lp.topMargin + mLeftMenuView.getMeasuredHeight());        // 3.菜单定位        lp = (MarginLayoutParams) menuView.getLayoutParams();        final int menuWidth = menuView.getMeasuredWidth();        int left = -menuWidth + (int) (menuWidth * mLeftMenuOffset);        menuView.layout(left, lp.topMargin, left + menuView.getMeasuredWidth(), lp.topMargin + menuView.getMeasuredHeight());    }    /** * 把事件交由mHelper处理 */    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return mHelper.shouldInterceptTouchEvent(ev);    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        mHelper.processTouchEvent(ev);        return true;    }    /** * 如果在移动，则不断的绘制 */    @Override    public void computeScroll() {        if (mHelper.continueSettling(true)) {            invalidate();        }    }    /** * 关闭slide */    public void closeSlide() {        View menuView = mLeftMenuView;        mLeftMenuOffset = 0.0f;        mHelper.smoothSlideViewTo(menuView, -menuView.getWidth(), menuView.getTop());    }    /** * 打开slide */    public void openSlide() {        View menuView = mLeftMenuView;        mLeftMenuOffset = 1.0f;        mHelper.smoothSlideViewTo(menuView, 0, menuView.getTop());    }    /** * 设置全屏 */    @Override    protected LayoutParams generateDefaultLayoutParams() {        return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);    }    /** * 把布局的参数交由MarginLayoutParam来处理 */    @Override    protected LayoutParams generateLayoutParams(LayoutParams p) {        return new MarginLayoutParams(p);    }}

第二步：实现类

/** * 实现侧滑效果 * * @Project App_View * @Package com.android.view.dragview * @author chenlin * @version 1.0 * @Date 2016年4月22日 * @Note TODO */public class SlideActivity extends ActionBarActivity {    private SlideMenuFragment mMenuFragment;    private SlideLayout mSlideLayout;    private TextView mContentTv;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_slide);        initViews();        initFragment();    }    private void initViews() {        mSlideLayout = (SlideLayout) findViewById(R.id.id_drawerlayout);        mContentTv = (TextView) findViewById(R.id.id_content_tv);    }    private void initFragment() {        FragmentManager fm = getSupportFragmentManager();        mMenuFragment = (SlideMenuFragment) fm.findFragmentById(R.id.id_container_menu);        if (mMenuFragment == null) {            mMenuFragment = new SlideMenuFragment();            fm.beginTransaction().add(R.id.id_container_menu, mMenuFragment).commit();        }        mMenuFragment.setOnMenuItemSelectedListener(new SlideMenuFragment.OnMenuItemSelectedListener() {            @Override            public void menuItemSelected(String title) {                mSlideLayout.closeSlide();                mContentTv.setText(title);            }        });    }}

布局文件

<?xml version="1.0" encoding="utf-8"?><com.android.view.dragview.SlideLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/id_drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent" >    <!-- content -->    <RelativeLayout  android:layout_width="match_parent" android:layout_height="match_parent" android:background="#44ff0000" android:clickable="true" >        <TextView  android:id="@+id/id_content_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="hello world" android:textSize="40sp" />    </RelativeLayout>    <!-- menu -->    <FrameLayout  android:id="@+id/id_container_menu" android:layout_width="match_parent" android:layout_height="match_parent" >    </FrameLayout></com.android.view.dragview.SlideLayout>

第四步：创建fragment

import com.android.view.R;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.ListFragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ListView;/** * 左侧菜单 * @Project App_View * @Package com.android.view.dragview * @author chenlin * @version 1.0 * @Date 2016年4月22日 * @Note TODO */public class SlideMenuFragment extends ListFragment {    /**菜单个数*/    private static final int SIZE_MENU_ITEM = 3;    /**菜单集合*/    private SlideMenuItem[] mItems = new SlideMenuItem[SIZE_MENU_ITEM];    private SlideMenuAdapter mAdapter;    //---回调函数----------------------------------------------    public OnMenuItemSelectedListener mlistener;    public interface OnMenuItemSelectedListener {        void menuItemSelected(String title);    }    public void setOnMenuItemSelectedListener(OnMenuItemSelectedListener listener) {        mlistener = listener;    }    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //初始化菜单项        SlideMenuItem menuItem = null;        for (int i = 0; i < mItems.length; i++) {            menuItem = new SlideMenuItem(getResources().getStringArray(R.array.array_left_menu)[i], false, R.drawable.music_36px, R.drawable.music_36px_light);            mItems[i] = menuItem;        }    }    @Override    public void onViewCreated(View view, Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        view.setBackgroundColor(0xffffffff);        //加载数据        mAdapter = new SlideMenuAdapter(getActivity(), mItems);        setListAdapter(mAdapter);    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        return super.onCreateView(inflater, container, savedInstanceState);    }    @Override    public void onListItemClick(ListView l, View v, int position, long id) {        super.onListItemClick(l, v, position, id);        if (mlistener != null) {            SlideMenuItem item = (SlideMenuItem) getListAdapter().getItem(position);            mlistener.menuItemSelected(item.text);        }        mAdapter.setSelected(position);    }}

第四步：创建适配器

import android.content.Context;import android.graphics.Color;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;import com.android.view.R;/** * 菜单适配器 * @Project App_View * @Package com.android.view.dragview * @author chenlin * @version 1.0 * @Note TODO */public class SlideMenuAdapter extends ArrayAdapter<SlideMenuItem> {    private LayoutInflater mInflater;    private int mSelected;    public SlideMenuAdapter(Context context, SlideMenuItem[] objects) {        super(context, -1, objects);        mInflater = LayoutInflater.from(context);    }    public void setSelected(int position) {        this.mSelected = position;        notifyDataSetChanged();    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        SlideMenuItem item = getItem(position);        if (convertView == null) {            convertView = mInflater.inflate(R.layout.item_left_menu, parent, false);        }        ImageView iv = (ImageView) convertView.findViewById(R.id.id_item_icon);        TextView title = (TextView) convertView.findViewById(R.id.id_item_title);        title.setText(item.text);        iv.setImageResource(item.icon);        convertView.setBackgroundColor(Color.TRANSPARENT);        //如果是选中的        if (position == mSelected) {            iv.setImageResource(item.iconSelected);            convertView.setBackgroundColor(getContext().getResources().getColor(R.color.state_menu_item_selected));        }        return convertView;    }}

实体类：

/** * 菜单项属性值 * * @Project App_View * @Package com.android.view.dragview * @author chenlin * @version 1.0 * @Note TODO */public class SlideMenuItem {    public boolean isSelected; //是否选中    public String text;//文本    public int icon;//图标    public int iconSelected;//被选中的图片    public SlideMenuItem(String text, boolean isSelected, int icon, int iconSelected) {        this.text = text;        this.isSelected = isSelected;        this.icon = icon;        this.iconSelected = iconSelected;    }}

颜色选择器state_menu_item_selected.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@android:color/white"/> <!-- pressed -->    <item android:drawable="@android:color/black"/> <!-- default --></selector>

数组文件arrays.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <string-array name="array_left_menu">        <item>首页</item>        <item>新闻</item>        <item>游戏</item>    </string-array></resources>

更多相关文章

随机推荐