自定义实现侧滑菜单栏

自定义SplidingMenu继承自水平滚动条

---

import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import com.example.hpf.splidingmenu.R;import com.nineoldandroids.view.ViewHelper;/** * 继承自滚动条 * Created by HPF on 2016/5/27. */public class Splidingmenu extends HorizontalScrollView {    private LinearLayout mWapper;    //菜单栏    private ViewGroup mMenu;    //主界面    private ViewGroup mContent;    //屏幕宽度    private int mScreenWidth;    //菜单展开后距离屏幕右侧距离    private int mMenuRightPadding = 50;    //菜单宽度    private int mMenuWidth;    private boolean once;    private boolean isOpen;    /**     * 未使用自定义属性,调用     * @param context     * @param attrs     */    public Splidingmenu(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    /**     * 自定义且使用自定义属性，调用此构造方法     * @param context     * @param attrs     * @param defStyleAttr     */    public Splidingmenu(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //获取自定义属性        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.Splidingmenu, defStyleAttr, 0);        int n = a.getIndexCount();        for(int i = 0; i < n; i++) {            int attr = a.getIndex(i);            switch (attr) {                case R.styleable.Splidingmenu_rightPadding:                    //将50dp转化为像素值赋值给mMenuRightPadding                    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 Splidingmenu(Context context) {        this(context, null);    }    /**     * 设置子View的宽高     * @param widthMeasureSpec     * @param heightMeasureSpec     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //once为false时调用onMeasure方法        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();                //滑动距离超过menu宽度的一半时隐藏menu                if (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();        }    }    /**     * 滚动触发时     * @param l     * @param t     * @param oldl     * @param oldt     */    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        super.onScrollChanged(l, t, oldl, oldt);        //调用属性动画，设置TranslationX        float scale = l*1.0f/mMenuWidth;        ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);        float rightScale = 0.7f + 0.3f * scale;        float leftScale = 1.0f - scale * 0.3f;        float leftAlpha = 1.0f - scale * 0.4f;        ViewHelper.setTranslationX(mMenu, mMenuWidth*scale*0.7f);        ViewHelper.setScaleX(mMenu, leftScale);        ViewHelper.setScaleY(mMenu, leftScale);        ViewHelper.setAlpha(mMenu, leftAlpha);        ViewHelper.setPivotX(mContent, 0);        ViewHelper.setPivotY(mContent, mContent.getHeight()/2);        ViewHelper.setScaleX(mContent, rightScale);        ViewHelper.setScaleY(mContent, rightScale);    }}

MainActivity文件

---

import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.view.Window;import view.Splidingmenu;public class MainActivity extends AppCompatActivity {    private Splidingmenu mLeftMenu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        mLeftMenu = (Splidingmenu) findViewById(R.id.id_menu);    }    public void toggleMenu(View view) {        mLeftMenu.toggle();    }}

自定义view的attr文件

---

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

布局文件–layout.xml

---

菜单栏布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_centerInParent="true">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/browser"                android:layout_centerVertical="true"                android:id="@+id/img_1"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="20sp"                android:layout_centerVertical="true"                android:text="first item"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/img_1"/>        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/calculator"                android:layout_centerVertical="true"                android:id="@+id/img_2"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="20sp"                android:layout_centerVertical="true"                android:text="second item"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/img_2"/>        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/mail"                android:layout_centerVertical="true"                android:id="@+id/img_3"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="20sp"                android:layout_centerVertical="true"                android:text="third item"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/img_3"/>        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/settings"                android:layout_centerVertical="true"                android:id="@+id/img_4"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="20sp"                android:layout_centerVertical="true"                android:text="forth item"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/img_4"/>        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/youtube"                android:layout_centerVertical="true"                android:id="@+id/img_5"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="20sp"                android:layout_centerVertical="true"                android:text="first item"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/img_5"/>        </RelativeLayout>    </LinearLayout></RelativeLayout>

主布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:hpf="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.hpf.splidingmenu.MainActivity">    <view.Splidingmenu        android:id="@+id/id_menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        hpf:rightPadding = "200dp">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:orientation="horizontal" >            <include layout="@layout/left_menu" />            <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@drawable/qq">                <Button                    android:onClick="toggleMenu"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="toggle menu"/>            </LinearLayout>        </LinearLayout>    </view.Splidingmenu></RelativeLayout>