Android自定义LinearLayout实现淘宝详情页

程序员文章站 2024-03-05 16:09:49

1.简单说明淘宝详情页就不用我一一介绍了，昨天逛淘宝看到这个效果时，让我想起了去年刚学习android只会使用现成的时候，当时在网上找了一个这种效果的使用了，并不懂怎么...

1.简单说明

淘宝详情页就不用我一一介绍了，昨天逛淘宝看到这个效果时，让我想起了去年刚学习android只会使用现成的时候，当时在网上找了一个这种效果的使用了，并不懂怎么实现的。现在就看到一种效果就想自己实现一下，我想这就是刚接触某个知识时的好奇心吧

说走咱就走啊，本文只是介绍一种实现思路，网上也已经有了很多种实现方式，有问题请指正

效果图（我有很用心的找美女图的）

Android自定义LinearLayout实现淘宝详情页

2.实现思路

继承linearlayout，设置方向为垂直
控件中有两个scrollview,至于为什么要使用scrollview，主要是因为内容超过一页时省去自己处理滑动
关键是事件分发处理。监听两个scrollview的滑动事件，当第一页滑动到底部时，再向上拖动时，拦截事件，判断距离，超过设定值时，滑动到第二页，否则回弹；同理，当第二页滑动到顶部时，再向下拖动时，拦截事件，判断距离，超过设定值时，滑动到第一页，否则回弹（还有很多细节需要结合代码讲解）
关于回弹和滑动换页使用的是scroller，对于scroller的使用，本文不做过多解释

3.实现

3.1重写scrollview

根据实现思路，我们需要监听scrollview是否滑动到顶部和底部，但是scrollview的setonscrollchangelistener()方法在api23才添加。主要是重写scrollviewonscrollchanged(int l, int t, int oldl, int oldt)方法。

l:当前水平方向滚动值,和getscrollx()相等
t:当前竖直方向滚动值,和getscrolly()相等
oldl:上一次水平滚动值
oldt：上一次竖直滚动值

监听接口：

public interface onscrollendlistener {
 void scrolltobottom(view view);
 void scrolltotop(view view);
 void scrolltomiddle(view view);
 }

onscrollchanged方法

 @override
 protected void onscrollchanged(int l, int t, int oldl, int oldt) {
 super.onscrollchanged(l, t, oldl, oldt);
 if(t == 0){
  if (monscrollbottomlistener != null) {
  monscrollbottomlistener.scrolltotop(this);
  }
 } else if(t + getmeasuredheight() >= getchildat(0).getmeasuredheight()){
  if (monscrollbottomlistener != null) {
  monscrollbottomlistener.scrolltobottom(this);
  }
 } else {
  if (monscrollbottomlistener != null) {
  monscrollbottomlistener.scrolltomiddle(this);
  }
 }
 }

3.2重写onmeasure方法、page的获取与设置

显示调用第二个自孩子的测量方法，不然尺寸有可能为0

 @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
 super.onmeasure(widthmeasurespec, heightmeasurespec);
 /**
  * 显示调用第二个自孩子的测量方法，不然尺寸有可能为0
  */
 view child2 = getchildat(1);
 if (child2 != null) {
  child2.measure(widthmeasurespec, heightmeasurespec);
 }
 }

在onfinishinflate中初始化两个页面

@override
 protected void onfinishinflate() {
 super.onfinishinflate();
 if(getchildcount() == 2){
  view child1 = getchildat(0);
  if (child1 instanceof scrollendscrollview){
  scrollview1 = (scrollendscrollview) child1;
  }
  view child2 = getchildat(1);
  if(child2 instanceof scrollendscrollview){
  scrollview2 = (scrollendscrollview) child2;
  }
 }

 initevent();
 }

为两个页面设置滑动监听

private scrollendscrollview.onscrollendlistener scrollendlistener = new scrollendscrollview.onscrollendlistener() {
 @override
 public void scrolltobottom(view view) {
  if(view == scrollview1){
  istobotttom = true;
  }
 }

 @override
 public void scrolltotop(view view) {
  if(view == scrollview2){
  istotop = true;
  }
 }

 @override
 public void scrolltomiddle(view view) {
  if(view == scrollview1){
  istobotttom = false;
  }
  if(view == scrollview2){
  istotop = false;
  }
 }
 };

3.3scroller使用的几步

scroller的英文解释是：
this class encapsulates scrolling. you can use scrollers (scroller or overscroller) to collect the data you need to produce a scrolling animation—for example, in response to a fling gesture. scrollers track scroll offsets for you over time, but they don't automatically apply those positions to your view. it's your responsibility to get and apply new coordinates at a rate that will make the scrolling animation look smooth.

此类封装滚动。您可以使用滚动条（滚轮或overscroller）收集你需要制作一个滚动的动画，例如，响应一扔手势的数据。滚动条为您跟踪滚动偏移量随着时间的推移，但他们不会自动将新的位置设置到view中。你的任务是获取并使用一个合适的速度，使滚动动画看起来更平滑。

简而言之，有关滑动的你都可以使用这个实现。

需要重写的方法

@override
 public void computescroll() {
 super.computescroll();
 //先判断mscroller滚动是否完成
 if (mscroller.computescrolloffset()) {
  //这里调用view的scrollto()完成实际的滚动
  scrollto(mscroller.getcurrx(), mscroller.getcurry());
  //必须调用该方法，否则不一定能看到滚动效果
  postinvalidate();
 }
 }

