首页 > 程序开发 > 移动开发 > Android > 正文
Android一起学Ui(1)----(折叠布局)
2017-03-20       个评论    来源:记录笔记  
收藏    我要投稿

Android一起学Ui(1)----(折叠布局)。不知道大家有没有健忘的习惯啊,总是写完之后再过一段时间就忘记了自己写的代码了,每次需要写的时候还要重新再看一次,或者在去查询一下相关的属性以及方法.

近期感觉这种情况比较明显,总是忘记很多方法和属性,久而久之每次写代码都会觉得特别累,也会开始怀疑自己是不是脑子不好使了,有点挫败感有木有….

所以打算记录一系列关于Android Ui 布局方面的笔记,一方面方便自己查询使用,另一方面方便学习记录.

今天第一篇就写一个关于折叠布局的文章吧,内容不涉及太多的原理介绍,只是简单罗列使用方式方法,从代码和效果中体会控件的使用以及场景,秉承能简单可使用的原则.

先上效果图:
这里写图片描述

整体布局为:
 

<imageview>
             
 
        </android.support.v7.widget.toolbar></imageview></android.support.design.widget.collapsingtoolbarlayout>
 
    </android.support.design.widget.appbarlayout>
 
     
 
     
 
</android.support.design.widget.floatingactionbutton></android.support.v4.widget.nestedscrollview></android.support.design.widget.coordinatorlayout>

代码如下:
 

//Coordinator(协调者)继承自Framelayout 1,作为顶层布局 2, 调度协调子布局
// 根据behavior 行为属性,比如NestedScrollView 指定为依赖AppBar,那么就会处理关于AppBar根据
// NestedScrollView的行为,而使AppBar进行相应的动作(这里可以不深究,文后给出相应的文章将的会更透彻)
 
 
 
//AppBarLayout 继承自LinearLayout 加入了材料设计概念 
//根据其他滚动的View的变化,对其内部的view做一些动态的处理
//比如SrollView向上滑动,我们让ToolBar也跟着滑动.
//通过指定app:layout_scrollFlags 属性,来使内部的子view做出相应的动作
 
     
 
//对ToolBar进行再次包装,主要实现折叠的效果
// app:contentScrim 当收缩到最小高度时 显示的颜色 一般为toolBar 的颜色
//app:layout_collapseMode 子View的视图折叠模式
// parallax : 视差效果
// pin : 达到最小高度时 固定不动
         
 
//layout_scrollFlags: 属性中 
// scroll : 跟随滚动,比如跟随Scrollview 的滚动做出相同的滚动
// enterAlways : 直接滚动出全部,不论Scrollview滚动多少距离
// exitUntilCollapsed : Scrollview 向上滚动时,先滚动自己到最小高度,停留后,Scrollview继续向上
// enterAlwaysCollapsed: 跟随滚动到最小高度,当Scrollview向下滚动到顶部时,再继续跟随滚动到自身的最大值
//这个属性主要是设置给AppBar的.
 
            <imageview android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:fitssystemwindows="true" android:scaletype="centerCrop" android:src="@drawable/splash0" app:layout_collapsemode="parallax">
//ToolBar 用来替换AnctionBar,所以我们先要隐藏掉ActionBar
 
             
 
 
        </android.support.v7.widget.toolbar></imageview></android.support.design.widget.collapsingtoolbarlayout>
    </android.support.design.widget.appbarlayout>
 
//NestedScrollView 继承Framelayout 实现效果与Scrollview一样,内部处理了对于AppBar的依赖
// 需要指定 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,才会对AppBar产生影响.必须指定.
     
 
        <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
 
            <include layout="@layout/commot_cardview">
 
            <include layout="@layout/commot_cardview">
 
            <include layout="@layout/commot_cardview">
 
            <include layout="@layout/commot_cardview">
 
            <include layout="@layout/commot_cardview">
 
            <include layout="@layout/commot_cardview">
        </include></include></include></include></include></include></linearlayout>
    </android.support.v4.widget.nestedscrollview>
 
// 浮动的Button 
// 这里设置了一个锚点 layout_anchor,来指定Buttton所在控件的范围
// layout_anchorGravity : 指定Button 具体的位置
     
 
</android.support.design.widget.floatingactionbutton></android.support.design.widget.coordinatorlayout>

那么通过以上的布局就可以直接实现折叠的效果了,其实很多原理的知识,会很杂乱无章,也会经常性的忘记,那么可以通过一些列子加深这样的印象,当一个控件你明白了其中的属性,以及使用场景和方法时,再去探究其内部的原理或源码的时候,我觉得会事半功倍.

对于以上内容的一点补充:

使用材料设计中的控件的时候 我们需要在build.gradle 下引入,相关的库

 compile 'com.android.support:appcompat-v7:25.3.0'
 compile 'com.android.support:design:25.3.0'

fitsSystemWindows 属性为true时,ContentView会忽略actionbar,title,底部按键的空间后剩余的可用区域.所以图片会向上移动 占据状态栏.

如果状态栏要使用图片延伸作为背景 需要在values-v21 styles 主题中指定
@android:color/transparent

源码地址:AndroidUiDemo

点击复制链接 与好友分享!回本站首页
上一篇:【Android 性能优化】—— 详解内存优化的来龙去脉
下一篇:Android开发技巧之xml tools属性详解
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站