Material Design

最新推荐文章于 2024-08-23 11:30:03 发布

shuo277

最新推荐文章于 2024-08-23 11:30:03 发布

阅读量159

点赞数

文章标签： android android studio java

本文链接：https://blog.csdn.net/shuo277/article/details/126200250

版权

1.Toolbar

还记得我们每次打开的程序的标题栏吗？那不是 tool bar 做的,那是 acti onbar 做的, Tool bar 可以说是Acti onbar 的升级版了。 Tool bar 不仅有 Acti onbar 的所有功能,而且还更加灵活.

在项目运行在虚拟机上时，都可以看见屏幕上方有一个栏目（下图红框圈出的部分），此为系统默认的DarkActi onBar ，可在 themes . xml 中查看。

是用于替换该栏目的，以便于我们更灵活的编辑栏目内容，所以我们先将主题文件中的DarkActionBar改为NoActionBar，再次运行就可以发现顶端的栏目不见了

1.1基本框架

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     
     android:layout_width="match_parent"    
     android:layout_height="match_parent"    
     ndroid:orientation="vertical">
<androidx.appcompat.widget.Toolbar
        android:background="@color/teal_200"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
</LinearLayout>

注意尖括号里不是普通的Toolbar，而是androidx.appcompat.widget.Toolbar。然后栏目的宽度直接与屏幕一致，高度则调用ActionBar的高度。设置好后在虚拟机上运行我们就能看到一个自定义颜色的工具栏：

1.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:id="@+id/mDrawer"
    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="wrap_content"
          android:background="#319FF6"
          app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
          app:title="ShadyPi's blog"
          app:titleMarginStart="50dp"
          app:subtitle="Android学习笔记"
          app:logo="@mipmap/hg"
          app:menu="@menu/toolbar_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

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_menu.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基本框架

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

屏幕中显示的内容

滑动菜单中显示的内容

<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/mDrawer"
    tools:context=".MainActivity">
< ! - -主屏幕中显示的内容- ->
   <FrameLayout
       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="wrap_content"
          android:background="#319FF6"
          app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
          app:title="ShadyPi's blog"
          app:titleMarginStart="50dp"
          app:subtitle="Android学习笔记"
          app:logo="@mipmap/hg"
          app:menu="@menu/toolbar_menu"/>

</FrameLayout>
    < ! --滑动菜单中的内容-->
    < !--and roid：layoutg ravity="start"指定了滑动菜单在屏幕的哪边start是指系统语言是从左到右读就在右边反之就在左边- ->
     < !--android:layout_gravity="start"必须要指定，指定了的就是滑动菜单- ->
<TextView

        android: layout_width="match_parent"
        android: layout_height="match_parent"
        android: background="#FFF"
        android:layout_gravity="left"
        android:text="菜单"
        android:textSize="30sp"/>
</androidx.drawerlayout.widget.DrawerLayout>

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

//点击事件
 toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            mDrawer.openDrawer(GravityCompat.START);
              
            }
        });

2.2NavigationView

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

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

dependencies {

    implementation 'de.hdodenhof:circleimageview:3.0.1'

}

2.创建menu，作为滑动菜单 drawerlayout_men.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/navCall"
            android:icon="@drawable/ic_baseline_add_ic_call_24"
            android:title="打电话" />
        <item
            android:id="@+id/navFriend"
            android:icon="@drawable/ic_baseline_mobile_friendly_24"
            android:title="朋友" />
        <item
            android:id="@+id/navLocation"
            android:icon="@drawable/ic_baseline_location_on_24"
            android:title="位置" />
        <item
            android:id="@+id/navTask"
            android:icon="@drawable/ic_baseline_library_books_24"
            android:title="记事本" />
    </group>
</menu>

3.在layout创建headerLayout 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:background="#A9E7EF"
    android:layout_height="200dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/iconImage"
        android:src="@mipmap/img"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/textView"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iconImage"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        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

Toast提示是不是有点拉，可以用Snackbar提示，但是Toast并非是不如Snackbar，他们有不同的应用场景。

Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。

Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑操作

4.1基本框架

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();
            }
        });

5.CoordinatorLayout

但是此时我们会发现Snackbar弹出的时候会把悬浮按钮遮住，但是这个问题我们可以用

CoordinatorLayout解决

CoordinatorLayout可以是一种加强版的FrameLayout(帧布局)

CoordinatorLayout会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的响应

5.1基本框架

<?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/mDrawer"
    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="wrap_content"
          android:background="#319FF6"
          app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
          app:title="ShadyPi's blog"
          app:titleMarginStart="50dp"
          app:subtitle="Android学习笔记"
          app:logo="@mipmap/hg"
          app:menu="@menu/toolbar_menu"/>

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

   </androidx.coordinatorlayout.widget.CoordinatorLayout>

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

</androidx.drawerlayout.widget.DrawerLayout>

其实就是把原本的FrameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就行了效果就是当点击悬浮按钮Snackbar出现的时候，悬浮按钮会上移来适应Snackbar是自己不会被Snackbar遮住

但是Snackbar并不是CoordinatorLayout的子控件，而是DrawerLayout的子控件,为什么也能成功呢?

是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功

shuo277

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design

是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功。是用于替换该栏目的，以便于我们更灵活的编辑栏目内容，所以我们先将主题文件中的DarkActionBar改为NoActionBar，再次运行就可以发现顶端的栏目不见了。Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑操作。...
复制链接

扫一扫