DrawerLayout的简单使用_drawerlayout 依赖

什么是DrawerLayout?

Android Material Design Library 推出了很长时间，越来越多的APP使用了符合Library 包的控件，DrawerLayout绝对是热门之一，Material Design定义了一个抽屉导航应该有何种外观和感受，统一了侧滑菜单和样式。简单来说就是侧滑菜单，之前做侧滑菜单时第一个会想到的就是slidingMenu,然而现在有了DrawerLayout就很方便。

基本使用

很多一部分人喜欢把DrawerLayout和NavigationView放在一起来用，这种方式挺不错的只是个人有些不太喜欢。本次介绍的主要是DrawerLayout和Fragment之间的使用。

1.添加依赖

compile 'com.android.support:design:24.2.1'
1

2.布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/background"
    tools:context="com.xhdemo.drawlayout.Main5Activity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/mContent_iv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="0dp"
            android:background="@mipmap/content_iv"
            android:padding="0dp" />
        <Button
            android:id="@+id/slideBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null" />
    </RelativeLayout>
    <fragment
        android:id="@+id/fragment"
        android:name="com.xhdemo.fragment.SettingFragment"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:tag="LEFTMENU" />

</android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

这里就很简单了以DrawerLayout为根布局，接下来我定义了一张底图和一个button按钮。按钮的作用是：点击按钮时侧滑菜单可以弹出。然后定义一个fragment作为侧滑菜单。android:layout_gravity=”left”这个属性是控制侧滑的方向。（如果你不感觉奇怪的话可以改成”right”,当然你可以在fragment下面再写一个fragment然后定义android:layout_gravity=”right”这样你就可以左右滑动了）。
然后让我们看一下fragment的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="150dp"></ListView>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12

这里我就写了一个listView，应该很好理解吧。接下来是listView中item的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginLeft="20dp"
        android:gravity="center"
        android:text="开通会员"
        android:textColor="@android:color/white"
        android:textSize="16sp" />

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里也就只写了一个TextView没什么好说的。

逻辑处理

首先给侧滑菜单添加数据。这里比较简单没什么好说的直接上代码

public class SettingFragment extends Fragment {
    private ListView listView;
    private List<String>list;
    private SettingAdatper adatper;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment2,container,false);
        listView = (ListView) rootView.findViewById(R.id.listView);
        list = new ArrayList<>();
        list.add("我的钱包");
        list.add("我的设置");
        list.add("我的娱乐");
        list.add("我的心情");
        list.add("我的收藏");
        list.add("我的文件");

        adatper = new SettingAdatper(getActivity(),list);
        listView.setAdapter(adatper);
        return rootView;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这样侧滑菜单就完成了，接下来就是Activity中的相关逻辑了先上代码

public class Main5Activity extends AppCompatActivity implements View.OnClickListener {
    private DrawerLayout drawerLayout;
    private Button slideBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        slideBtn = (Button) findViewById(R.id.slideBtn);
        slideBtn.setOnClickListener(this);
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                slideAnim(drawerView, slideOffset);
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
    }
    private void slideAnim(View drawerView, float slideOffset) {
        View contentView = drawerLayout.getChildAt(0);
        // slideOffset表示菜单项滑出来的比例，打开菜单时取值为0->1,关闭菜单时取值为1->0
        float scale = 1 - slideOffset;
        float rightScale = 0.8f + scale * 0.2f;
        float leftScale = 1 - 0.3f * scale;

        ViewHelper.setScaleX(drawerView, leftScale);
        ViewHelper.setScaleY(drawerView, leftScale);
        ViewHelper.setAlpha(drawerView, 0.6f + 0.4f * (1 - scale));
        ViewHelper.setTranslationX(contentView, drawerView.getMeasuredWidth()
                * (1 - scale));
        ViewHelper.setPivotX(contentView, 0);
        ViewHelper.setPivotY(contentView, contentView.getMeasuredHeight() / 2);
        contentView.invalidate();
        ViewHelper.setScaleX(contentView, rightScale);
        ViewHelper.setScaleY(contentView, rightScale);
    }

    @Override
    public void onClick(View view) {
        if (drawerLayout.isDrawerOpen(Gravity.LEFT)) {
            drawerLayout.closeDrawer(Gravity.LEFT);
        }else {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

这里主要看两个方法第一个是DrawerLayout的监听方法

DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这个监听事件一共要实现其中的四个方法，看名字我们大概也知道这四个方法是干什么的，那我们看看这四个方法的执行时机：
当我们打开菜单的时候,先执行onDrawerStateChanged,然后不断执行onDrawerSlide,接下来执行onDrawerOpened,最后执行onDrawerStateChanged,当我们关闭菜单的时候，先执行onDrawerStateChanged,然后不断执行onDrawerSlide,接下来会执行onDrawerClosed,最后执行onDrawerStateChanged。

之后再看slideAnim(View drawerView, float slideOffset)方法，在这里用了一个动画效果（依赖了https://github.com/JakeWharton/NineOldAndroids 这个库很强大，如有需要jar包的请留下你的邮箱）

nineoldandroids中有一些非常好用的方法，比如：

ViewHelper.setScaleX(View view, float scaleX)  
ViewHelper.setScaleY(View view, float scaleY)  
1
2

通过这个方法，我们可以对一个View进行缩放，第一个参数是我们要缩放的View，第二个参数是缩放比例，还有一个方法：

ViewHelper.setAlpha(View view, float alpha)  
1

通过这个方法，我们可以设置一个View的透明度，第一个参数是我们要改变透明度的View，第二个参数是透明度。还有一个方法：

ViewHelper.setTranslationX(View view, float translationX)  
1

通过这个方法，我们可以对一个View进行平移操作，第一个参数是要平移的View，第二参数是在X轴平移多少。还有一个方法：

ViewHelper.setScaleX(View view, float scaleX)  
ViewHelper.setScaleY(View view, float scaleY)  
1
2

通过这个方法，我们可以设置View变化时的一个轴心。主要也就这些东西，接下来可以看一下效果图。