简易抽屉实现

来源:互联网 发布:拍淘宝静物用什么相机 编辑:程序博客网 时间:2024/06/11 02:49

项目中用的抽屉经常有Bug,拉出来的时候偶尔推不进去,由于是别人写的,一时半会找不到问题所在,推迟了一个多月又重新找了慕课网的视频仿写了一下,感觉不错。

大神是用继承HorizontalScrollView的方式实现的(项目中用的是继承FrameLayout),巧妙避开了滑动冲突……

话不多说,先感受一下超简洁的代码

这是关键的自定义view

/** * 具有立体效果的抽屉 * 著作权:http://www.imooc.com/learn/211 作者hyman * * Created by Administrato */public class ThreeDimenDrawer extends HorizontalScrollView {    public static ThreeDimenDrawer getThreeDimenDrawer() {        return threeDimenDrawer;    }    public static ThreeDimenDrawer threeDimenDrawer;    private LinearLayout mWraaper;    private ViewGroup mMenu;//菜单栏    private ViewGroup mContent;    private int mScreenWidth;//屏幕宽度    private int mMenuRightpadding = 100;//菜单与主界面距离    private boolean once;    public static int mMenuWidth;//ca菜单宽度    /**     * 决定内部View的宽高以及自己的宽和高     *     * @param widthMeasureSpec     * @param heightMeasureSpec     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//        加判断,防止重复调用浪费性能        if (!once) {// 如果once为false            super.onMeasure(widthMeasureSpec, heightMeasureSpec);            mWraaper = (LinearLayout) getChildAt(0);// 最外层            mMenu = (ViewGroup) mWraaper.getChildAt(0);// 最外层里面的第一个子view            mContent = (ViewGroup) mWraaper.getChildAt(1);//最外层里面的第二个子view            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightpadding;//设置菜单宽度            mContent.getLayoutParams().width = mScreenWidth;  //        设置主界面宽度            once = true;        }        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    /**     * 决定view放置的位置     * 通过设偏移量 将menu隐藏     *     * @param changed     * @param l     * @param t     * @param r     * @param b     */    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        if (changed) {            this.scrollTo(mMenuWidth, 0);//menu隐藏        }    }    /**     * 处理触摸事件     *     * @param ev     * @return     */    @Override    public boolean onTouchEvent(MotionEvent ev) {        int action = ev.getAction();        switch (action) {            case MotionEvent.ACTION_UP:                /**                 * 判断手指抬起时 菜单显示到屏幕的大小,如果大于菜单宽度的一半 就全部显示  否则隐藏                 */                int scrollX = getScrollX();//就是抽屉部分                if (scrollX >= mMenuWidth / 2) {                    this.smoothScrollTo(mMenuWidth, 0);                } else {                    this.smoothScrollTo(0, 0);                }                return true;        }        return super.onTouchEvent(ev);    }    /**     * @param context     */    public ThreeDimenDrawer(Context context) {        super(context);    }    /**     * 未使用自定义属性时调用     *     * @param context     * @param attrs     */    public ThreeDimenDrawer(Context context, AttributeSet attrs) {        super(context, attrs);        threeDimenDrawer = this;        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);        DisplayMetrics outmetrics = new DisplayMetrics();        windowManager.getDefaultDisplay().getMetrics(outmetrics);//屏幕配置        mScreenWidth = outmetrics.widthPixels;//        把dp转换为PX        mMenuRightpadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightpadding, context.getResources().getDisplayMetrics());    } }
主布局:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com *****>    <com.***.weidget.ThreeDimenDrawer        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scrollbars="none">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:orientation="horizontal">            <!--水平滑动只能包含一个容器-->            <include layout="@layout/common_leftmenu" />(这是抽屉内容)            <include layout="@layout/common_main" />(主布局内容)
(理论上这里可以添加右侧抽屉甚至更多....)        </LinearLayout>    </com.****.weidget.ThreeDimenDrawer></RelativeLayout>
原理其实很简单:
1-将所有内容(包括看不见的),当成是左右滑动的页面,打开抽屉就相当于看页面最左侧内容,关闭抽屉就相当于向左滑动直到隐藏抽屉的内容;
2-显示方面,在onMeasure里面拿到所有的子View(抽屉和主界面),对宽度进行赋值,并使用标记位避免频繁重绘影响性能
3-滑动事件方面,就看代码里的注释吧 ,毕竟不难,只是我想不到而已 ,一看就懂 了 哈哈哈 ,还是人家老司机经验多
4-还有就是项目有个需求,点最上角那个按钮能打开“<span style="font-family: Arial, Helvetica, sans-serif;">抽屉</span>”,当时我是懵逼的,不过试了一下还是好弄的:
<pre style="font-family: Consolas; font-size: 10.5pt; background-color: rgb(202, 230, 202);"><span style="color:#002db5;"><strong>ThreeDimenDrawer</strong></span><span style="color:#333333;">.</span><span style="color:#680069;"><strong>getThreeDimenDrawer</strong></span><span style="color:#000066;">()</span><span style="color:#333333;">.</span>smoothScrollTo<span style="color:#000066;">(</span><span style="color:#333333;"><strong>0</strong></span><span style="color:#333333;">, </span><span style="color:#333333;"><strong>0</strong></span><span style="color:#000066;">)</span><span style="color:#333333;">;</span>

//  拿到该类引用,调用方法即可哈哈哈哈哈哈哈哈
好了 ,这次写到这里 ,今天还要研究立体效果呢   ,研究好了再写博客




0 0
原创粉丝点击