Android开发学习之Material Design

Posted 哈喽喔德

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android开发学习之Material Design相关的知识,希望对你有一定的参考价值。

(参考书:第一行代码第2版)

一、Toolbar

androidManifest文件中有一个theme属性,指定了AppTheme主题。该主题在res/values/styles.xml文件中定义。如果要使用Toolbar代替ActionBar。需要将parent参数指定为NoActionBar的类型。
使用Toolbar时,有以下需要指定的参数

adnroid:layout_width="match_parent" 宽度一般铺满
adnroid:layout_height="?attr/actionBarSize" 长度和actionBar等长
adnroid:background="?attr/colorPrimary" 设置背景颜色,可以保持和原有ActionBar一致
adnroid:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 设置Toolbar的主题
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 设置弹出菜单项的主题

要完成将菜单项集成到Toolbar里的工作,需要新建一个menu文件,往其中添加item。其中有一个item的属性为app:showAsAction,主要有三种指定值:

always:永远显示在Toolbar中
ifRoom:如果屏幕空间足够显示在Toolbar中,不够显示在菜单中
never:永远显示在菜单中

最后在活动中重写onCreateOptionsMenu方法,调用getMenuInflater().inflate(布局文件,menu)方法指定布局即可

二、滑动菜单及悬浮按钮

(1)DrawerLayout
使用这个控件需要将控件设置在布局文件的最外层,在里面嵌套两个布局,一个是主屏幕布局,一个是滑动菜单布局。
滑动菜单布局需要指定是在屏幕左边还是右边,使用属性android:layout_gravity指定,可指定的值有left right start(根据系统语言判断)
通常还会在Toolbar里添加一个导航按钮来展示滑动菜单的内容。具体做法为:

  1. 在活动中获取DrawerLayout的实例
  2. 再获取ActionBar的实例,通常是被Toolbar代替
  3. 调用ActionBar的setDisplayHomeAsUpEnabled(true)方法,让导航按钮显示出来,即HomeAsUp按钮
  4. 然后调用setHomeAsUpIndicator(R.drawable.picture)设置图标
  5. 接下来在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理,该按钮的id始终为adnroid.R.id.home
  6. 然后调用DrawerLayout实例的openDrawer()方法显示出来,这里往该方法传入一个Gravity参数,值与XML中定义的一致

(2)NavigationView
NavigationView是定制滑动菜单布局的控件,在使用之前,需要准备两个东西:menu和headerLayout,前者用来实现具体菜单项、后者是用来显示头部布局的。menu文件中嵌套一个group标签,将其checkableBehavior属性指定为single。代表一个组中的所有菜单只能单选。这里可以还添加CircleImageView的依赖用于圆形头像裁切。

  1. menu和headerLayout准备好后,在DrawerLayout里添加NavigationView控件,指明app:menu和app:headerLayout两个属性
  2. 在活动中获取NavigationView的实例,调用其setCheckedItem()方法将某一菜单项设为默认选中。
  3. 调用setNavigationItemSelectedListener()方法设置一个菜单项选中事件监听器,当用户点击了任意菜单项,都会回调其中的onNavigationItemSelected()方法,根据菜单项id实现对应的逻辑
  4. 可以调用DrawerLayout实例的closeDrawers()方法关闭滑动菜单

(3)FloatingActionButton
FloatingActionButton是悬浮按钮控件,会默认使用colorAccent作为按钮的颜色。通过layout_gravity指定位置,一般设置为button|end。通过app:elevation属性指定投影效果的高度值。
处理FloatingActionButton的点击事件首先是获取FloatingActionButton的实例,然后调用setOnClickListener()方法设置点击事件。

(4)Snackbar
Snackbar是可交互提示,并不是Toast,两者有不同的使用场景。不过两者用法类似,只不过Snackbar可以额外增加一个按钮的点击事件。

  1. 调用Snackbar的make()方法创建一个Snackbar对象,第一个参数传入一个View,只要是当前界面布局的任意一个view都行,Snackbar会自动使用这个view查找最外层布局;第二个参数就是Snackbar的内容,第三个是显示的时长
  2. 可以紧跟着make()方法调用setAction()方法,来设置一个动作
  3. 最后调用show()方法让Snackbar显示出来

(5)CoordinatorLayout
CoordinatorLayout是加强版的FrameLayout,普通情况下和FrameLyout作用基本一致。CoordinatorLayout可以监听其所有子控件的各种事件,然后自动做出最为合理的响应。

三、卡片式布局

