高仿简书搜索功能

效果图片1

效果图片2


直接上代码-activity

public classJianshuActivityextendsAppCompatActivity {

@Bind(R.id.tv_search)

TextViewtvSearch;

@Bind(R.id.ll_search)

LinearLayoutmSearchLayout;

@Bind(R.id.scrollView)

ScrollViewmScrollView;

booleanisExpand=false;

@Bind(R.id.iv_img)

ImageViewivImg;

@Bind(R.id.toolbar)

Toolbartoolbar;

privateTransitionSetmSet;

@Override

protected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_jian);

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(newViewTreeObserver.OnScrollChangedListener() {

@Override

public voidonScrollChanged() {

//改变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 voidchangeToolbarAlpha() {

intscrollY =mScrollView.getScrollY();

//快速下拉会引起瞬间scrollY<0

if(scrollY<0){

toolbar.getBackground().mutate().setAlpha(0);

return;

}

//计算当前透明度比率

floatradio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));

//设置透明度

toolbar.getBackground().mutate().setAlpha( (int)(radio *0xFF));

}

private voidexpand() {

//设置伸展状态时的布局

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 voidreduce() {

//设置收缩状态时的布局

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);

}

voidbeginDelayedTransition(ViewGroup view) {

mSet=newAutoTransition();

mSet.setDuration(300);

TransitionManager.beginDelayedTransition(view,mSet);

}

private intdip2px(floatdpVale) {

final floatscale = getResources().getDisplayMetrics().density;

return(int) (dpVale * scale +0.5f);

}

}

布局你代码

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"

>

android:id="@+id/scrollView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:scrollbars="none">

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="1500dp">

android:id="@+id/iv_img"

android:layout_width="match_parent"

android:layout_height="180dp"

android:scaleType="centerCrop"

android:src="@drawable/bg_banner"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/toolbar"

android:background="#fff"

android:fitsSystemWindows="true">

android:layout_width="match_parent"

android:layout_height="wrap_content"

>

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">

android:id="@+id/tv_search"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:text="搜索"

android:textColor="#8A8A8A"/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容