效果图
1.布局文件
<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>
2.搜索框边框 drawable里面 shape_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomRightRadius="15dp"/>
<stroke android:width="0.5dp"
android:color="#8A8A8A"
/>
<solid android:color="@android:color/white"/>
</shape>
3.创建一个资源文件夹 drawable-xxhdpi
search.png
这个图片的随便换一个就行了 night1.jpg
4.主函数
public class MainActivity extends AppCompatActivity {
TextView tvSearch;
LinearLayout mSearchLayout;
ScrollView mScrollView;
ImageView ivImg;
Toolbar toolbar;
boolean isExpand = false;
private TransitionSet mSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvSearch=findViewById(R.id.tv_search);//搜索文字
mSearchLayout=findViewById(R.id.ll_search);//搜索框
mScrollView=findViewById(R.id.scrollView);
ivImg=findViewById(R.id.iv_img);
toolbar=findViewById(R.id.toolbar);
//设置全屏透明状态栏
// 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().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));
Log.d("aaaaa", "changeToolbarAlpha:scrollY "+scrollY);
Log.d("aaaaa", "changeToolbarAlpha:ivImgHeight "+ivImg.getHeight());
Log.d("aaaaa", "changeToolbarAlpha:toolbarHeight "+toolbar.getHeight()*1f);
Log.d("aaaaa", "changeToolbarAlpha:radio "+radio);
//设置透明度
toolbar.getBackground().setAlpha( (int)(radio * 0xFF));
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
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);
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
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);
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
mSet.setDuration(3000);
TransitionManager.beginDelayedTransition(view, mSet);
}
private int dip2px(float dpVale) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dpVale * scale + 0.5f);
}
}