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

快，点击蓝色“字体”关注这个公众号，一起涨姿势

前言

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

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

本项目使用的第三方框架:

加载网络图片使用的 Fresco

头部的商品图轮播 ConvenientBanner

导航栏切换 PagerSlidingTabStrip

先看看效果实现

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

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

github地址

apk下载

最外层的布局文件

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">

android:id="@+id/ll_title_root"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ec0f38"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="44dp"

android:orientation="horizontal">

android:id="@+id/ll_back"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:paddingLeft="15dp">

android:id="@+id/iv_back"

android:layout_width="22dp"

android:layout_height="22dp"

android:layout_gravity="center_vertical"

android:src="@mipmap/address_come_back" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center">

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同学投稿，Github地址:

https://github.com/hexianqiao3755/GoodsInfoPage

觉得实用的话，欢迎在作者的 Github 给个Star 也可以分享给小伙伴哦； 小编每天都兢兢业业的为整理干货，支持小编在下方给鼓励+1，需要投稿与及有疑问的小伙伴可以在下方留言，小编会第一时间与您联系！

大家都在看

微信不支持外链，请点击原文查看完整文章详情.返回搜狐，查看更多

责任编辑：