安卓(android)仿電商app商品詳情頁按鈕浮動(dòng)效果

更新時(shí)間：2016年08月16日 17:10:30 作者：卜可

很多電商類app的商品詳情頁（其他app也有類似效果，比如qq音樂）都有這么一個(gè)效果：當(dāng)用戶向上滑動(dòng)頁面內(nèi)容超過一定距離后，中間的標(biāo)題欄會(huì)卡在頂部，往下拉回到固定高度后又會(huì)消失。那么如何實(shí)現(xiàn)這個(gè)效果呢？跟著小編一起來學(xué)習(xí)學(xué)習(xí)。

1、效果圖如下：

這效果用戶體驗(yàn)還是很酷炫，今天我們就來講解如何實(shí)現(xiàn)這個(gè)效果。

2、分析

為了方便理解，作圖分析

如圖所示,整個(gè)頁面分為四個(gè)部分：

1、懸浮內(nèi)容,floatView

2、頂部內(nèi)容,headView

3、中間內(nèi)容，與懸浮內(nèi)容相同,middleView

4、商品詳情展示頁面,detailView

因?yàn)轫撁鎯?nèi)容高度會(huì)超出屏幕，所以用Scrollview實(shí)現(xiàn)滾動(dòng)，懸浮view與scrollview同級(jí)，都在一個(gè)幀布局或者相對布局中。

當(dāng)y方向的滾動(dòng)距離小于中間的內(nèi)容middleView到頂部的距離時(shí)，middleView理所當(dāng)然的會(huì)隨這頁面向上滑動(dòng)而消失，我們顯示懸浮view，從而實(shí)現(xiàn)middleView一直卡在頂部的效果。

當(dāng)y方向滾動(dòng)距離大于中間的內(nèi)容middleView容到頂部的距離時(shí)，懸浮view隱藏即可。

通過分析，我們發(fā)現(xiàn)只要知道scrollview的滾動(dòng)距離和middleView到頂部的高度即可。至此將復(fù)雜的交互特效變成了倆個(gè)簡單的api。

3、第一種方法實(shí)現(xiàn)

3.1 獲取middleView的到父容器頂部的距離

 tv_title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
    {
      @Override
      public void onGlobalLayout()
      {
        mTitleTopAndHeight = tv_title.getTop();

        tv_title.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });

在activity的oncreate()中直接通過view的getTop()方法獲取到view的高度會(huì)返回0，這是因?yàn)榇藭r(shí)view還沒有繪制到界面，所以我們采用上面的方法給view設(shè)置監(jiān)聽獲取，由于可能發(fā)生多次繪制，所以最后記得移除監(jiān)聽事件。

以下代碼同樣可以獲取：

   tv_title.post(new Runnable()
    {
      @Override
      public void run()
      {
        mTitleTopAndHeight = tv_title.getTop();
      }
    });

利用post方法將操作放到隊(duì)列中，等系統(tǒng)布局完成后執(zhí)行隊(duì)列中的事件，同樣可以獲取到正確的view的top值。

3.2 獲取垂直方向滾動(dòng)距離

在Scrollview的父類View中有個(gè)內(nèi)容變化的方法onScrollChanged(),雖然該方法是protect的外部不可調(diào)用，但是在內(nèi)部，當(dāng)scrollview滾動(dòng)時(shí)就會(huì)執(zhí)行該方法，所以我們自定義一個(gè)MyScrollView在onScrollChanged()通過回調(diào)將滾動(dòng)的距離傳遞給外部。

自定義scrollview完整代碼如下：

public class MyScrollView extends ScrollView
{
  private OnScrollListener mOnScrollListener;

  /**
   * 是否用戶手指觸摸滑動(dòng)
   */
  private boolean mIsTouch = false;

  public MyScrollView(Context context)
  {
    this(context, null);
  }

  public MyScrollView(Context context, AttributeSet attrs)
  {
    this(context, attrs, 0);
  }

