Material Design

绵绵思远道～

于 2022-08-05 19:28:10 发布

阅读量125

点赞数

分类专栏： Android Java 文章标签： java javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53431933/article/details/126183915

版权

Java 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Android

19 篇文章 1 订阅

订阅专栏

1.Toolbar

1.1Toolbar是什么

还记得我们每次打开的程序的标题栏吗？那不是 toolbar 做的,那是 actionbar 做的, Toolbar 可以说是 Actionbar 的升级版了。 Toolbar 不仅有 Actionbar 的所有功能,而且还更加灵活. 在项目运行在虚拟机上时，都可以看见屏幕上方有一个栏目（下图红框圈出的部分），此为系统默认的 DarkActionBar ，可在 themes.xml 中查看。

如何将它给替换掉呢？如图显示：

这样，标题栏就不见了

1.2常用的属性：

具体使用：如代码

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_200"
            app:layout_anchor="@+id/toolbar"
            app:layout_anchorGravity="center"
            app:logo="@mipmap/yy"
            app:menu="@menu/toolbar_item"
            app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
            app:subtitle="AndroidDay39"
            app:subtitleTextColor="@color/purple_700"
            app:title="zhanyu de woek"
            app:titleMarginStart="50dp"
            app:titleTextColor="@color/purple_700" />

效果展示：

1.3 添加工具栏点击事件

给Toolbar加上id，我们就可以在java代码里获取并监听用户对工具栏图标的点击：

public class MainActivity2 extends AppCompatActivity {
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        toolbar = findViewById(R.id.toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity2.this, "返回",
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

1.4溢出菜单

具体使用：

首先我们在res的menu目录中创建一个menu资源文件 toolbar_item.xml

<?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/toolbar_user"
        android:icon="@drawable/ic_baseline_person_24"
        android:title="用户"
        app:showAsAction="never"/>
    <item
        android:id="@+id/toolbar_setting"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="设置"
        app:showAsAction="never"/>
    <item
        android:id="@+id/toolbar_other"
        android:icon="@drawable/ic_baseline_more_horiz_24"
        android:title="其他"
        app:showAsAction="never"/>

</menu>

然后在中添加代码

1.5溢出菜单点击事件

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                if (item.getItemId()==R.id.toolbar_user) {
                    Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
                }else if (item.getItemId()==R.id.toolbar_setting) {
                    Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
                }else if (item.getItemId()==R.id.toolbar_other) {
                    Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
                }
                return false;
            }
        });

2.DrawerLayout 滑动菜单

2.1注意：布局----在这个布局中允许放入两个直接子控件

屏幕中显示的内容

滑动菜单中显示的内容

2.2基本控件

如图:

<?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:orientation="vertical"
    android:id="@+id/drawer"
    tools:context=".MainActivity">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_200"
            app:layout_anchor="@+id/toolbar"
            app:layout_anchorGravity="center"
            app:logo="@mipmap/yy"
            app:menu="@menu/toolbar_item"
            app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
            app:subtitle="AndroidDay39"
            app:subtitleTextColor="@color/purple_700"
            app:title="zhanyu de woek"
            app:titleMarginStart="50dp"
            app:titleTextColor="@color/purple_700" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="55dp"
            android:src="@drawable/ic_baseline_done_24"
            android:elevation="8dp"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nv_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawerlayout_menu"
        />


</androidx.drawerlayout.widget.DrawerLayout>

点击Toolbar的图标弹出滑出菜单

很简单，只需加一行代码就行了：

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                
                drawer.openDrawer(GravityCompat.START);
            }
        });

2.3NavigationView

滑动窗口里面用TextView太丑了，尝试尝试NavigationView

如何使用呢？

1. 引入开源项目CircleImageView,可以轻松实现图片圆形化

2.创建menu，作为滑动菜单 drawerlayout_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/ic_baseline_add_ic_call_24"
        android:title="打电话"/>
    <item
        android:id="@+id/nav_friend"
        android:icon="@drawable/ic_baseline_accessibility_24"
        android:title="联系人"/>
    <item
        android:id="@+id/nav_address"
        android:icon="@drawable/ic_baseline_add_location_24"
        android:title="位置"/>
    <item
        android:id="@+id/nav_book"
        android:icon="@drawable/ic_baseline_book_24"
        android:title="记事本"/>
</group>
</menu>

3.在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="200dp"
    android:background="@color/purple_200">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/civ_view"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/bingsha"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/civ_view"
        android:layout_centerHorizontal="true"
        android:textSize="20dp"
        android:text="绵绵思远道" />


</RelativeLayout>

4. 修改基本框架

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nv_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawerlayout_menu"
        />

5.设置点击事件

nav_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId()==R.id.nav_call) {
                    Toast.makeText(MainActivity.this, "打电话", Toast.LENGTH_SHORT).show();
                }else if (item.getItemId()==R.id.nav_friend) {
                    Toast.makeText(MainActivity.this,"联系人", Toast.LENGTH_SHORT).show();
                }else if (item.getItemId()==R.id.nav_address) {
                    Toast.makeText(MainActivity.this, "位置", Toast.LENGTH_SHORT).show();
                }else if (item.getItemId()==R.id.nav_book) {
                    Toast.makeText(MainActivity.this,"记事本", Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        });

3.FloatingActionButton 悬浮按钮和可交互提示

3.1基本控件

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="55dp"
            android:src="@drawable/ic_baseline_done_24"
            android:elevation="8dp"/>

4.Snackbar

4.1SnackBar是什么？

Toast提示是不是有点拉，可以用Snackbar提示，但是Toast并非是不如Snackbar，他们有不同的应用场景。 Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。 Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑操作

4.2如何使用呢？

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"删除数据",Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "已恢复数据", Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });