安卓日记——玩转Material Design(伸缩顶部篇)
2016-06-17 21:16
549 查看
Material Design里面有一个很好玩的一个就是顶部伸缩,这样会给用户很好的交互效果
接下来我给大家解析一下大概是怎么个弄法
这次用的东西比较多,基本是都是Material Design的控件
主要有:
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
RecyclerView
CollapsingToolbarLayout只有与RecyclerView配合才能进行伸缩
在CollapsingToolbarLayout中:
我们设置了layout_scrollFlags:关于它的值我这里再说一下:
scroll - 想滚动就必须设置这个。
enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
其中还设置了一些属性,简要说明一下:
contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。
至于RecyclerView的Adapter的详细用法会在下次博客中展示,而且还会顺带讲一下CardView的用法,敬请关注
接下来我给大家解析一下大概是怎么个弄法
这次用的东西比较多,基本是都是Material Design的控件
主要有:
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
RecyclerView
1.导入material design的包
compile 'com.android.support:design:23.4.0'
2.设置主布局
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <!--记得要设layout_scrollFlags--> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="250dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:id="@+id/collapse_toolbar"> <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center" android:src="@drawable/avastar"/> <!--这里的高度很关键,决定了收缩后顶部的高度--> <!--如果想收缩后还有其他控件就设大一点,否则wrap_content就好了--> <!--layout_collapseMode设为pin的话tollbar最后会留在顶部--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="100dp" android:gravity="top" android:minHeight="?attr/actionBarSize" app:layout_collapseMode="pin" app:titleMarginTop="15dp"> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!--一定要把layout_behavior设为@string/appbar_scrolling_view_behavior--> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> </android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout只有与RecyclerView配合才能进行伸缩
在CollapsingToolbarLayout中:
我们设置了layout_scrollFlags:关于它的值我这里再说一下:
scroll - 想滚动就必须设置这个。
enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
其中还设置了一些属性,简要说明一下:
contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。
3.写界面的逻辑代码
public class CollapsTopActivity extends AppCompatActivity { private Toolbar toolbar; private TabLayout tabLayout; private CollapsingToolbarLayout collapsingToolbarLayout; private RecyclerView recyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_top_collaps); initView(); } private void initView() { toolbar= (Toolbar) findViewById(R.id.toolbar); collapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar); recyclerView= (RecyclerView) findViewById(R.id.recyclerView); setSupportActionBar(toolbar); //显示左上角的返回按钮 getSupportActionBar().setDisplayHomeAsUpEnabled(true); //不使用左下角的大标题 //通常有Tablayout的话就不用大标题了 collapsingToolbarLayout.setTitleEnabled(false); // 设置一些recyclerView的内容 List<String> strings=new ArrayList<>(); for(int i=0;i<20;i++){ strings.add(i+""); } // RecyclerView必须要做的几步 LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(linearLayoutManager); recyclerView.setHasFixedSize(true); ListAdapter mAdapter=new ListAdapter(strings); recyclerView.setAdapter(mAdapter); } }
至于RecyclerView的Adapter的详细用法会在下次博客中展示,而且还会顺带讲一下CardView的用法,敬请关注
最终效果
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories