瓜瓜头条

Material Desgin - Toolbar 和 滑动菜单的简单使用

2022-05-21 11:56 由 今天没失眠 发表于 #移动端开发

Toolbar

新建项目会默认显示ActionBar，ActionBar根据项目指定的主题来显示，android:theam指定主题，在res/values/theams.xml中定义主题，因为用toolbar代替ActionBar，所以将parent主题设置为不带ActionBar的主题，如下：

<style name="Theme.MaterialTest" parent="Theme.MaterialComponents.Light.NoActionBar">

修改activity_main.xml，添加如下内容：

 <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

在MainActivity中onCreate方法中添加如下内容，使toolbar现实出来

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

修改AndroidManifest.xml中的android:label属性，修改标题栏的文字。创建menu/toolbar.xml，给标题栏添加上action按钮，用到的属性有：

  • android:id , 指定按钮id
  • android:icon ， 指定按钮图标
  • android:title ， 指定按钮文字
  • app:showAsAction , 指定按钮显示位置，有三个可选项：always,ifRoom,never

具体代码应用如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/backup"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/><!--  always:总是显示在页面上  -->


    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/><!--ifRoom:如果有位置才显示，不然就出现在右边的三个点中-->


    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/><!--  never:不显示在界面上，只让出现在右边的三个点中  -->

</menu>

p.s.使用xmlns:app是为了兼容以前的老系统

修改MainActivity中的代码，给toolbar.xml中的按钮设置点击事件。在OnCreateOptionsMenu方法中加载toolbar.xml文件，在onOptionsItemSelected方法中处理各个按钮的点击事件，具体实现如下：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this, "clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

这就是Toolbar的简单使用。

滑动菜单

定义：

滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，通过滑动的方式将菜单显示出来。

使用DrawerLayout实现滑动菜单

最外层使用DrawerLayout控件，从androix库引入，实现滑动菜单功能。FrameLayout控件中的内容为主屏幕中显示的内容，NavigationView为滑动菜单中显示的内容，layout_gravity属性必须指定，有三个可选项：

  • left:表示滑动菜单在左边
  • right:表示滑动菜单在右边
  • start表示根据系统语言判断
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    tools:context=".MainActivity">
<!--  主屏幕中的显示内容  -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </FrameLayout>
<!--  滑动菜单中显示的内容，layout_gravity属性必须指定  -->
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
</androidx.drawerlayout.widget.DrawerLayout>

使用NavigationView在滑动菜单页面定制布局

先在app/build.gradle中添加如下依赖：

implementation 'com.google.android.material:material:1.0.0'//用来提供NavigationView控件
implementation 'de.hdodenhof:circleimageview:3.1.0'//开源库，用来实现图片圆形化的功能

在menu下新建nav_menu来显示NavigationView的具体菜单项

<?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_friends"
            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>

在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:padding="10dp"
    android:background="?attr/colorPrimary">
<!--  将图片圆形化的控件，用法和ImageView一样  -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"
        android:id="@+id/icon_image"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_alignParentBottom="true"
        android:text="zhangxi0722@163.com"
        android:textSize="14sp"
        android:textColor="#FFF"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:layout_above="@+id/username"
        android:text="zhangxi"
        android:textSize="14sp"
        android:textColor="#FFF"/>

</RelativeLayout>

在activity_main.xml引入设置好的nav_menu.xml和nav_header.xml，滑动页面设置完毕

在MainActivity onCreate方法中加入如下代码

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();//获得ActionBar实例
if(actionBar != null){
    actionBar.setDisplayHomeAsUpEnabled(true);//先让导航按钮HomeAsUp显示出来
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//再设置导航按钮图片ic_menu
}
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.nav_call);//设置默认选中菜单
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected( MenuItem item) {//设置选中事件监听
    mDrawerLayout.closeDrawers();
    return true;
}
        });

 在onOptionsItemSelected方法中添加如下代码

case android.R.id.home:
    mDrawerLayout.openDrawer(GravityCompat.START);
    break;
//HomeAsUp按钮默认是一个箭头返回上一层，默认id为home，通过调用openDrawer将滑动菜单显示出来

这就是滑动菜单的简单应用

热门相关：无量真仙   霸皇纪   网游之逆天飞扬   第一神算：纨绔大小姐   刺客之王