自己实现android侧滑菜单

自己实现android侧滑菜单

当今的android应用设计中，一种主流的设计方式就是会拥有一个侧滑菜单，以图为证：</div> </div>  </div> 实现这样的侧滑效果，在5.0以前我们用的最多的就是SlidingMenu这个开源框架，而5.0之后，google推出了自己的侧滑实现库，那就是DrawerLayout,它的用法比SlidingMenu更简单，而且因为是google的亲生儿子，所以现在人们更倾向于使用DrawerLayout，但是再怎么说，这些都是别人实现好的东西，我们只是拿来用用而已，对于内部的原理，很多程序员却不怎么明白，在接下来的文章中我会通过android中的一些基础控件来实现于此相似的效果，当然，也许还有很多种实现方式，但是基本的原理是类似的。</div>

 

首先，我们会用到一个控件：HorizontalScrollView 从名字我们就可以了解到，这是一种水平滑动的控件，也就是当内容大于屏幕的宽度的时候，可以左右滑动来使超出屏幕的内容显示在屏幕上。

第一步：把菜单的布局简单的写出来

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">
    <linearlayout android:layout_centerinparent="true" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">
        <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <imageview android:id="@+id/img1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher">
            <textview android:id="@+id/text1" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img1" android:layout_width="wrap_content" android:text="item1">


        </textview></imageview></relativelayout>


        <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <imageview android:id="@+id/img2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher">
            <textview android:id="@+id/text2" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img2" android:layout_width="wrap_content" android:text="item1">


        </textview></imageview></relativelayout>


        <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <imageview android:id="@+id/img3" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher">
            <textview android:id="@+id/text3" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img3" android:layout_width="wrap_content" android:text="item1">


        </textview></imageview></relativelayout>


        <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <imageview android:id="@+id/img4" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher">
            <textview android:id="@+id/text4" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img4" android:layout_width="wrap_content" android:text="item1">


        </textview></imageview></relativelayout>


        <relativelayout android:layout_height="wrap_content" android:layout_width="wrap_content">
            <imageview android:id="@+id/img5" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_launcher">
            <textview android:id="@+id/text5" android:layout_centervertical="true" android:layout_height="wrap_content" android:layout_torightof="@id/img5" android:layout_width="wrap_content" android:text="item1">


        </textview></imageview></relativelayout>
    </linearlayout>
</relativelayout></span></span>

</div> 第二步：写出整体布局</div>

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<googleplay.xiaokai.com.qq.slidmenu android:background="@drawable/img_frame_background" android:id="@+id/horscrview" android:layout_height="match_parent" android:layout_width="wrap_content" android:scrollbars="none">
    <linearlayout android:layout_height="match_parent" android:layout_width="wrap_content" android:orientation="horizontal">
        <include layout="@layout/left_menulayout">
        <linearlayout android:background="@drawable/qq" android:layout_height="match_parent" android:layout_width="match_parent">
        </linearlayout>
    </include></linearlayout>
</googleplay.xiaokai.com.qq.slidmenu>
</linearlayout></span>
</span>

</div> </div> 第三步：继承HorizontalScrollView实现自定义控件</div>

<span style="font-size:18px;">package googleplay.xiaokai.com.qq;

import android.content.Context;
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;


/**
 * Created by 孙晓凯 on 2016/3/27.
 */
public class SlidMenu extends HorizontalScrollView {
    int mScreenWit;//屏幕宽度
    int mRightWithScr;
    LinearLayout mWrap;
    ViewGroup mMenu;
    ViewGroup mContent;
    int mMenuWidth ;
    private boolean flag;


    public SlidMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        //得到屏幕的宽度
        WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
        DisplayMetrics metris = new DisplayMetrics();
        winmana.getDefaultDisplay().getMetrics(metris);
        mScreenWit = metris.widthPixels;//得到的是像素
        //把50dp转换成像素
        mRightWithScr = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());


    }


    public SlidMenu(Context context) {
        super(context);


    }


    @Override
    protected void o