自定义实现侧滑菜单栏

自定义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>

自定义实现侧滑菜单栏

自定义实现侧滑菜单栏

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

MainActivity文件

自定义view的attr文件

布局文件–layout.xml

菜单栏布局

主布局

猜你喜欢