Introduction: E-commerce app focuses on the display of goods on the detail page. Users not only need to see pictures, but also can see various descriptions and relevant specifications. Exclusive coexist exclusive authorized the public’s the date today released “imitation of jingdong, Tmall app commodity details page functions”, and is already used to his online project, coexist of Jane books: http://www.jianshu.com/u/ab76a93a9384, click on the “reading”, You can see the corresponding link in this article, and the following is the body part.


First look at the effect implementation:





    • Third-party frameworks used in this project:

      • Load web images using Fresco

      • The head of the commodity picture rotation Banner

      • Navigation bar toggles PagerSlidingTabStrip

The outermost layout file

<? The 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"> <! - goods, details, evaluate the control switch - > < 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" App: pstsIndicatorHeight = "2 dp" app: pstsScaleZoomMax = "0.0" app: pstsShouldExpand = "false" app:pstsSmoothScrollWhenClickTab="false" app:pstsTabPaddingLeftRight="12dp" app:pstsTextAllCaps="false" app:pstsTextSelectedColor="#ffffff" app:pstsUnderlineHeight="0dp" /> <TextView android:id="@+id/tv_title" Android :layout_width="wrap_content" Android :layout_height="wrap_content" Android :text=" # FFFFFF"  android:textSize="15sp" android:visibility="gone" /> </LinearLayout> </LinearLayout> </LinearLayout> <! - function is described below - > < com. Hq. Hsmwan. Widget. NoScrollViewPager android: id = "@ + id/vp_content" android: layout_width = "match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>Copy the code

ItemWebView is a child of SlideDetailsLayout.

  • The function is to display the product description of the Webview

  • So that you don’t slide up to the first View

  • The implementation lets the parent control regain the touch event when it slides to the top of the 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(); / / slide to the top let to regain touch events if the parent (Ys > 0 && t = = 0) {getParent (). The 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 is a subview of SlideDetailsLayout. ItemWebView is the same as ItemWebView 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) { } }Copy the code

NoScrollViewPager is the outermost parent layout

  • Disables the slide event of ViewPager when sliding into the graphic details module

/** * 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); }}Copy the code

The outermost layout of the goods module is a custom ViewGroup called SlideDetailsLayout

The SlideDetailsLayout content has two views, mFrontView(the first View) and mBehindView(the second View) have two states, set the state to close to display the first commodity data View, The open state displays the second detailed View.


The product details page architecture is used in the project of himself in the launch, corresponding lot for this case: https://github.com/hexianqiao3755/GoodsInfoPage.

Ps: In the welfare list announced yesterday, brothers and sisters who did not send their accounts to the background, please send them within 24 hours, so that I can collect them. Yes, I have received it.


The first time to get blog update reminder, and more Android, small program dry goods, source code analysis, the latest open source project recommendation, welcome to pay attention to my wechat public number, scan the qr code below or long press to identify the QR code, you can pay attention to.