Android仿簡書搜索框效果的示例代碼

更新時間：2017年10月18日 08:58:05 作者：人言落日是天涯

本篇文章主要介紹了Android仿簡書搜索框效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

之前用簡書的時候一直是在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 滾動監(jiān)聽：

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時，對標題欄執(zhí)行透明度變化
        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();
  }

搜索框執(zhí)行的動畫（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 創(chuàng)建與解析XML（五）——詳解Dom4j方式
本篇文章主要介紹了Android創(chuàng)建與解析XML(二)——詳解Dom4j方式,這里整理了詳細的代碼,有需要的小伙伴可以參考下。
2016-11-11
Android手勢操作識別詳解
這篇文章主要為大家詳細介紹了Android手勢操作識別，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
cocos2d-2.0-x-2.0.3 交叉編譯到android報錯解決
我用的是cocos2d-2.0-x-2.0.3 之前弄了一天也沒成功今天來了下載了最新的ndk8 更新了sdk 又重新是了一遍居然成功了，不知道是工具的版本問題還是哪一步出錯誤了,在這里詳細的整理一下，感興趣的朋友可以了解下
2013-01-01
基于android中權限的集合匯總
本篇文章把android中的權限進行了集合匯總。需要的朋友參考下
2013-05-05
Android開發(fā)實現(xiàn)文件存儲功能
這篇文章主要為大家詳細介紹了Android開發(fā)實現(xiàn)文件存儲功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
Android教你如何發(fā)現(xiàn)APP卡頓的實現(xiàn)
這篇文章主要介紹了Android教你如何發(fā)現(xiàn)APP卡頓的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
詳解Android中fragment和viewpager的那點事兒
本文主要對Android中fragment和viewpager進行詳細介紹，具有一定的參考價值，需要的朋友一起來看下吧
2016-12-12
Android自定義View實現(xiàn)水波紋擴散效果
這篇文章主要為大家詳細介紹了Android如何通過自定義View實現(xiàn)水波紋擴散效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2022-08-08
完美解決Jpush[獲取sdk版本失敗!]的問題
下面小編就為大家?guī)硪黄昝澜鉀QJpush[獲取sdk版本失敗!]的問題的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Android JSON數(shù)據(jù)與實體類之間的相互轉化（GSON的用法）
這篇文章主要介紹了Android JSON數(shù)據(jù)與實體類之間的相互轉化（GSON的用法），非常具有實用價值，需要的朋友可以參考下。
2017-01-01