仿QQ侧滑

来源：互联网发布：二级域名解析到端口编辑：程序博客网时间：2024/06/06 03:48

模仿QQ的侧滑菜单

仿QQ侧滑菜单主要用到开源控件SlidingMenu。

自定义控件SlidingMenu

/** * 侧滑 *  * @author Administrator *  */public class SlidingMenu extends HorizontalScrollView {    private LinearLayout mWapper;    private ViewGroup mMenu;    private ViewGroup mContent;    private int mScreenWidth;    private int mMenuWidth;    // dp    private int mMenuRightPadding = 50;    private boolean once;    public  boolean isOpen;    public static final int[] SlidingMenu = { 0x7f010000 };    /**     * 未使用自定义属性时，调用     *      * @param context     * @param attrs     */    public SlidingMenu(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    /**     * 当使用了自定义属性时，会调用此构造方法     *      * @param context     * @param attrs     * @param defStyle     */    public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        // 获取我们定义的属性        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,                R.styleable.SlidingMenu, defStyle, 0);        int n = a.getIndexCount();        for (int i = 0; i < n; i++) {            int attr = a.getIndex(i);            switch (attr) {            case R.styleable.SlidingMenu_rightPadding:                mMenuRightPadding = a.getDimensionPixelSize(attr,                        (int) TypedValue.applyDimension(                                TypedValue.COMPLEX_UNIT_DIP, 50, context                                        .getResources().getDisplayMetrics()));                break;            }        }        a.recycle();        WindowManager wm = (WindowManager) context                .getSystemService(Context.WINDOW_SERVICE);        DisplayMetrics outMetrics = new DisplayMetrics();        wm.getDefaultDisplay().getMetrics(outMetrics);        mScreenWidth = outMetrics.widthPixels;    }    public SlidingMenu(Context context) {        this(context, null);    }    /**     * 设置子View的宽和高 设置自己的宽和高     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        if (!once) {            mWapper = (LinearLayout) getChildAt(0);            mMenu = (ViewGroup) mWapper.getChildAt(0);            mContent = (ViewGroup) mWapper.getChildAt(1);            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth                    - mMenuRightPadding;            mContent.getLayoutParams().width = mScreenWidth;            once = true;        }        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    /**     * 通过设置偏移量，将menu隐藏     */    @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);        }    }    @Override    public boolean onTouchEvent(MotionEvent ev) {            int action = ev.getAction();            switch (action) {            case MotionEvent.ACTION_UP:                // 隐藏在左边的宽度                int scrollX = getScrollX();                if (scrollX >= mMenuWidth / 4) {//scrollX >= mMenuWidth / 2                    this.smoothScrollTo(mMenuWidth, 0);                    isOpen = false;                } else {                    this.smoothScrollTo(0, 0);                    isOpen = true;                }                return true;            }        return super.onTouchEvent(ev);    }    /**     * 打开菜单     */    public void openMenu() {        if (isOpen)            return;        this.smoothScrollTo(0, 0);        isOpen = true;    }    public void closeMenu() {        if (!isOpen)            return;        this.smoothScrollTo(mMenuWidth, 0);        isOpen = false;    }    /**     * 切换菜单     */    public void toggle() {        if (isOpen) {            closeMenu();        } else {            openMenu();        }    }    /**     * 滚动发生时     */    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        super.onScrollChanged(l, t, oldl, oldt);        float scale = l * 1.0f / mMenuWidth; // 1 ~ 0        /**         * 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale         *          * 区别2：菜单的偏移量需要修改         *          * 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0 0.6+         * 0.4 * (1- scale) ;         *          */        float rightScale = 0.7f + 0.3f * scale;        float leftScale = 1.0f - scale * 0.3f;        float leftAlpha = 0.6f + 0.4f * (1 - scale);        // 调用属性动画，设置TranslationX        ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);        ViewHelper.setScaleX(mMenu, leftScale);        ViewHelper.setScaleY(mMenu, leftScale);        ViewHelper.setAlpha(mMenu, leftAlpha);        // 设置content的缩放的中心点        ViewHelper.setPivotX(mContent, 0);        ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);        ViewHelper.setScaleX(mContent, rightScale);        ViewHelper.setScaleY(mContent, rightScale);    }}

SlidingMenu需要在values文件夹创建attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="rightPadding" format="dimension"></attr>    <declare-styleable name="SlidingMenu">        <attr name="rightPadding"></attr>    </declare-styleable></resources>

自定义控件SlidingMenu还需要jar包 nineoldandroids-2.4.0.jar

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"     xmlns:hyman="http://schemas.android.com/apk/res/com.example.sideslipe"    android:layout_width="match_parent"    android:layout_height="match_parent"    ><com.example.sideslipe.SlidingMenu     android:id="@+id/slidingmenu"    android:layout_width="match_parent"    android:layout_height="match_parent"    hyman:rightPadding="100dp"    android:background="#fefefe"    >    <LinearLayout         android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal"        >        <include layout="@layout/left"/>       <include layout="@layout/middle"/>    </LinearLayout></com.example.sideslipe.SlidingMenu></RelativeLayout>

侧滑菜单布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <include android:id="@+id/left" layout="@layout/leftmenu" android:visibility="gone"/></LinearLayout>

leftmenu.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:gravity="center_vertical"    >    <LinearLayout          android:id="@+id/start"        android:layout_width="match_parent"        android:layout_height="45dp" android:orientation="horizontal"                >        <ImageView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_launcher"            />        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="开始"            android:layout_gravity="center_vertical"            />    </LinearLayout>    <LinearLayout         android:id="@+id/end"        android:layout_width="match_parent"        android:layout_height="45dp" android:orientation="horizontal"                >        <ImageView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_launcher"            />        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="结束"            android:layout_gravity="center_vertical"            />    </LinearLayout></LinearLayout>

middle.xml布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#fefefe"    android:orientation="vertical" ><LinearLayout     android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="horizontal"    android:background="#626262"    >    <ImageView         android:id="@+id/img"        android:layout_width="40dp"        android:layout_height="40dp"        android:src="@drawable/ic_launcher"        />    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="QQ侧滑"        android:layout_gravity="center_vertical|center_horizontal"        /></LinearLayout> <ScrollView             android:id="@+id/scrollview"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="#fefefe"                android:orientation="vertical"                android:scrollbars="none"            >        <LinearLayout             android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:background="@drawable/qq"            ></LinearLayout></ScrollView></LinearLayout>

程序代码

public class MainActivity extends Activity implements OnClickListener{private SlidingMenu slidingMenu;private LinearLayout li_s,li_end;private ImageView img;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        slidingMenu=(SlidingMenu) findViewById(R.id.slidingmenu);        ScrollView scroll = (ScrollView) findViewById(R.id.scrollview);        scroll.smoothScrollTo(0, 0);        li_s=(LinearLayout) findViewById(R.id.start);        li_end=(LinearLayout) findViewById(R.id.end);        img=(ImageView) findViewById(R.id.img);        img.setOnClickListener(this);        li_s.setOnClickListener(this);        li_end.setOnClickListener(this);        findViewById(R.id.left).setVisibility(View.VISIBLE);      }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public void onClick(View v) {        // TODO Auto-generated method stub        switch (v.getId()) {        case R.id.img:            slidingMenu.toggle();            break;        case R.id.start:            Toast.makeText(getApplicationContext(), "开始", 0).show();            break;        case R.id.end:            Toast.makeText(getApplicationContext(), "结束", 0).show();            break;        default:            break;        }    }}

特别注意：

**如果主页布局不用ScrollView包裹，代码里面没有ScrollView scroll = (ScrollView) findViewById(R.id.scrollview);
scroll.smoothScrollTo(0, 0); 在主页可以响应侧滑菜单的点击事件！**
仿QQ侧滑demo下载地址：

http://download.csdn.net/detail/yy471101598/9110805

0 0