栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 移动开发 > Android

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

Android 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

1、效果图如下:

这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果。

2、分析

为了方便理解,作图分析


如图所示,整个页面分为四个部分:

     1、悬浮内容,floatView

     2、顶部内容,headView

     3、中间内容,与悬浮内容相同,middleView

     4、商品详情展示页面,detailView

因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中。

当y方向的滚动距离小于中间的内容middleView到顶部的距离时,middleView理所当然的会随这页面向上滑动而消失,我们显示悬浮view,从而实现middleView一直卡在顶部的效果。

当y方向滚动距离大于中间的内容middleView容到顶部的距离时,悬浮view隐藏即可。

通过分析,我们发现只要知道scrollview的滚动距离和middleView到顶部的高度即可。至此将复杂的交互特效变成了俩个简单的api。

3、第一种方法实现

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的高度会返回0,这是因为此时view还没有绘制到界面,所以我们采用上面的方法给view设置监听获取,由于可能发生多次绘制,所以最后记得移除监听事件。

以下代码同样可以获取:

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

利用post方法将操作放到队列中,等系统布局完成后执行队列中的事件,同样可以获取到正确的view的top值。

3.2 获取垂直方向滚动距离

在Scrollview的父类View中有个内容变化的方法onScrollChanged(),虽然该方法是protect的外部不可调用,但是在内部,当scrollview滚动时就会执行该方法,所以我们自定义一个MyScrollView在onScrollChanged()通过回调将滚动的距离传递给外部。

自定义scrollview完整代码如下:

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;

    
    void onScroll(int scrollY, int scroll_state);
  }
}

3.3 使用

在acitivity中给scrollview设置自定义滚动监听事件即可

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

这样,通过垂直方法的滚动值来控制floatView的显示隐藏,

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

给悬浮view设置触摸监听,将用户手势传递给scrollView,这样用户滑动悬浮view时,内容区域也可以跟随滚动。

下面是布局代码




  

    

      

      

      
    
  

  

4、第二种方式

本方法与第一种方式的区别就是获取滚动位置的方法不同,该方法更简单一些:

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

可能有读者要问,既然有这种简单的方法直接设置监听,为什么还介绍第一种方法。细心的你可能已经发现,在第一种方法中,我在自定义的监听事件中,还回调了代表当前回调状态的参数statue,因为很多app,在用户手动拖动滚动跟惯性滚动的处理是不能的。比如淘宝商品详情页面,当达到边界值中间view的top值时,只有用户手动拖动一段距离后才会拉出底部的详情类容,而惯性滑动的话只会停在那里。

5、总结

以上就是关于安卓实现按钮随着上下滚动而悬浮顶在固定位置的方法,希望本文的内容对大家开发Android能有所帮助。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/161773.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号