最佳的UI体验,Material Design实战
什么是Material Design
精美的UI设计语言
学习Material Design中的控件
1. Toolbar
还记得我们每次打开的程序的标题栏吗?啊对,那不是toolbar
做的.但是,那是actionbar
做的,Toolbar
可以说是Actionbar
的升级版了。Toolbar
不仅有Actionbar
的所有功能,而且还更加灵活.
Actionbar是默认显示的
其实这是在项目中指定的主题来显示的
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.bo.a1_material">
<application
···
android:theme="@style/AppTheme">
<!--这里android:theme指定了一个Theme.1_Material的主题-->
···
</application>
</manifest>
那么这个Theme.1_Material主题到底在哪里呢?在res/values/themes.xml文件中
<resources>
<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryDark">@color/black</item>
<item name="colorAccent">@color/black</item>
<item name="android:textColorPrimary">@color/black</item>
<item name="android:navigationBarColor">@color/purple_200</item>
<item name="android:windowBackground">@color/white</item>
</style>
</resources>
指定了一个叫做AppTheme的主题,他的父主题是Theme.Theme.AppCompat.DayNight.DarkActionBar是一个深色主题的意思
现在我们需要指定不带Actionbar的主题
通常有两种主题Theme.AppCompat.NoActionBar
深色主题Theme.AppCompat.Light.NoActionBar
浅色主题
现在已经把ActionBar隐藏起来了,可以用ToolBar了
<FrameLayout 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"
tools:context=".MainActivity">
<!--xmlns:android="http://schemas.android.com/apk/res/android"指定了一个android的命名空间
指定了新的命名空间之后,我们才可以用android:id,android:layout_height这种用法
xmlns:app="http://schemas.android.com/apk/res-auto"指定了一个app的命名空间
我们就可以用app:popupTheme这样的用法了
由于有很多新的Materials属性在新系统中新增的,所以就需要兼容老系统,所以我们就不能用android:attribute,而要用app:attribute
比如app:id或者app:layout_height等-->
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
android:background="@color/purple_500"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<!--androidx.appcompat.widget.Toolbar定义了一个Toolbar控件,这个控件widget.Toolbar是在appcompat库里面的
?attr/actionBarSize是指ActionBar的高度
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"指定Toolbar的颜色是深色的
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"指定弹出菜单是浅色的-->
</FrameLayout>
ToolBar常见功能
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
···>
<application
···>
<activity
···
android:label="Fruits">
<!--android:label="Fruits"指定标签-->
···
</activity>
</application>
</manifest>
把按钮放在toolbar中,空间不足就放在菜单里面
<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"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/setting"
android:icon="@drawable/ic_settings"
android:title="Setting"
app:showAsAction="never"/>
<!--item指定一个action按钮
id指定一个唯一id
icon指定一个图标
title指定一个标题
showAsAction指定按钮显示的位置
never- 永远显示在菜单里
ifRoom- 如果屏幕空间足够就显示在toolbar中,不够就在菜单中
always- 永远显示在toolbar中
但是Toolbar中的Action按钮只会显示图标,菜单中的Action按钮只会显示文字-->
</menu>
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding= ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
setSupportActionBar(binding.toolbar)
}
override 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,"点击了backup",Toast.LENGTH_SHORT).show()
R.id.delete->Toast.makeText(this,"点击了delete",Toast.LENGTH_SHORT).show()
R.id.setting->Toast.makeText(this,"点击了setting",Toast.LENGTH_SHORT).show()
}
return true
}
}
滑动菜单
DrawerLayout
布局----在这个布局中允许放入两个直接子控件,
- 屏幕中显示的内容
- 滑动菜单中显示的内容
<androidx.drawerlayout.widget.DrawerLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/drawLayout">
<!--主屏幕中显示的内容-->
<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="@color/purple_500"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</FrameLayout>
<!--滑动菜单中的内容-->
<!--android:layout_gravity="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="