重庆市教师资格证网,深大淘课,mm脱衣游戏
简书的动态搜索栏效果是这样的，挺高大上的感觉。
ezgif.com-resize.gif
仔细想一下，其实实现起来非常简单，这是我做的效果，基本完美还原。
ezgif.com-resize (2).gif
实现这个效果， 只要关注几个点
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;
}
}
});
}
当然简书的整个布局是基于recyclerview的，这里我为了方便使用了scrollerview。recyclerview也只需监听相应的滚动状态即可。
顶部透明度的渐变
直接上代码
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);
好了关键代码就这么多点了~
下面附上完整代码
布局文件
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#c2c0c0" > <scrollview android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none"> <framelayout android:layout_width="match_parent" android:layout_height="wrap_content"> <framelayout android:layout_width="match_parent" android:layout_height="1500dp"> <imageview android:id="@+id/iv_img" android:layout_width="match_parent" android:layout_height="180dp" android:scaletype="centercrop" android:src="@drawable/night1" /> </framelayout> </framelayout> </scrollview> <android.support.v7.widget.toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbar" android:background="@android:color/white" android:fitssystemwindows="true"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" > <linearlayout android:id="@+id/ll_search" android:layout_width="80dp" android:layout_height="30dp" android:layout_alignparentright="true" android:layout_marginright="10dp" android:layout_margintop="10dp" android:layout_marginbottom="10dp" android:background="@drawable/shape_bg" android:gravity="center"> <textview android:id="@+id/tv_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableleft="@drawable/search" android:gravity="center_vertical" android:text="搜索" android:textcolor="#8a8a8a" /> </linearlayout> </relativelayout> </android.support.v7.widget.toolbar> </relativelayout>
就一个activity
public class mainactivity extends appcompatactivity {
@bind(r.id.tv_search)
textview tvsearch;
@bind(r.id.ll_search)
linearlayout msearchlayout;
@bind(r.id.scrollview)
scrollview mscrollview;
boolean isexpand = false;
@bind(r.id.iv_img)
imageview ivimg;
@bind(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() {
@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));
}
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);
}
private int dip2px(float dpvale) {
final float scale = getresources().getdisplaymetrics().density;
return (int) (dpvale * scale + 0.5f);
}
}
更完整的在这里https://github.com/yanyiqun001/dymicsearchview 希望大家多多支持
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio 解决logcat无过滤工具栏的操作
Android Studio 恢复小窗口停靠模式(Docked Mode)
Android studio保存logcat日志到本地的操作
Android Studio快捷键生成TAG、Log.x日志输出介绍
网友评论