源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

安卓(android)仿电商app商品详情页按钮浮动效果

  • 时间:2021-11-20 09:43 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:安卓(android)仿电商app商品详情页按钮浮动效果
[b]1、效果图如下:[/b] [img]http://files.jb51.net/file_images/article/201608/2016816170404090.gif?201671617435[/img] 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果。 [b]2、分析[/b] 为了方便理解,作图分析 [img]http://files.jb51.net/file_images/article/201608/2016816170523143.png?201671617536[/img] 如图所示,整个页面分为四个部分:      1、悬浮内容,[code]floatView[/code]      2、顶部内容,[code]headView[/code]      3、中间内容,与悬浮内容相同,[code]middleView[/code]      4、商品详情展示页面,[code]detailView[/code] 因为页面内容高度会超出屏幕,所以用[code]Scrollview[/code]实现滚动,悬浮[code]view[/code]与[code]scrollview[/code]同级,都在一个帧布局或者相对布局中。 当y方向的滚动距离小于中间的内容[code]middleView[/code]到顶部的距离时,[code]middleView[/code]理所当然的会随这页面向上滑动而消失,我们显示悬浮[code]view[/code],从而实现[code]middleView[/code]一直卡在顶部的效果。 当y方向滚动距离大于中间的内容[code]middleView[/code]容到顶部的距离时,悬浮[code]view[/code]隐藏即可。 通过分析,我们发现只要知道[code]scrollview[/code]的滚动距离和[code]middleView[/code]到顶部的高度即可。至此将复杂的交互特效变成了俩个简单的api。 [b]3、第一种方法实现[/b] [b]3.1 获取middleView的到父容器顶部的距离[/b]
 tv_title.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
    {
      @Override
      public void onGlobalLayout()
      {
        mTitleTopAndHeight = tv_title.getTop();

        tv_title.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });
在activity的[code]oncreate()[/code]中直接通过view的[code]getTop()[/code]方法获取到view的高度会返回0,这是因为此时view还没有绘制到界面,所以我们采用上面的方法给view设置监听获取,由于可能发生多次绘制,所以最后记得移除监听事件。 [b]以下代码同样可以获取:[/b]
   tv_title.post(new Runnable()
    {
      @Override
      public void run()
      {
        mTitleTopAndHeight = tv_title.getTop();
      }
    });
利用[code]post[/code]方法将操作放到队列中,等系统布局完成后执行队列中的事件,同样可以获取到正确的[code]view[/code]的[code]top[/code]值。 [b]3.2 获取垂直方向滚动距离[/b] 在[code]Scrollview[/code]的父类[code]View[/code]中有个内容变化的方法[code]onScrollChanged(),[/code]虽然该方法是[code]protect[/code]的外部不可调用,但是在内部,当[code]scrollview[/code]滚动时就会执行该方法,所以我们自定义一个[code]MyScrollView[/code]在[code]onScrollChanged()[/code]通过回调将滚动的距离传递给外部。 [b]自定义scrollview完整代码如下:[/b]
public class MyScrollView extends ScrollView
{
  private OnScrollListener mOnScrollListener;

  /**
   * 是否用户手指触摸滑动
   */
  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
  {
    /**
     * 用户手指拖动滚动
     */
    int SCROLL_STATE_TOUCH_SCROLL = 0x0;

    /**
     * 惯性滑行滚动
     */
    int SCROLL_STATE_FLING = 0x1;

    /**
     * 滚动时的回调
     *
     * @param scrollY   Y方向滚动的距离
     * @param scroll_state 当前滚动状态:自由滚动或者手势拖动滚动
     */
    void onScroll(int scrollY, int scroll_state);
  }
}
[b]3.3 使用[/b] 在[code]acitivity[/code]中给[code]scrollview[/code]设置自定义滚动监听事件即可
  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);
        }
      }
    });
这样,通过垂直方法的滚动值来控制[code]floatView[/code]的显示隐藏,
    tv_float.setOnTouchListener(new View.OnTouchListener()
    {
      @Override
      public boolean onTouch(View v, MotionEvent event)
      {
        mScrollView.onTouchEvent(event);
        return false;
      }
    });
给悬浮[code]view[/code]设置触摸监听,将用户手势传递给[code]scrollView[/code],这样用户滑动悬浮[code]view[/code]时,内容区域也可以跟随滚动。 下面是布局代码
<?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="标题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="标题view"
    android:visibility="invisible"/>

</RelativeLayout>
[b]4、第二种方式[/b] 本方法与第一种方式的区别就是获取滚动位置的方法不同,该方法更简单一些:
 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);
        }
      }
    });
可能有读者要问,既然有这种简单的方法直接设置监听,为什么还介绍第一种方法。细心的你可能已经发现,在第一种方法中,我在自定义的监听事件中,还回调了代表当前回调状态的参数[code]statue[/code],因为很多app,在用户手动拖动滚动跟惯性滚动的处理是不能的。比如淘宝商品详情页面,当达到边界值中间[code]view[/code]的[code]top[/code]值时,只有用户手动拖动一段距离后才会拉出底部的详情类容,而惯性滑动的话只会停在那里。 [b]5、总结[/b] 以上就是关于安卓实现按钮随着上下滚动而悬浮顶在固定位置的方法,希望本文的内容对大家开发Android能有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部