Fork me on GitHub

学习Kotlin第一篇

记录学习路上的点滴

实现效果

此效果实现并不复杂,此项目是在实现功能的基础上,主要学习Kotlin的语法,用法。

实现思路

此效果如果用老旧的Android Api实现将会非常复杂,不仅需要大量的动画,还需要计算高度渲染等复杂问题。但是如果用Material Design来实现将会非常简单。主要用到以下几个Material Design原生组件

  • CoordinatorLayout
  • AppBarLayout
  • CollapsingToolbarLayout
  • FloatingActionButton
  • NestedScrollView
  • CardView

CoordinatorLayout

又名协调者布局,它是support.design包中的控件,所以使用的时候要导入compile ‘com.android.support:design:23.3.0’包。简单来说,CoordinatorLayout是用来协调其子view并以触摸影响布局的形式产生动画效果的一个super-powered FrameLayout,其典型的子View包括:FloatingActionButton,AppBarLayout。CoordinatorLayout是一个顶级父View

简单来说,如果需要在布局中协调多个 View 进行互动,例如:移动、动画等等。在以前,是需要同时对这些 View 进行操作并响应各自的状态的,而有了 CoordinatorLayout ,这些它都帮我们实现好了交互的接口,我们只需要去关心具体的细节。
在 Material Design 中,很多地方都用到了 CoordinatorLayout,举几个例子:

  • SnackBar 出现的时候,浮动操作按钮(FAB)上移。
  • 配合 ToolBar ,实现一个可伸缩头部 Title。
  • 配合 AppBarLayout,实现一个具体的是视差动画的效果。

虽然这里讲的是 CoordinatorLayout ,但是其实对于开发者而言,我们是不会和 CoordinatorLayout 直接打交道的,而 CoordinatorLayout 透出来的接口 Behavior 才是我们需要关心和实现的。
CoordinatorLayout 和 Behavior 之间进行交互,将其内需要被协调的 View ,之间的变动,通过 Behavior 传递出来,开发者只需要针对 Behavior 中定义好的接口方法,进行对应的实现即可。

如下一个CoordinatorLayout布局就写好了,很简单,想象成LinearLayout就ok了,因为他也是个父布局。

补充

android:fitsSystemWindows=”true” 属性可以让view根据系统窗口来调整自己的布局;简单点说就是我们在设置应用布局时是否考虑系统窗口布局,这里系统窗口包括系统状态栏、导航栏、输入法等。效果如下


AppBarLayout

AppbarLayout继承自LinearLayout,它就是一个垂直方向的LinearLayout,在LinearLayout的基础上添加了一些材料设计的概念和特性,即滑动手势。它可以让你定制在某个可滑动的View(如:ScrollView ,ListView ,RecyclerView 等)滑动手势发生改变时,内部的子View 该做什么动作。子View应该提供滑动时他们期望的响应的动作Behavior,通过setScrollFlags(int),或者xml 中使用属性

1
app:layout_scrollFlags

注意:AppbarLayout 严重依赖于CoordinatorLayout,必须用于CoordinatorLayout 的直接子View,如果你将AppbarLayout 放在其他的ViewGroup 里面,那么它的这些功能是无效的。

AppBarLayou的scrollFlagsscroll效果一共有五种(篇幅有限,以后自己亲自试验吧,不贴图了)

  • scroll
  • enterAlways
  • enterAlwaysCollapsed
  • exitUntilCollapsed
  • snap

CollapsingToolbarLayout

_CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags就可以实现折叠效果_

CollapsingToolbarLayout的子布局有3种折叠模式(Toolbar中设置的app:layout_collapseMode)

  • off:这个是默认属性,布局将正常显示,没有折叠的行为。
  • pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。
  • parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~1。

然后在CollapsingToolbarLayout中加入自己的布局,一般会放置一个ToolBar。如下Bilibili的效果图(来个最喜欢的主播真会玩:D)

继续编写ToolBar和上面的一个ImageView,如下

FloatingActionButton

FloatingActionButton简称FAB。
FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App最主要的功能是通过该FAB操作的。
为了突出FAB的重要性,一个页面最好只有一个FAB。个人觉得这就是一个海拔高度最高的全局按钮Button


NestedScrollView

NestedScrollView 即 支持嵌套滑动的 ScrollView。
因此,我们可以简单的把 NestedScrollView 类比为 ScrollView,其作用就是作为控件父布局,从而具备(嵌套)滑动功能。
NestedScrollView 与 ScrollView 的区别就在于 NestedScrollView 支持 嵌套滑动,无论是作为父控件还是子控件,嵌套滑动都支持,且默认开启。
因此,在一些需要支持嵌套滑动的情景中,比如一个 ScrollView 内部包裹一个 RecyclerView,那么就会产生滑动冲突,这个问题就需要你自己去解决。而如果使用 NestedScrollView 包裹 RecyclerView,嵌套滑动天然支持,你无需做什么就可以实现前面想要实现的功能了。

1
NestedScrollView内部必须有一个父级布局的layout,如LinearLayout,RelativeLayout

Ok,到了现在,基本完成了,想要实现的效果,全都是xml实现的,真是神奇啊。效果图如下

CardView

CardView是google在5.0中提供带圆角和阴影的布局,继承自FrameLayout

CardView的一些属性设置

  • android:cardBackgroundColor 设置背景
  • android:cardCornerRadius 设置圆角
  • app:cardElevation 设置阴影大小
  • app:cardMaxElevation 设置阴影的最大高度
  • app:contentPadding 内容距离边界的距离
  • app:contentPaddingXXX 设置局部的内边距,替换Padding的,在CardView中设置Padding是不起作用的。
  • app:cardUseCompatPadding 如果您需要将CardView与其他视图对齐,可能在21以下,可以将此标志设置为true,CardView将在21之后的平台上添加相同的填充值。
  • app:cardPreventCornerOverlap 是否裁剪边界以防止重叠

实现方式如下

以上就可以,实现上面要实现的效果了,但是为了初步学习Kotlin,只是写写简单的xml就没意思了,先动手写个列表吧,那就先把底下的CardView都拿掉,开始写个最简单的列表

MainActivity

activity_main

MainAdapter

item_text

1
2
3
4
5
kotlin小总结
1.对象不用new了,直接等号后面写类名,然后传参数
2.由于import kotlinx.android.synthetic.main.activity_about.* 这句话的存在,不用写findviewbyid了,直接用控件在xml中的id,就可以操作了
3.构造集合的方式 val mList: ArrayList<String> = arrayListOf()
4.变量用var,常量用val,先这么理解
0%