当今的android应用设计中。一种主流的设计方式就是会拥有一个側滑菜单，以图为证：


    实现这种側滑效果，在5.0曾经我们用的最多的就是SlidingMenu这个开源框架，而5.0之后。google推出了自己的側滑实现库。那就是DrawerLayout,它的使用方法比SlidingMenu更简单，并且由于是google的亲生儿子，所以如今人们更倾向于使用DrawerLayout，可是再怎么说，这些都是别人实现好的东西，我们仅仅是拿来用用而已。对于内部的原理。非常多程序猿却不怎么明确，在接下来的文章中我会通过android中的一些基础控件来实现于此相似的效果，当然，或许还有非常多种实现方式，可是主要的原理是类似的。

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

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

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?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="match_parent"

        android:orientation="vertical"

        android:layout_centerInParent="true"

        >

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:id="@+id/img1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher"

                />

            <TextView

                android:id="@+id/text1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="item1"

                android:layout_toRightOf="@id/img1"

                android:layout_centerVertical="true"

                />

        </RelativeLayout>

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:id="@+id/img2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher"

                />

            <TextView

                android:id="@+id/text2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="item1"

                android:layout_toRightOf="@id/img2"

                android:layout_centerVertical="true"

                />

        </RelativeLayout>

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:id="@+id/img3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher"

                />

            <TextView

                android:id="@+id/text3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="item1"

                android:layout_toRightOf="@id/img3"

                android:layout_centerVertical="true"

                />

        </RelativeLayout>

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:id="@+id/img4"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher"

                />

            <TextView

                android:id="@+id/text4"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="item1"

                android:layout_toRightOf="@id/img4"

                android:layout_centerVertical="true"

                />

        </RelativeLayout>

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            >

            <ImageView

                android:id="@+id/img5"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:src="@drawable/ic_launcher"

                />

            <TextView

                android:id="@+id/text5"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="item1"

                android:layout_toRightOf="@id/img5"

                android:layout_centerVertical="true"

                />

        </RelativeLayout>

    </LinearLayout>

</RelativeLayout></span></span>


第二步：写出总体布局
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?xml version="1.0" encoding="utf-8"?

>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<googleplay.xiaokai.com.qq.SlidMenu

    android:id="@+id/horscrview"

    android:layout_width="wrap_content"

    android:layout_height="match_parent"

    android:background="@drawable/img_frame_background"

    android:scrollbars="none"

    >

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:orientation="horizontal"

        >

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

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@drawable/qq"

            >

        </LinearLayout>

    </LinearLayout>

</googleplay.xiaokai.com.qq.SlidMenu>

</LinearLayout></span>

</span>


注意：此时的googplay.xiaokai.com.qq.SlidMenu就是我们要实现的控件。

第三步：继承HorizontalScrollView实现自己定义控件
<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 onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        if (!flag) {

            mWrap = (LinearLayout) getChildAt(0);//得到此空间中的第一个子控件

            mMenu = (ViewGroup) mWrap.getChildAt(0);//得到menu

            mContent = (ViewGroup) mWrap.getChildAt(1);//得到内容控件

            mMenuWidth = mMenu.getLayoutParams().width = mScreenWit - mRightWithScr;//側滑菜单的宽度为屏幕宽度减去50dp

            mContent.getLayoutParams().width = mScreenWit;//设置内容控件宽度

            flag = true;

        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    /*

    实现的功能是将menu隐藏，通过设置偏移量

     */

    @Override

    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        if(changed) {

            this.scrollTo(mMenuWidth, 0);//向左移动

        }

        super.onLayout(changed, l, t, r, b);

    }

    @Override

    public boolean onTouchEvent(MotionEvent ev) {

        int action = ev.getAction();

        switch (action){

            case MotionEvent.ACTION_UP:

                int scx = getScrollX(); //就是当前view的左上角相对于母视图的左上角的X轴偏移量

                if(scx>=mMenuWidth/2){

                    this.smoothScrollTo(mMenuWidth,0);

                }else{

                    this.smoothScrollTo(0,0);

                }

            return true;

        }

        return super.onTouchEvent(ev);

    }

}</span>


    此时程序还不够灵活，比方假设想让让菜单距离屏幕右边的距离是能够自己调控的，应该怎么办呢？
此时我们能够自己定义一个属性。

自己定义属性第一步：
    在values目录中创建一个attr.xml文件；

第二步：在文件里定义属性
<span style="font-size:18px;"><?

xml version="1.0" encoding="utf-8"?

>

<resources>

    <declare-styleable name="SlidMenu">

        <attr name="RithtPadding" format="dimension">

        </attr>

    </declare-styleable>

</resources>

RithtPadding就是自己定义的属性的名称；

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

>