辅助方法

 //调用此方法设置滚动的相对偏移
 public void smoothscrollby(int dx, int dy) {
 //设置mscroller的滚动偏移量
 mscroller.startscroll(mscroller.getfinalx(), mscroller.getfinaly(), dx, dy, math.max(300, math.abs(dy)));
 invalidate();//这里必须调用invalidate()才能保证computescroll()会被调用，否则不一定会刷新界面，看不到滚动效果
 }

//调用此方法滚动到目标位置
 public void smoothscrollto(int fx, int fy) {
 int dx = fx - mscroller.getfinalx();
 int dy = fy - mscroller.getfinaly();
 smoothscrollby(dx, dy);
 }

3.4事件分发

最关键的部分，逻辑稍复杂，细节处理较多。这里重写dispatchtouchevent。

显示第一页时
未滑动到底部，事件由scrollview1自己处理
滑动到底部时，如果继续向上拖动，拦截事件，父控件处理滑动；继续向下拖动时，如果父控件（即该控件）当前滚动最后位置(mscroller.getfinaly())不为0，如果父控件继续滚动不会出现负值时（出现负值时会导致头部空白，因为这时是父控件控制，scrollview1不可滑动），不拦截事件，父控件处理滑动，否则，强制滑动到0位置，并把事件下发给子控件

显示第二页时
未滑动到最顶部时，事件由scrollview2自己处理
滑动到顶部时，如果继续向下拖动，拦截事件，父控件处理滑动;继续向上拖动时，如果父控件当前滚动位置小于第一页高度，拦截事件，父控件处理滑动，否则，滑动到第二页起始位置，并把事件下发给子控件
action_move中进行事件分发，action_up中进行切换页面、回弹
关于使用scroller滑动，实现弹性效果，简单实现请看这里简单的弹性实现代码

@override
 public boolean dispatchtouchevent(motionevent ev) {
 int action = ev.getaction();
 int yposition = (int) ev.gety();
 switch (action) {
  case motionevent.action_down:
  mscroller.abortanimation();
  mlasty = yposition;
  mmovey = 0;
  break;
  case motionevent.action_move:
  mmovey = (mlasty - yposition);
  mlasty = yposition;
  if(istobotttom){
   if(mmovey > 0){
   //向上
   smoothscrollby(0, mmovey);
   return true;
   } else {
   //向下
   if(mscroller.getfinaly() != 0){
    //这是出于第一页和第二页显示连接处
    if(getscrolly() + mmovey > 0){
    smoothscrollby(0, mmovey);
    return true;
    } else{
    smoothscrollto(0, 0);
    return super.dispatchtouchevent(ev);
    }
   }
   }
  }
  else if(istotop){
   if(mmovey < 0){
   //向下
   smoothscrollby(0, mmovey);
   return true;
   } else {
   //向上
   if(mscroller.getfinaly() < scrollview1.getheight()){
    //这是出于第一页和第二页显示连接处
    smoothscrollby(0, mmovey);
    return true;
   } else {
    smoothscrollto(0, scrollview1.getheight());
    return super.dispatchtouchevent(ev);
   }
   }
  }

  //处理快速滑动时两页覆盖问题
  if(pageindex == 0){
   smoothscrollto(0, 0);
  } else if(pageindex == 1){
   smoothscrollto(0, scrollview1.getheight());
  }

  break;

  case motionevent.action_up:
  case motionevent.action_cancel:
  if(istobotttom){
   if(math.abs(getscrolly()) > to_next_page_height){
   //移动到第二页
   pageindex = 1;
   smoothscrollto(0, scrollview1.getheight());
   istobotttom = false;
   istotop = true;
   } else {
   //回弹
   smoothscrollby(0, -mscroller.getfinaly());
   }
  } else if(istotop){
   if(scrollview1.getheight() - getscrolly() > to_next_page_height){
   //移动到第一页
   pageindex = 0;
   smoothscrollto(0, 0);
   istobotttom = true;
   istotop = false;
   } else {
   //回弹
   smoothscrollto(0, scrollview1.getheight());
   }
  }

  break;
  default:
  break;
 }

 return super.dispatchtouchevent(ev);
 }

4.总结

实现该控件，需要掌握的知识点主要是自定义控件的基本步骤、scroller的基本使用和事件分发，当然这里最关键的处理还是事件分发。开头也说了，虽然这个有很多人实现过了，但还是想用自己的方式实现一遍。大笑三声，哈哈哈，又实现一个自定义控件…博主还在自定义控件学习阶段，请谨慎使用该控件到项目中。

5.下载

https://github.com/linechen/twopagelayout

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： C# 根据ip获取城市等相关信息

下一篇：将Sublime Text 2配置为Java的IDE的教程

Android自定义LinearLayout实现淘宝详情页

Android自定义View实现钟摆效果进度条PendulumView

Android自定义LinearLayout实现淘宝详情页

Android自定义View实现水面上涨效果

Android APP使用自定义字体实现方法

Android自定义ViewGroup实现带箭头的圆角矩形菜单

Android自定义控件ViewGroup实现标签云（四）

Android实现的仿淘宝购物车demo示例

Android自定义状态栏颜色与APP风格保持一致的实现方法

Android实现仿淘宝购物车增加和减少商品数量功能demo示例

Android自定义View实现验证码