  public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr)
  {
    super(context, attrs, defStyleAttr);
  }

  @Override
  protected void onScrollChanged(int l, int t, int oldl, int oldt)
  {
    super.onScrollChanged(l, t, oldl, oldt);

    if (mOnScrollListener != null)
    {
      mOnScrollListener.onScroll(t, mIsTouch ? OnScrollListener.SCROLL_STATE_TOUCH_SCROLL : OnScrollListener.SCROLL_STATE_FLING);
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent ev)
  {
    switch (ev.getAction())
    {
      case MotionEvent.ACTION_MOVE:
        mIsTouch = true;

        break;
      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
        mIsTouch = false;

        break;
    }

    return super.onTouchEvent(ev);
  }

  public void setOnScrollListener(OnScrollListener onScrollListener)
  {
    mOnScrollListener = onScrollListener;
  }

  public interface OnScrollListener
  {
    /**
     * 用戶手指拖動(dòng)滾動(dòng)
     */
    int SCROLL_STATE_TOUCH_SCROLL = 0x0;

    /**
     * 慣性滑行滾動(dòng)
     */
    int SCROLL_STATE_FLING = 0x1;

    /**
     * 滾動(dòng)時(shí)的回調(diào)
     *
     * @param scrollY   Y方向滾動(dòng)的距離
     * @param scroll_state 當(dāng)前滾動(dòng)狀態(tài)：自由滾動(dòng)或者手勢拖動(dòng)滾動(dòng)
     */
    void onScroll(int scrollY, int scroll_state);
  }
}

3.3 使用

在acitivity中給scrollview設(shè)置自定義滾動(dòng)監(jiān)聽事件即可

  mScrollView.setOnScrollListener(new MyScrollView.OnScrollListener()
    {
      @Override
      public void onScroll(int scrollY, int state)
      {
        Log.d("onScroll: ", scrollY + "" + "----------- state:" + state);

        if (scrollY <= mTitleTopAndHeight)
        {
          tv_float.setVisibility(View.INVISIBLE);
        } else
        {
          tv_float.setVisibility(View.VISIBLE);
        }
      }
    });

這樣，通過垂直方法的滾動(dòng)值來控制floatView的顯示隱藏，

    tv_float.setOnTouchListener(new View.OnTouchListener()
    {
      @Override
      public boolean onTouch(View v, MotionEvent event)
      {
        mScrollView.onTouchEvent(event);
        return false;
      }
    });

給懸浮view設(shè)置觸摸監(jiān)聽，將用戶手勢傳遞給scrollView，這樣用戶滑動(dòng)懸浮view時(shí)，內(nèi)容區(qū)域也可以跟隨滾動(dòng)。

下面是布局代碼

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

  <com.example.qike.scrolltitle.MyScrollView
    android:id="@+id/sv_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center"
        android:text="商品圖片"/>

      <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#a3c"
        android:gravity="center"
        android:text="標(biāo)題view"/>

      <TextView
        android:layout_width="match_parent"
        android:layout_height="600dp"
        android:background="#a2bb"
        android:gravity="center"
        android:text="詳情頁面"/>
    </LinearLayout>
  </com.example.qike.scrolltitle.MyScrollView>

  <TextView
    android:id="@+id/tv_float"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#a3c"
    android:gravity="center"
    android:text="標(biāo)題view"
    android:visibility="invisible"/>

</RelativeLayout>

4、第二種方式

本方法與第一種方式的區(qū)別就是獲取滾動(dòng)位置的方法不同，該方法更簡單一些：

 mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener()
    {
      @Override
      public void onScrollChanged()
      {
        int scrollY = mScrollView.getScrollY();
        if (scrollY <= mTitleTopAndHeight)
        {
          tv_float.setVisibility(View.INVISIBLE);
        } else
        {
          tv_float.setVisibility(View.VISIBLE);
        }
      }
    });

可能有讀者要問，既然有這種簡單的方法直接設(shè)置監(jiān)聽，為什么還介紹第一種方法。細(xì)心的你可能已經(jīng)發(fā)現(xiàn)，在第一種方法中，我在自定義的監(jiān)聽事件中，還回調(diào)了代表當(dāng)前回調(diào)狀態(tài)的參數(shù)statue，因?yàn)楹芏郺pp，在用戶手動(dòng)拖動(dòng)滾動(dòng)跟慣性滾動(dòng)的處理是不能的。比如淘寶商品詳情頁面，當(dāng)達(dá)到邊界值中間view的top值時(shí)，只有用戶手動(dòng)拖動(dòng)一段距離后才會(huì)拉出底部的詳情類容，而慣性滑動(dòng)的話只會(huì)停在那里。

5、總結(jié)

以上就是關(guān)于安卓實(shí)現(xiàn)按鈕隨著上下滾動(dòng)而懸浮頂在固定位置的方法，希望本文的內(nèi)容對大家開發(fā)Android能有所幫助。

您可能感興趣的文章: