欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-15 19:35:10
前言 之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的。话不多说...

前言

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

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

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

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

头部视图:

<?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>

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

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

好了,以上就是搜索框效果的全部内容,代码中都有比较详细的注释。希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: