Android 仿简书搜索栏实现方法
程序员文章站
2022-05-14 09:49:38
需求分析
当整个页面的轮播图部分上划消失的过程中,透明度会出现渐变的效果,同时当全部消失或者全部显示的时候搜索框宽度动态变化。
效果如下
实现这个效果, 只要关注几个点
1.搜索栏伸展和收缩动画效...
需求分析
当整个页面的轮播图部分上划消失的过程中,透明度会出现渐变的效果,同时当全部消失或者全部显示的时候搜索框宽度动态变化。
效果如下
实现这个效果, 只要关注几个点
1.搜索栏伸展和收缩动画效果实现
2.搜索栏伸展和收缩的时机
3.顶部透明度的渐变
搜索栏伸展和收缩动画效果实现:
我们只要明确,使用为我们提供的transition框架,就可以轻而易举的实现了。
首先要引入依赖compile ‘com.android.support:design:25.3.1’,要知道我们使用到的这部分transition效果只是封装了属性动画的内容,是可以兼容到5.0之前的。
private void expand() { //设置伸展状态时的布局 tvsearch.settext("搜索简书的内容和朋友"); relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) msearchlayout.getlayoutparams(); layoutparams.width = layoutparams.match_parent; layoutparams.setmargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10)); msearchlayout.setlayoutparams(layoutparams); //设置动画 begindelayedtransition(msearchlayout); } private void reduce() { //设置收缩状态时的布局 tvsearch.settext("搜索"); relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) msearchlayout.getlayoutparams(); layoutparams.width = dip2px(80); layoutparams.setmargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10)); msearchlayout.setlayoutparams(layoutparams); //设置动画 begindelayedtransition(msearchlayout); } void begindelayedtransition(viewgroup view) { mset = new autotransition(); //设置动画持续时间 mset.setduration(300); // 开始表演 transitionmanager.begindelayedtransition(view, mset); }
其中msearchlayout就是搜索框的布局,只需要动态设置一下伸展和收缩的布局大小和其中显示的文字,剩下的就交给transition吧~ 这样搜索框就可以来回摇摆了。
搜索栏伸展和收缩的时机:
观察一下效果,伸展的时机是当顶部完全盖住banner的时候开始的,收缩的时机是滚动到顶部的时候触发。需要我们监听scllerview的滚动状态。这里的顶部我是用了自定义布局的toolbar,然后用一个imageview代替了banner。
//scrollview滚动状态监听 mscrollview.getviewtreeobserver().addonscrollchangedlistener(new viewtreeobserver.onscrollchangedlistener() { @override public void onscrollchanged() { //改变toolbar的透明度 changetoolbaralpha(); //滚动距离>=大图高度-toolbar高度 即toolbar完全盖住大图的时候 且不是伸展状态 进行伸展操作 if (mscrollview.getscrolly() >=ivimg.getheight() - toolbar.getheight() && !isexpand) { expand(); isexpand = true; } //滚动距离<=0时 即滚动到顶部时 且当前伸展状态 进行收缩操作 else if (mscrollview.getscrolly()<=0&& isexpand) { reduce(); isexpand = false; } } }); }
顶部透明度的渐变
private void changetoolbaralpha() { int scrolly = mscrollview.getscrolly(); //快速下拉会引起瞬间scrolly<0 if(scrolly<0){ toolbar.getbackground().mutate().setalpha(0); return; } //计算当前透明度比率 float radio= math.min(1,scrolly/(ivimg.getheight()-toolbar.getheight()*1f)); //设置透明度 toolbar.getbackground().mutate().setalpha( (int)(radio * 0xff)); }
注意刚才监听滚动事件的时候调用changetoolbaralpha()方法,并且需要初始设置为全透明
toolbar.getbackground().mutate().setalpha(0);
edittext样式文件
布局文件
<framelayout android:layout_height="wrap_content" android:layout_width="match_parent"> <framelayout android:layout_height="1500dp" android:layout_width="match_parent"> </framelayout> </framelayout>
activity文件
public class mainactivity extends appcompatactivity { @bindview(r.id.tv_search) edittext tvsearch; @bindview(r.id.ll_search) linearlayout msearchlayout; @bindview(r.id.scrollview) scrollview mscrollview; boolean isexpand = false; @bindview(r.id.iv_img) imageview ivimg; @bindview(r.id.toolbar) toolbar toolbar; private transitionset mset; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); butterknife.bind(this); //设置全屏透明状态栏 if (build.version.sdk_int >= build.version_codes.kitkat) { getwindow().addflags(windowmanager.layoutparams.flag_translucent_status); viewgroup rootview = (viewgroup) ((viewgroup) findviewbyid(android.r.id.content)).getchildat(0); viewcompat.setfitssystemwindows(rootview, false); rootview.setcliptopadding(true); } if (build.version.sdk_int >= build.version_codes.lollipop) { getwindow().clearflags(windowmanager.layoutparams.flag_translucent_status | windowmanager.layoutparams.flag_translucent_navigation); getwindow().getdecorview().setsystemuivisibility(view.system_ui_flag_layout_fullscreen | view.system_ui_flag_layout_stable); getwindow().addflags(windowmanager.layoutparams.flag_draws_system_bar_backgrounds); getwindow().setstatusbarcolor(color.transparent); } //设置toolbar初始透明度为0 toolbar.getbackground().mutate().setalpha(0); //scrollview滚动状态监听 mscrollview.getviewtreeobserver().addonscrollchangedlistener(new viewtreeobserver.onscrollchangedlistener() { @requiresapi(api = build.version_codes.kitkat) @override public void onscrollchanged() { //改变toolbar的透明度 changetoolbaralpha(); //滚动距离>=大图高度-toolbar高度 即toolbar完全盖住大图的时候 且不是伸展状态 进行伸展操作 if (mscrollview.getscrolly() >= ivimg.getheight() - toolbar.getheight() && !isexpand) { expand(); isexpand = true; } //滚动距离<=0时 即滚动到顶部时 且当前伸展状态 进行收缩操作 else if (mscrollview.getscrolly() <= 0 && isexpand) { reduce(); isexpand = false; } } }); } private void changetoolbaralpha() { int scrolly = mscrollview.getscrolly(); //快速下拉会引起瞬间scrolly<0 if (scrolly < 0) { toolbar.getbackground().mutate().setalpha(0); return; } //计算当前透明度比率 float radio = math.min(1, scrolly / (ivimg.getheight() - toolbar.getheight() * 1f)); //设置透明度 toolbar.getbackground().mutate().setalpha((int) (radio * 0xff)); } @requiresapi(api = build.version_codes.kitkat) private void expand() { //设置伸展状态时的布局 tvsearch.sethint("搜索喜欢的内容和朋友"); relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) msearchlayout.getlayoutparams(); layoutparams.width = layoutparams.match_parent; layoutparams.setmargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10)); msearchlayout.setlayoutparams(layoutparams); //开始动画 begindelayedtransition(msearchlayout); } @requiresapi(api = build.version_codes.kitkat) private void reduce() { //设置收缩状态时的布局 tvsearch.sethint("搜索"); relativelayout.layoutparams layoutparams = (relativelayout.layoutparams) msearchlayout.getlayoutparams(); layoutparams.width = dip2px(80); layoutparams.setmargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10)); msearchlayout.setlayoutparams(layoutparams); //开始动画 begindelayedtransition(msearchlayout); } @requiresapi(api = build.version_codes.kitkat) void begindelayedtransition(viewgroup view) { mset = new autotransition(); mset.setduration(300); transitionmanager.begindelayedtransition(view, mset); } private int dip2px(float dpvale) { final float scale = getresources().getdisplaymetrics().density; return (int) (dpvale * scale + 0.5f); } }
上一篇: Python3 系列之 面向对象篇
下一篇: iOS 隐藏tabbar