material design ui(material design官网)

最佳的UI体验,Material Design实战 什么是Material Design

精美的UI设计语言

学习Material Design中的控件 1. Toolbar

还记得我们每次打开的程序的标题栏吗？啊对，那不是toolbar做的.但是,那是actionbar做的,Toolbar可以说是Actionbar的升级版了。Toolbar不仅有Actionbar的所有功能,而且还更加灵活.

Actionbar是默认显示的
其实这是在项目中指定的主题来显示的

    
        
        ···
    

那么这个Theme.1_Material主题到底在哪里呢?在res/values/themes.xml文件中

指定了一个叫做AppTheme的主题，他的父主题是Theme.Theme.AppCompat.DayNight.DarkActionBar是一个深色主题的意思
现在我们需要指定不带Actionbar的主题
通常有两种主题Theme.AppCompat.NoActionBar 深色主题Theme.AppCompat.Light.NoActionBar 浅色主题

现在已经把ActionBar隐藏起来了，可以用ToolBar了

ToolBar常见功能

    
        
            
            ···
        
    

把按钮放在toolbar中，空间不足就放在菜单里面

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

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

屏幕中显示的内容滑动菜单中显示的内容

加入一个导航图标指示用户使用滑动菜单

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        ···
        supportActionBar?.let {//获得ActionBar的实例
            it.setDisplayHomeAsUpEnabled(true)//当ActionBar不为空的时候就让导航按钮显示出来
            it.setHomeAsUpIndicator(R.drawable.ic_menu)//设置一个导航按钮图标(默认是叫做home按钮,默认的图标是返回箭头，含义是返回上一个Activity)
        }
    }
    ··· 
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            
            android.R.id.home->binding.drawLayout.openDrawer(GravityCompat.START)
            ···
        }
        return true
    }
}

NavigationView

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

需要把库引入项目才行

dependencies {
    ···
    implementation 'com.google.android.material:material:1.0.0'
    Material库
    implementation 'de.hdoenhof:circleimageview:3.0.1'
    开源项目CircleImageView,可以轻松实现图片圆形化
}

悬浮按钮和可交互提示 FloatingActionButton

是Material中的控件，可以轻松实现悬浮按钮
悬浮按钮会默认使用colorAccent作为按钮的颜色，还可以用一个图标来表明这个按钮的作用

    
    
        ···
        
        
    
    ···

Snackbar

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

Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑操作

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        ···
        binding.fab.setOnClickListener { view ->
            Snackbar.make(view, "删除数据", Snackbar.LENGTH_SHORT)
                .setAction("Undo") {
                    Toast.makeText(this, "数据恢复", Toast.LENGTH_SHORT).show()
                }.show()
        }

    }
    ···

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

CoordinatorLayout

CoordinatorLayout可以是一种加强版的frameLayout(帧布局)CoordinatorLayout会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的响应

    
    
        ···
    

    ···

其实就是把原本的frameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就行了
效果就是当点击悬浮按钮Snackbar出现的时候，悬浮按钮会上移来适应Snackbar是自己不会被Snackbar遮住
但是Snackbar并不是CoordinatorLayout的子控件，而是DrawerLayout的子控件,为什么也能成功呢?
是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功

卡片式布局

虽然之前的操作已经有了很多的内容，但是屏幕中心追重要的部分还没有内容

MaterialCardView

MaterialCardView其实也是一个升级版的frameLayout,他只是额外提供了圆角和阴影等效果，看起来会更加立体
直接来，在代码里看作用吧

dependencies {
    ···
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    
    implementation 'com.github.bumptech.glide:glide:4.9.0'
   
}

    
    
        ···
        
        ···
    
    ···

class FruitAdapter(private val context: Context, private val fruitList:List):
RecyclerView.Adapter(){
    inner class ViewHolder(view:View):RecyclerView.ViewHolder(view){
        val fruitName:TextView=view.findViewById(R.id.fruitName)
        val fruitImage:ImageView=view.findViewById(R.id.fruitImage)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view=LayoutInflater.from(context).inflate(R.layout.fruit_item,parent,false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit=fruitList[position]
        holder.fruitName.text=fruit.name
        Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
    }

    override fun getItemCount(): Int {
        return fruitList.size
    }
}

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val fruits=mutableListOf(
        Fruit("Apple", R.drawable.apple),
        Fruit("Banana", R.drawable.banana),
        Fruit("Orange", R.drawable.orange),
        Fruit("Watermelon", R.drawable.watermelon),
        Fruit("Pear", R.drawable.pear),
        Fruit("Grape", R.drawable.grape),
        Fruit("Pineapple", R.drawable.pineapple),
        Fruit("Strawberry", R.drawable.strawberry),
        Fruit("Cherry", R.drawable.cherry),
        Fruit("Mango", R.drawable.mango))

    private val fruitList=ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        ···
        initFruits()
        
        val layoutManager= GridLayoutManager(this,2)
        binding.recyclerView.layoutManager=layoutManager
        val adapter=FruitAdapter(this,fruitList)
        binding.recyclerView.adapter=adapter
    }

    private fun initFruits(){
        fruitList.clear()
        repeat(50){
            val index=(0 until fruits.size).random()
            fruitList.add(fruits[index])
        }
    }
    ···
}

我们会发现Toolbar会被Recyclerview挡住，这就要借助AppBarlayout来解决了

AppBarLayout

