12-Material Design实战(UI)

最佳的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="