DrawerLayout+NavigationView实现侧滑菜单

控件说明

DrawerLayout+NavigationView 都是Material Design风格的最新控件,所以我们需要在 Module:app build.gradle 添加
compile 'com.android.support:design:26.0.0-alpha1'

xml布局如下:

"1.0" encoding="utf-8"?>
.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    "match_parent"
        android:layout_height="match_parent">

        "match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"/>
    

    .support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_header"
        app:menu="@menu/menu_left">

    .support.design.widget.NavigationView>
.support.v4.widget.DrawerLayout>

DrawerLayout包括内容布局和侧滑菜单布局,侧滑菜单布局我们用NavigationView 来实现,其中NavigationView 中常用的两个标签 app:headerLayout="@layout/layout_header" 用来实现头部布局,app:menu="@menu/menu_left" 用来实现菜单列表;

主页面代码逻辑

接下来我们在 Activity 中实现如下代码,

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    @BindView(R.id.navigation_view)
    NavigationView mNavigationView;
    private View headerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //侧滑控件的监听
        mDrawerLayout.addDrawerListener(new 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) {

            }
        });

        headerView = mNavigationView.getHeaderView(0);
        //侧滑菜单头部布局的监听
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "This is HeaderView", Toast.LENGTH_SHORT).show();
            }
        });
//侧滑菜单列表的点击事件监听                mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_app_update:
                        Toast.makeText(MainActivity.this, "应用更新", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_message:
                        Toast.makeText(MainActivity.this, "消息中心", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_setting:
                        Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });
    }
}

你可能感兴趣的:(Android,app)