安卓日记——玩转Material Design(伸缩顶部篇)
来源:互联网 发布:linux db2create 编辑:程序博客网 时间:2024/06/07 20:42
Material Design里面有一个很好玩的一个就是顶部伸缩,这样会给用户很好的交互效果
接下来我给大家解析一下大概是怎么个弄法
这次用的东西比较多,基本是都是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的用法,敬请关注
最终效果
0 0
- 安卓日记——玩转Material Design(伸缩顶部篇)
- 安卓日记——玩转Material Design(NavigationView篇)
- 安卓日记——玩转Material Design(RecyclerView+CardView篇)
- 安卓 Material Design
- 玩转Android Material Design包
- Material Design之利用CollapsingToolbarLayout轻松实现知乎日报新闻详情页顶部效果(带banner的toolbar伸缩折叠效果)
- 安卓material design 主题调色介绍
- ANDROID L——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- Android 5.0——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- Android 5.0——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- Android 5.0——Material Design详解(动画篇)
- Android 5.0——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- ANDROID L——Material Design详解(动画篇)
- Cocos2d-Lua之异常处理
- 关于博主
- ViewFlipper(翻转视图)的基本使用
- Struts2文件上传
- 对象存储
- 安卓日记——玩转Material Design(伸缩顶部篇)
- 3.4.数组和指针的关联
- 正则表达式matcher.group用法
- 更换mysql数据目录后出现ERROR 2002 (HY000): Can't connect to local MySQL serve
- 334. Increasing Triplet Subsequence
- 安卓的发展历程
- 黄油刀的添加步骤(Eeclipse)
- 定位new运算符
- C++补交作业三