简单的搜索框

效果图

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