Android仿京东、天猫app的商品详情页的布局架构, 以及功能实现-低调大师

Android仿京东、天猫app的商品详情页的布局架构, 以及功能实现

2017-08-02 421

前言

电商内app，重点在于详情页商品展示，用户不仅要看到图，可以看到各种描述，以及相关规格参数。

有需要做电商类app的童鞋可以看看, 首先先看看效果实现

本项目使用的第三方框架:
- 加载网络图片使用的 Fresco
- 头部的商品图轮播 ConvenientBanner
- 导航栏切换 PagerSlidingTabStrip

先看看效果实现

由于代码量过多, 就不一一讲解只介绍几个核心的自定义控件)

不想看的童鞋可以下载apk或者在github上下载源码使用

github地址
apk下载
最外层的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll_title_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ec0f38"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="44dp"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ll_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="15dp">
<ImageView
android:id="@+id/iv_back"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:src="@mipmap/address_come_back" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<com.gxz.PagerSlidingTabStrip
android:id="@+id/psts_tabs"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:textColor="#ffffff"
android:textSize="15sp"
app:pstsDividerColor="@android:color/transparent"
app:pstsDividerPaddingTopBottom="0dp"
app:pstsIndicatorColor="#ffffff"

ItemWebView是SlideDetailsLayout的子View (SlideDetailsLayout代码太多, 放到了最后)
- 功能为显示商品简介的webview
- 防止往上滑动时会直接滑动到第一个View
- 实现滑动到WebView顶部时, 让父控件重新获得触摸事件

/**
* 商品详情页底部的webview
*/
public class ItemWebView extends WebView {
public float oldY;
private int t;
private float oldX;
public ItemWebView(Context context) {
super(context);
}
public ItemWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ItemWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
float Y = ev.getY();
float Ys = Y - oldY;
float X = ev.getX();
//滑动到顶部让父控件重新获得触摸事件
if (Ys > 0 && t == 0) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_DOWN:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
oldY = ev.getY();
oldX = ev.getX();
break;
case MotionEvent.ACTION_UP:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
break;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
this.t = t;
super.onScrollChanged(l, t, oldl, oldt);
}
}

ItemListView 也是SlideDetailsLayout的子View
- 和ItemWebView功能大致一样

/**
* 商品详情页底部的ListView
*/
public class ItemListView extends ListView implements AbsListView.OnScrollListener {
private float oldX, oldY;
private int currentPosition;
public ItemListView(Context context) {
super(context);
setOnScrollListener(this);
}
public ItemListView(Context context, AttributeSet attrs) {
super(context, attrs);
setOnScrollListener(this);
}
public ItemListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOnScrollListener(this);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
float Y = ev.getY();
float Ys = Y - oldY;
float X = ev.getX();
int [] location = new int [2];
getLocationInWindow(location);
//滑动到顶部让父控件重新获得触摸事件
if (Ys > 0 && currentPosition == 0) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_DOWN:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
oldY = ev.getY();
oldX = ev.getX();
break;
case MotionEvent.ACTION_UP:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
break;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
currentPosition = getFirstVisiblePosition();
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
}
}

NoScrollViewPager为最外层的父布局
- 当滑动到图文详情模块时, 能禁止掉ViewPager的滑动事件

/**
* 提供禁止滑动功能的自定义ViewPager
*/
public class NoScrollViewPager extends ViewPager {
private boolean noScroll = false;
public NoScrollViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
public NoScrollViewPager(Context context) {
super(context);
}
public void setNoScroll(boolean noScroll) {
this.noScroll = noScroll;
}
@Override
public void scrollTo(int x, int y) {
super.scrollTo(x, y);
}
@Override
public boolean onTouchEvent(MotionEvent arg0) {
if (noScroll)
return false;
else
return super.onTouchEvent(arg0);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
if (noScroll)
return false;
else
return super.onInterceptTouchEvent(arg0);
}
@Override
public void setCurrentItem(int item, boolean smoothScroll) {
super.setCurrentItem(item, smoothScroll);
}
@Override
public void setCurrentItem(int item) {
super.setCurrentItem(item);
}
}

商品模块最外层的布局是一个自定义的ViewGroup名为SlideDetailsLayout

SlideDetailsLayout内容有两个View, mFrontView(第一个View)和mBehindView(第二个View)

