当前位置: 首页 > 科技观察

Android仿京东、天猫APP商品详情页布局结构,实现功能

时间:2023-03-12 09:24:41 科技观察

前言在电商APP中,重点是商品在详情页的展示。用户不仅需要看到图片,还可以看到各种描述和相关规格。需要做电商APP童鞋的可以看看。首先我们来看一下效果。本项目使用的第三方框架:用于加载网络图片的Fresco。标题中的产品图片轮播。ConvenientBanner导航栏切换PagerSlidingTabStrip首先来看效果。由于代码太多,就不一一解释了,只介绍几个核心的自定义控件)不想看的童鞋可以下载apk或者在github上下载源码使用github地址apk下载最外层布局文件0&&t==0){getParent().getParent().requestDisallowInterceptTouchEvent(false);}break;caseMotionEvent.ACTION_DOWN:getParent().getParent().requestDisallowInterceptTouchEvent(true);oldY=ev.getY();oldX=ev.getX();break;caseMotionEvent.ACTION_UP:getParent()。getParent().requestDisallowInterceptTouchEvent(true);break;default:break;}returnsuper.onTouchEvent(ev);}@OverrideprotectedvoidonScrollChanged(intl,intt,intoldl,intoldt){this.t=t;super.onScrollChanged(l,t,oldl,oldt);}}ItemListView也就是SlideDetailsLayout的子View和ItemWebView功能大致一样setOnScrollListener(this);}publicItemListView(Contextcontext,AttributeSetattrs){super(context,attrs);setOnScrollListener(this);}publicItemListView(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);setOnScrollListener(this);}@OverridepublicbooleanonTouchEvent(MotionEventev){switch(ev.getAction()){caseMotionEvent.ACTION_MOVE:floatY=ev.getY();floatYs=Y-oldY;floatX=ev.getX();int[]location=newint[2];getLocationInWindow(location);//滑动到顶部让父控件重新获得触摸事件if(Ys>0&¤tPosition==0){getParent().getParent().requestDisallowInterceptTouchEvent(false);}break;caseMotionEvent.ACTION_DOWN:getParent()default:break;}returnsuper.onTouchEvent(ev);}@OverridepublicvoidonScrollStateChanged(AbsListViewview,intscrollState){currentPosition=getFirstVisiblePosition();}@OverridepublicvoidonScroll(AbsListView,intfirstVisibleItem,intvisibleItemCount,inttotalItem}滚动到父ScrollView最外层时的PagerCount)count)当使用图文详情模块时,可以禁止ViewPager的滑动事件/***一个自定义ViewPager,提供禁止滑动功能*/publicclassNoScrollViewPagerextendsViewPager{privatebooleannoScroll=假;publicNoScrollViewPager(Contextcontext,AttributeSetattrs){super(context,attrs);}publicNoScrollViewPager(Contextcontext){super(context);}publicvoidsetNoScroll(booleannoScroll){this.noScroll=noScroll;}@OverridepublicvoidscrollTo(intx,inty){超级。scrollTo(x,y);}@OverridepublicbooleanonTouchEvent(MotionEventarg0){if(noScroll)returnfalse;elsereturnsuper.onTouchEvent(arg0);}@OverridepublicbooleanonInterceptTouchEvent(MotionEventarg0){if(noScroll)returnvsupernse;@OverridepublicvoidsetCurrentItem(intitem,booleansmoothScroll){super.setCurrentItem(item,smoothScroll);}@OverridepublicvoidsetCurrentItem(intitem){super.setCurrentItem(item);}}product模块最外层的layout是一个自定义的ViewGroup,名为SlideDetailsLayoutSlideDetailsLayout,有两个Views,mFrontView(第一个View)和mBehindView(第二个View)有两种状态。如果状态设置为关闭,则显示第一个商品数据View,如果状态为打开,则显示第二个图文详情。View@SuppressWarnings("unused")publicclassSlideDetailsLayoutextendsViewGroup{/***CallbackforpanelOPEN-CLOSEstatuschanged.*/publicinterfaceOnSlideDetailsListener{/***Calledafterstatuschanged.**@paramstatus{@linkStatus}*/voidonStatucChanged(Statusstatus);}publicenumStatus{/**Panelisclosed*/CLOSE,/**Panelisopened*/OPEN;publicstaticStatusvalueOf(intstats){if(0==stats){returnCLOSE;}elseif(1==stats){returnOPEN;}else{returnCLOSE;}}}privatestaticfinalfloatDEFAULT_PERCENT=0.2f;privatestaticfinalintDEFAULT_DURATION=300;privateViewmFrontView;privateViewmBehindView;privatefloatmTouchSlop;PrivatefloatmTouchSlop;InprivateInitflotion;privateViewmTarget;privatefloatmSlideOffset;privateStatusmStatus=Status.CLOSE;privatebooleanisFirstShowBehindView=true;privatefloatmPercent=DEFAULT_PERCENT;privatelongmDuration=DEFAULT_DURATION;privateintmDefaultPanel=0;privateOnSlideDetailsListenermOnSlideDetailsListener;publicSlideDetailsLayout(Contextcontext){this(context,null);}publicSlideDetailsLayout(Contextcontext,AttributeSetattrs){this(上下文,属性,0);}publicSlideDetailsLayout(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);TypedArraya=context.obtainStyledAttributes(attrs,R.styleable.SlideDetailsLayout,defStyleAttr,0);mPercent=a.getFloat(R.styleable.SlideDetailsLayout_percent,DEFAULT_PERCENT);mDuration=a.getInt(R.styleable.SlideDetailsLayout_duration,DEFAULT_DURATION);mDefaultPanel=a.getInt(R.styleable.SlideDetailsLayout_default_panel,0);这个商品详情页的结构也是我已经上线的项目用在