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

作者:人言落日是天涯 时间:2023-06-18 16:02:58 

前言

之前用简书的时候一直是在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();

来源:http://www.jianshu.com/p/4419f6448d88?utm_source=tuicool&utm_medium=referral

标签:Android,搜索框
0
投稿

猜你喜欢

  • C++实现LeetCode(159.最多有两个不同字符的最长子串)

    2023-06-20 22:39:46
  • flutter material widget组件之信息展示组件使用详解

    2023-06-22 08:45:35
  • springboot post接口接受json时,转换为对象时,属性都为null的解决

    2023-06-17 15:24:23
  • Flutter实现矩形取色器的封装

    2023-06-19 04:08:47
  • c# socket编程udp客户端实现代码分享

    2023-06-16 05:03:31
  • Flutter应用集成极光推送的实现示例

    2023-06-24 03:51:04
  • C语言预处理预编译命令及宏定义详解

    2023-06-18 16:28:06
  • Java读写txt文件时防止中文乱码问题出现的方法介绍

    2023-06-23 04:40:32
  • 浅析Mybatis 在CS程序中的应用

    2023-06-24 08:44:15
  • c#取得控制台应用程序根目录

    2023-06-16 14:25:44
  • Android开发组件flutter的20个常用技巧示例总结

    2023-06-19 17:25:23
  • Java多线程之ThreadLocal浅析

    2023-06-19 19:55:37
  • 使用Flutter实现一个走马灯布局的示例代码

    2023-06-19 03:50:03
  • 探讨:将两个链表非降序合并为一个链表并依然有序的实现方法

    2023-06-23 01:41:38
  • c#处理3种json数据的实例

    2023-06-23 19:12:47
  • 使用Android studio创建的AIDL编译时找不到自定义类的解决办法

    2023-06-23 10:59:41
  • Android实现支付宝支付密码输入界面

    2023-06-20 14:57:15
  • C++语言实现线性表之链表实例

    2023-06-20 22:21:20
  • c# 获取CookieContainer的所有cookies函数代码

    2023-06-17 23:11:30
  • android 获取上一个activity返回值的方法

    2023-06-15 13:22:22
  • asp之家 软件编程 m.aspxhome.com