有两种状态, 状态设置为close就显示第一个商品数据View, open状态就显示第二个图文详情View

@SuppressWarnings("unused")
public class SlideDetailsLayout extends ViewGroup {
/**
* Callback for panel OPEN-CLOSE status changed.
*/
public interface OnSlideDetailsListener {
/**
* Called after status changed.
*
* @param status {@link Status}
*/
void onStatucChanged(Status status);
}
public enum Status {
/** Panel is closed */
CLOSE,
/** Panel is opened */
OPEN;
public static Status valueOf(int stats) {
if (0 == stats) {
return CLOSE;
} else if (1 == stats) {
return OPEN;
} else {
return CLOSE;
}
}
}
private static final float DEFAULT_PERCENT = 0.2f;
private static final int DEFAULT_DURATION = 300;
private View mFrontView;
private View mBehindView;
private float mTouchSlop;
private float mInitMotionY;
private float mInitMotionX;
private View mTarget;
private float mSlideOffset;
private Status mStatus = Status.CLOSE;
private boolean isFirstShowBehindView = true;
private float mPercent = DEFAULT_PERCENT;
private long mDuration = DEFAULT_DURATION;
private int mDefaultPanel = 0;
private OnSlideDetailsListener mOnSlideDetailsListener;
public SlideDetailsLayout(Context context) {
this(context, null);
}
public SlideDetailsLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SlideDetailsLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = 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);

这个商品详情页的架构也是本人在已上线的项目中使用

作者：coexist

来源：51CTO

微信关注我们

原文链接：https://yq.aliyun.com/articles/181473

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

探讨企业数据架构战略和数据湖的可能性和必要性

现今的企业数据架构战略，必须解决如何将现有的数据系统与日益增长的信息需求，性能和数据源相匹配。现今的CIO们，在整合企业数据架构中日益增长的各方面需求时，面临着两大挑战。首先，是将现有的支持运行应用程序的数据系统，与分析师和数据科学家越来越多的信息需求之间相匹配。其次，是管理持续不断的，创新的数据管理功能 (比如Hadoop或NoSQL)在企业内部的集成。CIO的职责就是完成这一数据集成，提高数据的可访问性，同时降低系统的整体复杂性。然而，大多数企业的数据架构，随着时间的推移，通常在缺少预定义的数据架构战略的情况下，自我进化。相应地，这些企业在能够使用统一的方法访问企业数据资产方面，遇到不断增加的复杂性问题。随着数据管理创新的速度加快，新技术如Hadoop，NoSQL和图形数据库正在计划和引入，也增加了数据使用者对于数据领域复杂性的担忧。数据湖领域比较突出的一个例子就是数据湖概念的出现，根据定义，“数据湖是指一个大型的基于对象的存储库，以数据的原始格式保存数据，直到它需要被使用时。” 数据湖基本上是一个数据存储平台，使企业能够收集各种数据集，用数据的原始格式进行存储...

2017-08-03

502

好久好久没写过文章了，一是最近项目太忙了，没时间写。二是也没有时间学习新的东西，想写点什么却又无从下笔。一味的去写这个API怎么用，那个新技术怎么用，又显的没意思。没有项目经验总结的技术知识讲解，总感觉有些苍白。最近在做混合App开发这块，从开始的ionic 框架，到后来的mui框架，让我在混合开发这块有了更深的理解，如果在这块要写点什么无非漫天盖地的这个指令怎么用，那个模版怎么用，数据怎么进行双向绑定，等等，但是这些网上已经很多资料了，等不太忙了，我想我会总结一篇这些框架的使用心得吧。但是我今天不讲这个，我们来谈一谈在原生app中(iOS android)如何使用动态路由机制来搭建整个app的框架。路由机制在web开发中是比较常见的，app开发中还是很少听到这种概念的，目前有些大公司采用的组件化开发(手淘，携程，蘑菇街等)，倒是跟我们讲的有很多相同之处，不过它们的比较复杂，而且网上很多组件化开发，路由机制，没有一个能给出完整代码示例的，看着让人云里雾里的。索性自己就借鉴它们的思想，加上一点个人的理解，搞出了一个简单实用的可行性demo出来。我们主要介绍以下三方面内容： 1 什么是...

2017-08-03

459

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。