day11：Material Design 实战

Posted 2021-08-31 wresource

Material Design 实战

• • 一、Material Design初识
  • 二、滑动菜单
  • • 1.DrawerLayout
    • 2.NavigationView
  • 三、Snackbar和Floating Action Button
  • • 1.Floating Action Button
    • 2.Snackbar
  • 四、卡片式布局
  • • 1.MaterialCardView的基本用法
    • 2.Glide基本用法
  • 五、下拉刷新
  • 六、可折叠标题栏
  • 七、Kotlin：简化Toast和Snackbar
  • 八、Git高阶用法

一、Material Design初识

主要是google提出的一种设计应用的规范，并且为了方便开发者，Google将一系列设计好的组件进行了一些比较好的封装

使得我们普通的开发者也能设计出较为美观的界面，只要引入Material库就可以使用那些组件了

二、滑动菜单

1.DrawerLayout

在此布局里面放两个控件，也可以进行嵌套布局，实现更加漂亮的界面

第一个子控件主要显示主屏幕的内容

第二个子控件主要显示滑动菜单的内容

这里面有个layout_gravity比较有趣，根据各种地域的语言习惯，设置start属性

从左到右的阅读习惯的语言滑动菜单在左边，反之则相反（人性化操作）

2.NavigationView

CircleImageView可以轻松实现图形圆形化

实现NavigationView之前需要准备两个xml文件

一个是menu和另一个headerLayout

menu用于显示NavigationView中显示具体的菜单项

headerLayout用于显示头部布局

三、Snackbar和Floating Action Button

1.Floating Action Button

此控件提供了一种立体的设计感，此外与其他Button控件没有什么区别，不过这里google加了一些更加逼真的特效

比如可以设置高度使得控件有一些阴影

2.Snackbar

与Toast有点像，可以完全代替Toast，不过也有一些自己的特有的东西

在提示的时候允许加入一个可交互的按钮，比如在用户误操作时提供一个撤销操作的按钮

这里提供了一个在比如按钮被提示遮挡时的一个自动偏移的操作的布局CoordinatorLayout

可以对子控件的各种响应，做出一些比较合理的调整

四、卡片式布局

1.MaterialCardView的基本用法

本质也是一个FrameLayout，提供了圆角和阴影，使得UI界面更具立体感

这里面有个scaleType属性需要注意一下，可以指定图片的缩放模式，使用centerCrop属性使得图片

保持原有的比例充满ImageView，超过屏幕的部分裁掉

2.Glide基本用法

举个栗子就可以了

Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
//第一个参数时上下文，第二个参数可以是图片的本地的路径，也可以是一个资源Id，也可以是图片的URL地址
//into方法就是加载的图片在哪个ImageView上

这里有一个比较好用的AppBarLayout，配合CoordinatorLayout可以实现一些比较复杂的操作，例如

app:layout_behavior
app:layout_scrollFlags

这里就不详细说明了，用到的时候可以具体进行学习

五、下拉刷新

SwipeRefreshLayout 为实现下拉刷新的核心类，只要把想要实现下拉刷新的控件放在里面即可实现下来刷新，一般是

将一些UI更新的操作放进去，可以用runOnUiThread进行操作

六、可折叠标题栏

这部分可以自由定制，原本的标题栏比较枯燥，可以利用material库设计一个更好的

需要提前做好布局的架构，不然这部分可以让你力不从心

以下是需要注意的几点

1.设计时使用到了CollapsingToolbarLayout，AppbarLayout，CoordinatorLayout
不过由于这些布局之间有一定的联系，故都不能单独使用
CollapsingToolbarLayout只能当AppbarLayout的子布局使用
AppBarlayout又必须是CoordinatorLayout的子布局
2.将背景图和系统状态栏融合的时候需要注意
使用android:fitsSystemWindows属性即可
不过需要将imageView的所有父布局设置此属性才可以
而且需要设置主题为透明，这样背景图才有效

七、Kotlin：简化Toast和Snackbar

这里对以前所学的kotlin的高级用法做了一个实战，解决了一些开发过程的一些痛点

举个栗子即可

Toast

fun String.showToast(context: Context,duration: Int = Toast.LENGTH_SHORT){
    Toast.makeText(context,this,duration).show()
}
fun Int.showToast(context: Context,duration: Int = Toast.LENGTH_SHORT){
    Toast.makeText(context,this,duration).show()
}
//这里面简化了Toast的操作，使用字符串和资源id的Toast，用到了默认值这一用法
//也运用了kotlin里面的扩展函数的用法使得我们更加方便地进行编写
"hhhh".showToast(context)
R.id.hhh.showToast(context)

Snackbar

fun View.showSnackbar(text:String,actionText:String ?= null,duration: Int = Snackbar.LENGTH_SHORT,
                      block:(()->Unit)?= null){
    val snackbar = Snackbar.make(this,text,duration)
    if (actionText != null && block != null){
        snackbar.setAction(actionText){
            block()
        }
    }
    snackbar.show()
}
fun View.showSnackbar(resId:Int,actionResId:Int ?= null,duration: Int = Snackbar.LENGTH_SHORT,
                      block:(()->Unit)?= null){
    val snackbar = Snackbar.make(this,resId,duration)
    if (actionResId != null && block != null){
        snackbar.setAction(actionResId){
            block()
        }
    }
    snackbar.show()
}
//这里运用了kotlin地高阶函数地用法，使得我们可以设置action里面地具体操作
//也运用了扩展函数

八、Git高阶用法

主要涉及分支地用法，解决版本控制相关问题

//add完一定要记得提交，不然就会出现一些不可知地问题
//分支这个概念主要是解决已上线地版本出现一些小问题，需要修复，但另外一个版本也在开发，所以先创建一个
//分支把现版本完善，等新版本完成之后进行合并，这样新版本也不会存在问题

git branch
//查看分支
git branch version1.0
//创建一个名为version1.0的分支
git checkout version1.0
//切换到此分支
git merge version1.0
//将version1.0上的分支合并到现在的分支上
//可能产生代码冲突，不过只要即使的发现解决起来应该没问题
git branch -D version1.0
//删除分支

//远程版本库协作

git clone URL
//下载远程的代码到本地
git push URL 分支
//将本地修改的代码同步到远程分支上
git fetch URL 分支
//将远程代码同步到本地，不过不会执行合并操作
//而是另外储存在一个名为 URL/分支 的分支上
git diff URL/分支
//可以查看修改的内容
git merge URL/分支
//然后进行合并

//不过也可以直接使用pull命令
//此命令将fetch和merge命令进行了合并
git pull URL 分支