Android入门(Material Design)
一套全新的界面设计语言——Material Design
Toolbor
不仅仅继承了ActionBar的所有功能,而且灵活性很高,可以配合其他控件完成一些Material Design的效果.
任何一个新建的项目都会默认支持ActionBar,他被在
AndroidManifest
中声明,也就是被定义在了android:theme="@style/AppTheme">
主题中。他的默认配置如下:
1 | <resources> |
其中的color是配置颜色的,这有一张颜色配置的图
![](https://image.zfxt.top/hexo-blog/Android入门(Material Design)-2023-08-04-08-42.png)
设置Toolbar
1 |
|
理解一下上述代码的内容。使用了xmlns:app
指定了一个新的命名空间,我们就可以使用app:attribute
这样的写法了。
但是为什么要加入xmlns:app
呢?因为很多Material属性是老系统不存在的,为了能够兼容老系统。就不能使用android:attribute
这样的写法了,而是应该使用app:attribute
。
Toolbar控件,这个控件是由appcompat库提供的。他的theme是为了单独设置toolbar的主题色,浅色或者深色。这里可以设置深色主题,但是如果有菜单按钮,那么弹出的菜单也变成深色,就会变得很难看。所以这里app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
就是设置弹出框为浅色主题
更多功能
- 添加按钮
右击res目录→New→Directory,创建一个menu文件夹。然后右击menu文件夹→New→Menu resource file,创建一个toolbar.xml文件,并编写如下代码:使用1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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/loibus10"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/loibus11"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/settings"
android:icon="@drawable/loibus12"
android:title="Settings"
app:showAsAction="never"/>
</menu>app:showAsAction
来指定按钮的显示位置,这里之所以再次使用了app命名空间,同样是为了能够兼容低版本的系统。showAsAction主要有以下几种值可选:always表示永远显示在Toolbar中,如果屏幕空间不够则不显示;ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单当中;never则表示永远显示在菜单当中。注意,Toolbar
中的action按钮只会显示图标,菜单中的action按钮只会显示文字
然后再activity中配置按钮的逻辑先注册,再配置逻辑功能。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.toolbar, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.backup -> Toast.makeText(
this, "You clicked Backup", Toast.LENGTH_SHORT
).show()
R.id.delete -> Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show()
R.id.settings -> Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show()
}
return true
}
滑动菜单
Drawerlayout
首先,他是一个布局,在布局中允许放入两个直接子控件:第一个是主屏幕显示的内容。第二个是滑动菜单中显式的内容。
但是关于第二个子控件有一点需要注意,layout_gravity这个属性是必须指定的,因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边,指定left表示滑动菜单在左边,指定right表示滑动菜单在右边。指定了start,表示会根据系统语言进行判断,如果系统语言是从左往右的,比如英语、汉语,滑动菜单就在左边,如果系统语言是从右往左的,比如阿拉伯语,滑动菜单就在右边。
1 | setSupportActionBar(binding.toolbar) |
这一段代码的作用是在ActionBar不为空的情况下调用setDisplayHomeAsUpEnabled()方法让导航按钮显示出来,调用setHomeAsUpIndicator()方法来设置一个导航按钮图标。
实际上,ToolBar最左侧的按钮被称为Home按钮,默认为一个返回的箭头,作用是返回上一个activity。而且这给按钮的id永远是android.R.id.home
,这是系统内定的,我们在为其设置相应的逻辑android.R.id.home->binding.drawerLayout.openDrawer(GravityCompat.START)
。
NavigationView
可以在滑动菜单页面定制任意的布局。
他需要再导入两个包,
1 | //Material库 |
需要注意的是,当你引入了Material库之后,还需要将res/values/styles.xml文件中AppTheme的parent主题改成Theme.MaterialComponents.Light.NoActionBar,否则在使用接下来的一些控件时可能会遇到崩溃问题。
使用NavigationView,要准备好menu和headerLayout。前者是用来再NavigationView显示菜单项的,后者是用来在NavigationView定义头部的
1 | <com.google.android.material.navigation.NavigationView |
这是为Drawerlayout配置NavigationView,其中声明好了menu和headerLayout。
配置menu时,需要注意的是
1 | <group android:checkableBehavior="single"> |
这里的配置表明只能单选。
最后在activity中配置
1 | binding.navView.setCheckedItem(R.id.navCall) |
这里先设置了默认选择项,然后配置他们所有选项的逻辑。这里所有的逻辑都是关闭滑动菜单
还有很多特性,不一一列举,看过一遍就不再记笔记了。这些都可以网上轻松找到代码
悬浮按钮(FloatingActionButton)
可交互提示Snackbar
CoordinatorLayout(加强版的FrameLayout)
CoordinatorLayout可以监听其所有子控件的各种事件,并自动帮助我们做出最为合理的响应。举个简单的例子,刚才弹出的Snackbar提示将悬浮按钮遮挡住了,而如果我们能让CoordinatorLayout监听到Snackbar的弹出事件,那么它会自动将内部的
FloatingActionButton向上偏移,从而确保不会被Snackbar遮挡。
glide
implementation 'com.github.bumptech.glide:glide:4.9.0'
Glide是一个超级强大的开源图片加载库,它不仅可以用于加载本地图片,还可以加载网络图片、GIF图片甚至是本地视频。
而且Glide的用法很简单。首先调用Glide.with()方法并传入一个Context、Activity或Fragment参数,然后调用load()方法加载图片,可以是一个URL地址,也可以是一个本地路径,或者是一个资源id,最后调用into()方法将图片设置到具体某一个ImageView中就可以了。卡片式布局(MaterialCardView)
ImageView中我们使用了一个scaleType属性,这个属性可以指定图片的缩放模式。
为了让所有的图片都能填充满整个ImageView,这里使用了centerCrop模式,它可以让图片保持原有比例填充满ImageView,并将超出屏幕的部分裁剪掉
AppBarLayout,与
app:layout_behavior
指定布局appbar_scrolling_view_behavior
。相互配合。app:layout_scrollFlags
在Toolbar中添加了一个app:layout_scrollFlags
属性,并将这个属性的值指定成了scroll|enterAlways|snap。其中,scroll表示当RecyclerView向上滚动的时候,Toolbar会跟着一起向上滚动并实现隐藏;enterAlways表示当RecyclerView向下滚动的时候,Toolbar会跟着一起向下滚动并重新显示;snap表示当Toolbar还没有完全隐藏或显示的时候,会根据当前滚动的距离,自动选择是隐藏还是显示。下拉刷新,首先需要导入相关的类
implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
通过这个类。。只要在需要设置刷新的模块上套上一层swiperefreshlayout就可以实现下拉功能。然后我们需要在activity中设置他的逻辑功能。可折叠式标题栏(CollapsingToolbarLayout)