效果图
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); } }