(1)CardView
CardView实际也是一个FrameLayout,额外提供了圆角和影音等效果,视觉效果更立体。通过app:cardCornerRadius属性指定卡片圆角的弧度,数值越大,弧度越大。通过app:elevation书香指定卡片的高度。这里可以添加Glide的依赖用于加载各种图片和视频。
Gilde的用法是调用with()方法,传入一个context、activity或fragmrnt参数,然后调用load()方法加载图片,参数可以是一个URL,一个本地路径、一个资源id。

(2)AppBarLayout
AppBarLayout是一个垂直方向上的LinearLayout,它在内部做了很多滚动事件的封装,并且应用了Material Design的设计理念。该布局可以解决CoordinatorLayout的控件重叠覆盖问题。例如RecyclerView遮挡Toolbar的问题。
RecyclerView滚动时,都将滚动事件通知给了AppBarLayout。通过属性app:layout_scrollFlags指定子控件随着滚动的隐藏关系。

scroll 表示向上滑动时,子控件向上隐藏
enterAlways 表示向下滑动时,子控件向下重新显示
snap 表示子控件未完全隐藏和显示时,根据距离自动选择隐藏或显示

四、下拉刷新

SwipeRefreshLayout是用于实现下拉刷新功能的核心类,将需要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以实现下拉刷新。需要添加依赖:
implementation ‘androidx.swiperefreshlayout:swiperefreshlayout:1.1.0’
将需要刷新的控件放在SwipeRefreshLayout中后,需要去活动中处理代码具体的刷新逻辑。

  1. 在活动中获取SwipeRefreshLayout的实例
  2. 调用setColorSchemeResources()方法来设置下来刷新进度条的颜色
  3. 调用setOnRefreshListener()方法来设置一个下拉刷新的监听器,当触发了刷新操作,就会回调这个监视器的onRefresh()方法
  4. 更新UI时,在runOnUiThreah()方法中重新设置数据后调用适配器的notifyDataSetChanged()方法通知数据改变
  5. 最后调用SwipeRefreshLayout对象的setRefreshing()方法并传入false表示刷新事件结束,并隐藏刷新进度条

五、可折叠标题栏

(1)CollapsingToolbarLayout
CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,可以让Toolbar更丰富,但是只能作为AppBarLayout的直接子布局来使用,而AppBarLayout又必须是CoordinatorLayout的子布局。有以下的属性:

app:contentScrim 指定CollapsingToolbarLayout在趋于折叠以及折叠之后的背景色
app:layout_scrollFlags 指定为srcoll表示CollapsingToolbarLayout会随着内容详情滚动,指定为exitUntilCollapsed表示随着滚动折叠之后就保留在屏幕上,不再移出屏幕。
app:layout_collapseMode 是CollapsingToolbarLayout布局中控件的属性,用于指定该控件在布局折叠过程中的折叠模式,pin表示折叠过程中位置不变;parallax表示折叠过程中产生一定的错位偏移,视角效果较好

(2)NestedSrcollView
在SrcollView的使用滚动方式查看屏幕以外的数据的基础上还增加了嵌套响应滚动事件的功能。CoordinatorLayout本身可以响应滚动事件,因此需要在内部使用NestedSrcollView或者RecyclerView的布局。
不管是SrcollView还是NestedSrcollView都只允许存在一个直接子布局,因此通常嵌套一个LinearLayout。

Android颜色系统

Android的颜色系统,有以下参数:

colorPrimary:主要品牌颜色,一般用于ActionBar背景
colorPrimaryDark:默认用于顶部状态栏和底部导航栏
colorPrimaryVariant:主要品牌颜色的可选颜色
colorSecondary:第二品牌颜色
colorSecondaryVariant:第二品牌颜色的可选颜色
colorPrimarySurface:对应Light主题指向colorPrimary,Dark主题指向colorSurface
colorOn[Primary, Secondary, Surface],在Primary等这些背景的上面内容的颜色,例如ActioBar上面的文字颜色
colorAccent:默认设置给colorControlActivated,一般是主要品牌颜色的明亮版本补充
colorControlNormal:图标和控制项的正常状态颜色
colorControlActivated:图标和控制项的选中颜色(例如Checked或者Switcher)
colorControlHighlight:点击高亮效果(ripple或者selector)
colorButtonNormal:按钮默认状态颜色
colorSurface:cards, sheets, menus等控件的背景颜色
colorBackground:页面的背景颜色
colorError:展示错误的颜色
textColorPrimary:主要文字颜色
textColorSecondary:可选文字颜色

以上是关于Android开发学习之Material Design的主要内容,如果未能解决你的问题,请参考以下文章

Android Material Design学习之RecyclerView代替 ListView

Flutter学习之button按钮

Material Design学习之 ProgreesBar

Material Design学习之 Switch(详细解释)

Material Design学习之 ProgreesBar

Material Design学习之 EditText (功能强大,优于系统自带,感谢“扔物线”)