Material Design之滑动菜单

来源：互联网发布：qq windows版编辑：程序博客网时间：2024/06/05 19:02

1.DrawerLayout：

它是一个布局，在布局中允许放入两个直接子控件，第一个子控件是主屏幕中显示的内容，第二个是滑动菜单中显示的内容，activity_main.xml如下：

<?xml version="1.0" encoding="utf-8"?><android.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/draw_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <FrameLayout<!--第一个为主屏幕显示的内容-->        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>    </FrameLayout>        <TextView<!--最为滑动菜单中显示的内容-->        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"<!--必须指定，它表示在左边还是右边滑动，left在左边，right在右边，而指定为start是根据系统语言来判断，若

系统语言从左到右如汉语英语则在左边，若系统语言从右到左如阿拉伯语则在右边-->        android:text="This is menu"        android:textSize="30sp"        android:background="#FFF"/></android.support.v4.widget.DrawerLayout>

    而这个滑动功能很多用户不太知道，所以我们应在ToolBar最左边加入一个导航按钮，点击的时候会将滑动菜单的内容显示出来，MainActivity.java代码如下：

public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        mDrawerLayout=(DrawerLayout)findViewById(R.id.draw_layout);        ActionBar actionBar=getSupportActionBar();//这里获得了ActionBar，但是这个ActionBar的具体实现是有ToolBar完成的        if(actionBar!=null){            actionBar.setDisplayHomeAsUpEnabled(true);//让最左边的导航按钮显示出来            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置导航按钮图标
    //实际上ToolBar最左侧的这个按钮叫做HomeAsUp按钮，它的图标为一个返回箭头，默认返回上一个活动        }    }    public boolean onCreateOptionsMenu(Menu menu){        getMenuInflater().inflate(R.menu.toolbar,menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item){        switch (item.getItemId()){            case android.R.id.home://HomeAsUp的id永远都是android.R.id.home注意有前缀android                mDrawerLayout.openDrawer(GravityCompat.START);//显示滑动菜单                break;            case R.id.backup:                Toast.makeText(this, "Backup", Toast.LENGTH_SHORT).show();                break;            case R.id.delete:                Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();                break;            case R.id.settings:                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();                break;            default:        }        return true;    }}

2.NavigationView：
    前面的滑动菜单很丑而且只有一个TextView，而实际上可以修改activity_main.xml中第二个布局从而在滑动菜单中显示更多内容，但是官方已经为我们提供了
更好的工具--NavigationView。
    2.1首先加入依赖库：
dependencies {    compile 'com.android.support:design:25.3.1'<!--这个即为NavigationView支持库-->    compile 'de.hdodenhof:circleimageview:2.1.0'<1--这个为一个开源项目CircleImageView，用它可以轻松实现图片原型化}
    2.1接下来要准备menu（在NavigationView中显示具体的菜单项）和headerLayout（在NavigationView显示头部布局的）。
    在menu文件夹下新建一个menu文件nav_menu.xml:
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single"><!--表示为一组而且一组中只可以选择一个-->        <item            android:id="@+id/nav_call"            android:icon="@drawable/nav_call"            android:title="Call" />        <item            android:id="@+id/nav_friends"            android:icon="@drawable/nav_friends"            android:title="Friends" />        <item            android:id="@+id/nav_location"            android:icon="@drawable/nav_location"            android:title="Location" />        <item            android:id="@+id/nav_mail"            android:icon="@drawable/nav_mail"            android:title="Mail" />        <item            android:id="@+id/nav_task"            android:icon="@drawable/nav_task"            android:title="Tasks" />    </group></menu>
    我们在headLayout放置简单的内容即可，如头像、用户名、邮箱，在layout文件夹下新件一个布局文件nav_header.xml:
<?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="180dp"    android:background="?attr/colorPrimary"    android:padding="10dp">    <de.hdodenhof.circleimageview.CircleImageView<!-设置原型图标-->        android:id="@+id/icon_image"        android:layout_width="70dp"        android:layout_height="70dp"        android:layout_centerInParent="true"        android:src="@drawable/nav_icon" />    <TextView        android:id="@+id/username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="tonygreendev@gmail.com"        android:textColor="#FFF"        android:textSize="14sp" />    <TextView        android:id="@+id/mail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/username"        android:text="Tony Green"        android:textColor="#FFF"        android:textSize="14sp" /></RelativeLayout>
    其显示如下：
    activity_main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?><android.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">        <FrameLayout<!--第一个为主屏幕显示的内容-->        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>    </FrameLayout>
    <android.support.design.widget.NavigationView<!--仍为第二个，即为在滑动菜单中显示的内容-->        android:id="@+id/nav_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/nav_header"<!--指定headLayout-->        app:menu="@menu/nav_menu" /><!--指定menu--></android.support.v4.widget.DrawerLayout>
    最后在MainActivity.java加入如下代码：
