欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

Android仿简书搜索框效果的示例代码

时间:2020-12-22 17:57:34|栏目:Android代码|点击:

前言

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

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行的效果,看起来效果不太好。

头部视图:

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

上一篇:Android消息处理机制Looper和Handler详解

栏    目:Android代码

下一篇:Android界面刷新的方法分享

本文标题:Android仿简书搜索框效果的示例代码

本文地址:http://www.codeinn.net/misctech/35407.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有