CoordinatorLayout是加强版的frameLayout，在不进行明确定位的情况下所有控件会默认放在布局的左上角，从而产生了遮挡的情况
AppBarLayout实际上是个垂直方向上的Linearlayout,他的内部做了很多滚动事件的封装，并且应用了一些Matrial Design的设计理念
我们只需要把Toolbar放在AppBarLayout中就可以了

    
    

        

            
            

        


        
        
    ···
    
    ···

下来刷新

SwipeRefreshLaout就是用于下拉刷新功能的核心类在Androidx库中
把想要实现下拉刷新的控件放到SwipeRefreshLaout中，就可迅速让这个控件刷新

dependencies {
    ···
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
}

    
    
        ···
        
            
            

        
        ···
    

class MainActivity : AppCompatActivity() {
    ···
    override fun onCreate(savedInstanceState: Bundle?) {
        ···
        binding.swipeRefresh.setColorSchemeResources(R.color.purple_700)
        //设置刷新时进度条的颜色
        binding.swipeRefresh.setOnRefreshListener {
            //下拉刷新的监听器
            refreshFruits(adapter)
        }
    }

    private fun refreshFruits(adapter: FruitAdapter){
        //在子线程中开启对UI的操作
        thread {
            Thread.sleep(1000)//让子线程沉睡1秒，不然看不到刷新的效果
            runonUiThread { //要借助异步消息处理机制，让UI操作在主线程中进行
                initFruits()
                adapter.notifyDataSetChanged()//通过适配器来刷新数据变化
                binding.swipeRefresh.isRefreshing=false//表示刷新事件结束了，并且会隐藏刷新进度条,默认是true不结束不隐藏
            }
        }
    }
    ···
}

可折叠式标题栏

我们当前的标题的使用Toolbar，但是其实和Actionbar差别不大，只不过可以响应recyclerview的滚动事件而已,我们可以使用collapsingToolbarLayout让标题栏更华丽

collapsingToolbarLayout是不能单独存在的，他必须是AppBarLayout的子布局AppBarLayout也是不能单独存在的，它必须是CoordinatorLayout的子布局

class FruitActivity:AppCompatActivity() {
    companion object{
        const val FRUIT_NAME="fruit_name"
        const val FRUIT_IMAGE_ID="fruit_image_id"
    }
    private lateinit var binding: ActivityFruitBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding= ActivityFruitBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val fruitName=intent.getStringExtra(FRUIT_NAME)?:""
        val fruitImageId=intent.getIntExtra(FRUIT_IMAGE_ID,0)
        setSupportActionBar(binding.toolbar)//设置标题栏是toolbar
        supportActionBar?.setDisplayHomeAsUpEnabled(true)//显示导航按钮
        binding.collapsingToolbar.title=fruitName//标题栏的标题
        Glide.with(this).load(fruitImageId).into(binding.fruitImageView)
        //通过上下文加载图片到对应上下文(视图)的对应图片视图里面
        binding.fruitContentText.text=generateFruitContent(fruitName)//设置屏幕中心卡片中的文字内容

        binding.floatingBtn.setOnClickListener {
            Snackbar.make(it,"点击了悬浮按钮",Snackbar.LENGTH_SHORT)
                .setAction("我看到了") {
                    Toast.makeText(this, "看的好", Toast.LENGTH_SHORT).show()
                }.show()
        }
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {//标题栏(包括菜单中)中的按钮按下之后都会回调这个函数
        when(item.itemId){
            android.R.id.home->{
                finish()
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }

    private fun generateFruitContent(fruitName:String)=fruitName.repeat(500)
}

class FruitAdapter(private val context: Context, private val fruitList:List):
RecyclerView.Adapter(){
    inner class ViewHolder(view:View):RecyclerView.ViewHolder(view){
        val fruitName:TextView=view.findViewById(R.id.fruitName)
        val fruitImage:ImageView=view.findViewById(R.id.fruitImage)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view=LayoutInflater.from(context).inflate(R.layout.fruit_item,parent,false)
        val holder=ViewHolder(view)//此处的view是指activity_fruit.xml的整个布局,holder获取到整个布局的情况
        holder.itemView.setOnClickListener { //只要是哪个子控件被点击了，就会获取这个子控件的水果名字和水果图片id
            val position=holder.adapterPosition
            val fruit=fruitList[position]
            val intent=Intent(context,FruitActivity::class.java).apply { //再创建一个意图(打开FruitActivity)
                putExtra(FruitActivity.FRUIT_NAME,fruit.name)//并且把说过名字和水果图片id传过去
                putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.imageId)
            }
            context.startActivity(intent)
        }
        return holder
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit=fruitList[position]
        holder.fruitName.text=fruit.name
        Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
    }

    override fun getItemCount(): Int {
        return fruitList.size
    }
}

充分利用系统状态栏空间

android5.0时代之前，是无法对状态栏的背景或颜色进行设置的之后就可以了

android:fitsSystemWindows这个属性可以让背景与系统状态栏融合

只需要在CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout这种嵌套结构的布局中，将android:fitsSystemWindows指定为true，就表示这个控件会出现在系统状态栏中了

    

        
        
         ···
        
    
    ···

看得出来,如果要把最下级的控件的效果展示到系统控制栏的话，需要把所有包含他的父布局都加上android:fitsSystemWindows="true"属性，而且还要把原来的系统状态栏颜色设置成透明

    
    
    

            android:fitsSystemWindows="true"/>
         ···
        
    
    ···

看得出来,如果要把最下级的控件的效果展示到系统控制栏的话，需要把所有包含他的父布局都加上android:fitsSystemWindows="true"属性，而且还要把原来的系统状态栏颜色设置成透明