<LinearLayout

    xmlns:my="http://schemas.android.com/apk/res-auto"  <!--注意。要使用自己的命名空间--!>

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<googleplay.xiaokai.com.qq.SlidMenu

    android:id="@+id/horscrview"

    android:layout_width="wrap_content"

    android:layout_height="match_parent"

    android:background="@drawable/img_frame_background"

    android:scrollbars="none"

    my:RithtPadding="100dp" <!--自己定义的控件--!>

    >

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:orientation="horizontal"

        >

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

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@drawable/qq"

            >

        </LinearLayout>

    </LinearLayout>

</googleplay.xiaokai.com.qq.SlidMenu>

</LinearLayout></span>



第三步：在代码中得到布局文件里的属性的值。并进行对应的操作
<span style="font-size:18px;">public SlidMenu(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        //得到屏幕的宽度

        WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);

        DisplayMetrics metris = new DisplayMetrics();

        winmana.getDefaultDisplay().getMetrics(metris);

        mScreenWit = metris.widthPixels;//得到的是像素

        <span style="color:#3366ff;">TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidMenu,defStyleAttr,0);

        int n = array.getIndexCount();

        for(int i=0;i<n;i++){

           int attr = array.getIndex(i);

            switch (attr){

                case R.styleable.SlidMenu_RithtPadding:

                    mRightWithScr = array.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));

                    break;

            }

        }

        array.recycle();//</span>

    }</span>


   嗯。这次好像比較完美了。诶？不正确，人家的側滑都是在左上角有一个点击button的，一点，菜单就能够出来，再一点，菜单就会进去。好吧，我们来实现它！

    仅仅须要两步就可以：


第一步：在自己定义控件中加入下面三个方法：
  
<span style="font-size:18px;">/*

    打开菜单

     */

    public void openMenu(){

        if(isOpen)return;

        else {

            this.smoothScrollTo(0,0);//打开

            isOpen = true;

        }

    }

    /*

    关闭菜单

     */

    public void closeMenu(){

        if(!isOpen){

            return ;

        }else{

            this.smoothScrollTo(mMenuWidth,0);

            isOpen = false;

        }

    }

    /*

    切换菜单

     */

    public void toggle(){

        if(isOpen){

            closeMenu();

        }else{

            openMenu();

        }

    }</span>



第二步：在布局文件里定义一个button（这个都会，我就不贴代码了），然后在使用控件的时候在点击方法中直接调用就可以
<span style="font-size:18px;">public class MainActivity extends AppCompatActivity {

    private SlidMenu slidmenu;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);<span style="font-family: Arial, Helvetica, sans-serif;">//</span><span style="font-family: Arial, Helvetica, sans-serif;">假设继承的是ActionBarActivity或者是AppCompatActivity就会报错，</span><span style="font-family: Arial, Helvetica, sans-serif;">假设你执意要用这种方法，请继承Activity。</span>

//        假设你继承的是AppCompatActivity或ActionBarActivity请调用以下的方法取代上面的方法

//        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        slidmenu = (SlidMenu) findViewById(R.id.horscrview);

    }

    public void toggle(View view){

        slidmenu.toggle();

    }

}

</span>


    OK，大功告成，这次总能够了吧！ 嗯，看似还行。可是我们还能够做成更绚丽的效果！

实现这样的效果也非常easy。主要通过属性动画来实现，在自己定义控件中加入例如以下代码：
<span style="font-size:18px;">/**

     * 滚动发生时

     */

    @Override

    protected void onScrollChanged(int l, int t, int oldl, int oldt)

    {

        super.onScrollChanged(l, t, oldl, oldt);

        /**

         * 差别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);

    }</span>



    嗯，这次才是大功告成！

图：


想要源代码的同学，这是源代码地址：https://github.com/anxiaokai/seslidmenu.git

參考资料：慕课网

最新文章

  1. 操作系统开发系列—1.HelloWorld ●
  2. Less的简单使用
  3. Head First 设计模式之适配器模式与外观模式
  4. C# delegate
  5. maven 编译插件
  6. Tomcat Context配置(转)
  7. parent,parents和closest
  8. #pragma weak
  9. 微信或手机浏览器在线显示office文件（已測试ios、android）
  10. java处理Excel文件---excel文件的创建，删除，写入，读取
  11. 操作IFRAME及元素
  12. linux及windows文件共享
  13. Flink--DateSet的Transformation简单操作
  14. Backpack VI
  15. 用swoole实现mysql的连接池--摘自https://github.com/153734009/doc/blob/master/php/mysql_pool.php
  16. 站在.NET的角度学安卓的草民笔记1
  17. [转]VirtualBox中的网络连接方式详解
  18. c语言输出控制符
  19. 1014_C语言的文法
  20. Swagger 2.0 摘要

热门文章

  1. Asp.net跨域配置
  2. CVTE面经
  3. POJ 3114 Tarjan+Dijkstra
  4. css 引入方式
  5. 同域之下子iframe的DOM控制问题
  6. css下拉菜单写法
  7. DB2数据常用指令
  8. WEB笔记-5、字体和文本
  9. jQuery中容易让人困惑的东西
  10. Maya API编程快速入门