public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        mDrawerLayout=(DrawerLayout)findViewById(R.id.draw_layout);
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar=getSupportActionBar();//这里获得了ActionBar，但是这个ActionBar的具体实现是有ToolBar完成的        if(actionBar!=null){            actionBar.setDisplayHomeAsUpEnabled(true);//让最左边的导航按钮显示出来            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置导航按钮图标
    //际上ToolBar最左侧的这个按钮叫做HomeAsUp按钮，它的图标为一个返回箭头，默认返回上一个活动        }
navView.setCheckedItem(R.id.nav_call);//设置默认选中的菜单项navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//设置事件监听器        @Override            public boolean onNavigationItemSelected(MenuItem item) {                mDrawerLayout.closeDrawers();//这里只是简单地将滑动菜单关闭                return true;            }});
    }    public boolean onCreateOptionsMenu(Menu menu){        getMenuInflater().inflate(R.menu.toolbar,menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item){        switch (item.getItemId()){            case android.R.id.home://HomeAsUp的id永远都是android.R.id.home注意有前缀android                mDrawerLayout.openDrawer(GravityCompat.START);//显示滑动菜单                break;            case R.id.backup:                Toast.makeText(this, "Backup", Toast.LENGTH_SHORT).show();                break;            case R.id.delete:                Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();                break;            case R.id.settings:                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();                break;            default:        }        return true;    }}
此外，Navigation还有如下方法：
mNavigationView.setItemIconTintList(null);//为null则让NavigationView菜单项的图标显示的颜色即为它本身的颜色，为其他颜色则菜单项显示为其他的颜色mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//点击事件    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();        switch (item.getItemId()) {            case R.id.jishuwenta:                mDrawerLayout.closeDrawers();//这里只是简单地将滑动菜单关闭                SnackBarUtil.make(mDrawerLayout, item.getTitle().toString(), getApplicationContext());                setNavigationViewChecked(0);                myContentFragment= MyContentFragment.newInstance(item.getTitle().toString());//切换内容区标题                break;            case R.id.kaiyuantruanjian:                mDrawerLayout.closeDrawers();//这里只是简单地将滑动菜单关闭                SnackBarUtil.make(mDrawerLayout, item.getTitle().toString(), getApplicationContext());                setNavigationViewChecked(1);                myContentFragment= MyContentFragment.newInstance(item.getTitle().toString());//切换内容区标题                break;            case R.id.bokequ:                mDrawerLayout.closeDrawers();//这里只是简单地将滑动菜单关闭                SnackBarUtil.make(mDrawerLayout, item.getTitle().toString(), getApplicationContext());                setNavigationViewChecked(2);                myContentFragment= MyContentFragment.newInstance(item.getTitle().toString());//切换内容区标题                break;            case R.id.gitkehuduan:                mDrawerLayout.closeDrawers();//这里只是简单地将滑动菜单关闭                setNavigationViewChecked(3);                SnackBarUtil.make(mDrawerLayout, item.getTitle().toString(), getApplicationContext());                myContentFragment= MyContentFragment.newInstance(item.getTitle().toString());//切换内容区标题                break;        }        return true;    }});//设置NavigationBar的点击事件，会调用onNavigationItemSelected()
mNavigationView.setItemTextColor(ContextCompat.getColorStateList(this, R.color.bg_drawer_navigation));//设置NavigationView的颜色selector，注意必须在colro不是在drawable中mNavigationView.setItemIconTintList(ContextCompat.getColorStateList(this, R.color.bg_drawer_navigation));//这里为其他颜色则菜单项显示为其他的颜色
navigationView.getMenu().getItem(position).setChecked(true);//选中NavigationView的地position个
navigationView.getMenu().getItem(position).setChecked(false);//不选中NavigationView的地position个

阅读全文

0 0