原生的SlidingMeum侧滑

关于侧滑的例子,现在已经应有尽有,里面基本都是引用了第三方的库,纯原生的很少,今天我带领各位朋友来写一下。
按照常理先来看一下例子。
正常显示状态
这里写图片描述
拉开之后的状态
这里写图片描述
背景配的图片不好看,请原谅!
实现的过程
说到实现过程,肯定是自定义控件了,这个自定义控件是继承HorizontalScrollView(水平滑动)。重写里面的onmeaure(),onlayout(),ontouchevent()这三个方法。

package com.example.slidingdemo;

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.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class SlidingView extends HorizontalScrollView{

    //手机屏幕的宽度
    int screenwidth;
    //菜单宽度
    int meumwidth;
    //菜单宽度的一半
    int halfmeumwidth;
    //右边的尺寸固定
    int rightpadding = 50;
    boolean once;
    boolean isopen;

    public SlidingView(Context context) {
        this(context,null,0);
    }

    public SlidingView(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    public SlidingView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        //获取手机屏幕宽度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics am = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(am);
        screenwidth = am.widthPixels;
        //获取属性文件中的参数
        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:  
                // 默认50  
                rightpadding = a.getDimensionPixelSize(attr,  
                        //转化为标准尺寸
                        (int) TypedValue.applyDimension(  
                                TypedValue.COMPLEX_UNIT_DIP, 50f,  
                                getResources().getDisplayMetrics()));// 默认为10DP  

                break;  
            }  
        }  
        a.recycle();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub

        if (!once){
        //自定义控件中包含的第一个大的线性布局(里面会包含一些小的布局)
        LinearLayout lin_big = (LinearLayout) getChildAt(0);
        //获取其中两个布局(第一是底层的菜单,第二个是划过去的页面)
        ViewGroup view1 = (ViewGroup) lin_big.getChildAt(0);
        //主屏显示
        ViewGroup view2 = (ViewGroup) lin_big.getChildAt(1);

        //菜单的宽度=手机屏幕的宽度-右边剩余的宽度(50)
        meumwidth = screenwidth - rightpadding;
        //用来控制滑动到哪一个页面
        halfmeumwidth = meumwidth/2;

        //设置菜单宽度
        view1.getLayoutParams().width = meumwidth;
        //设置主屏宽度
        view2.getLayoutParams().width = screenwidth;

        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
        super.onLayout(changed, l, t, r, b);
        if(changed){
            //隐藏菜单
            this.scrollTo(meumwidth, 0);
            once = true;
        }
    }

    /**
     * 最关键的方法(控制滑动)
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        int action = ev.getAction();
        switch (action) {
        case MotionEvent.ACTION_UP:
            //获取在X轴上活动的尺寸
            int scroll_x = getScrollX();
            //当向上滑动超过菜单宽度的一半时,隐藏菜单
            if(scroll_x>halfmeumwidth){
                this.scrollTo(meumwidth, 0);
                isopen = false;
            }else{
                this.scrollTo(0, 0);
                isopen = true;
            }
            break;

        }
        return super.onTouchEvent(ev);
    }




}

对应的属性文件为:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="rightPadding" format="dimension" />

    <declare-styleable name="SlidingMenu">
        <attr name="rightPadding" />
    </declare-styleable>

</resources>

自定义的部分就是什么上面的部分,activity中的实现部分

package com.example.slidingdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;


public class MainActivity extends Activity {

    SlidingView slidingview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        slidingview = (SlidingView) findViewById(R.id.menuview);
    }


}

xml文件

<com.example.slidingdemo.SlidingView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:shi="http://schemas.android.com/apk/res/com.example.slidingdemo"
    android:id="@+id/menuview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    shi:rightPadding="100dp"
     >
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal">

        <include layout="@layout/meum"/>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/qq" >
        </LinearLayout>

    </LinearLayout>


</com.example.slidingdemo.SlidingView>

就是这么简单

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值