Android – 仿简书搜索框效果

前言

之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的。话不多说,直接上图。

简书搜索框.gif

Activity 布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_recycleview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>


    <LinearLayout
        android:id="@+id/id_ll_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:gravity="right"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/id_title_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/search_white_bg"
            android:paddingRight="10dp"
            android:paddingLeft="10dp"
            android:gravity="center"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="16dp"
            >


            <TextView
                android:id="@+id/id_tv_search_min"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:gravity="center"
                android:maxLines="1"
                android:drawableLeft="@mipmap/search_icon"
                android:text="搜索"
                android:drawablePadding="10dp"
                android:textColor="#b7b7b7"
                android:textSize="13sp"
                />

        </RelativeLayout>

    </LinearLayout>

</RelativeLayout>

这里的TextView要添加maxLines=1属性,如果不添加,当text=“搜索简书内容和朋友”时会有2行变1行的效果,看起来效果不太好。

activity xml.png

头部视图:

<?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"
              android:id="@+id/id_header_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
        <TextView
            android:id="@+id/id_tv_header_view"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:background="@color/c_3ec88e"
            android:gravity="center"
            android:text="我是头部"
          />
</RelativeLayout>

activity 头部 xml.png

下面咱们省略findViewById的代码,直接看核心代码: 变量初始化:

        //获取屏幕宽度
        mMaxWidth = ScreenUtil.getScreenWidth();
        //搜索框距离屏幕边缘的margin
        int rightMargin = Px2DpUtil.dp2px(this, 17);
        //屏幕宽度减去左右margin后的搜索框宽度最大值
        mMaxWidth = mMaxWidth -rightMargin*2;
        //搜索框宽度最小值
        mMinWidth = Px2DpUtil.dp2px(this, R.dimen.d_80);
        //header布局高度
        mHeaderHeight=Px2DpUtil.dp2px(this,R.dimen.d_120);

RecyclerView 滚动监听:

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                LinearLayoutManager l = (LinearLayoutManager)recyclerView.getLayoutManager();
                //获取第一个可见视图的position
                int position = l.findFirstVisibleItemPosition();
                //获取第一个完全可见视图的position
                int firstCompletelyVisibleItemPosition = l.findFirstCompletelyVisibleItemPosition();
                //当position=0时,对标题栏执行透明度变化
                if (position == 0) {
                    //计算滚动的距离占header高度的比例
                    double delta = Math.floor(((float) getScollYDistance(recyclerView) % mHeaderHeight));
                    //给标题栏设置透明度
                    mLlTitle.getBackground().setAlpha((int) delta);
                }
                //当position=1时,搜索框最大
                if (position == 1) {
                    ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMaxWidth);
                    setAnimatorListener(animator,1);
                }
                 //当position=0时,搜索框最小
                if(firstCompletelyVisibleItemPosition==0){
                    ObjectAnimator animator = ObjectAnimator.ofInt(new ViewWidthWrapper(mRlTitleLayout), "width", mMinWidth);
                    setAnimatorListener(animator,0);
                }
            }

        });

获取RecycleView垂直滚动的距离:

public int getScollYDistance(RecyclerView rv) {
        LinearLayoutManager layoutManager = (LinearLayoutManager) rv.getLayoutManager();
        //获取第一个可见item的position
        int position = layoutManager.findFirstVisibleItemPosition();
        //获取第一个position的View
        View firstVisiableChildView = layoutManager.findViewByPosition(position);
        //获取第一个可见View的高度 
        int itemHeight = firstVisiableChildView.getHeight();
        return (position) * itemHeight - firstVisiableChildView.getTop();
    }

搜索框执行的动画(ObjectAnimator):

animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (visibity == 1) {
                    mMinTvSearchView.setText("搜索简书内容和朋友");
                }
                if (visibity == 0) {
                    mMinTvSearchView.setText("搜索");
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        animator.setDuration(100).start();

好了,以上就是搜索框效果的全部内容,代码中都有比较详细的注释。

快乐生活!快乐工作!快乐编程!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

1104
来自专栏everhad

[BOT] 一种android中实现“圆角矩形”的方法

内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角。思路是利用“Xfermode ...

2427
来自专栏猿人谷

使用鼠标

C语言Windows程序设计 -> 第十一天 -> 使用鼠标 鼠标的使用同样是通过获取Windows鼠标消息来获取用户当前的鼠标状态的。 一、鼠标的介绍 ...

17610
来自专栏开发与安全

muduo网络库学习之EventLoop(六):TcpConnection::send()、shutdown()、handleRead()、handleWrite()

首先在EventLoop(五)基础上,在TcpConnection 构造函数中添加: // 通道可写事件到来的时候,回调TcpConnection::han...

3220
来自专栏分享达人秀

视图切换组件ViewSwitcher

前面三期学习了ProgressBar系列组件,那本期开始一起来学习ViewAnimator组件。 一、ViewAnimator组件概述 View...

2127
来自专栏一“技”之长

Java开发GUI之Dialog弹出窗口 原

422
来自专栏海说

13、Java菜单条、菜单、菜单项

13、Java菜单条、菜单、菜单项 一般用Java做界面时,都得牵涉到菜单条、菜单、菜单项的设计。菜单项放在菜单里,菜单放在菜单条里,且其字体均可设置。 13...

1830
来自专栏androidBlog

自定义 Behavior - 仿新浪微博发现页的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

561
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:Android 快捷方式 Shortcut 应用

3777
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——不仅仅是圆角

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

1965

扫码关注云+社区