自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Android仿京東、天貓app的商品詳情頁的布局架構, 以及功能實現(xiàn)

作者：coexist
移動開發(fā) Android
電商內(nèi)app，重點在于詳情頁商品展示，用戶不僅要看到圖，可以看到各種描述，以及相關規(guī)格參數(shù)。

前言

電商內(nèi)app，重點在于詳情頁商品展示，用戶不僅要看到圖，可以看到各種描述，以及相關規(guī)格參數(shù)。

有需要做電商類app的童鞋可以看看, 首先先看看效果實現(xiàn)

  • 本項目使用的第三方框架:
    • 加載網(wǎng)絡圖片使用的 Fresco
    • 頭部的商品圖輪播 ConvenientBanner
    • 導航欄切換 PagerSlidingTabStrip

先看看效果實現(xiàn)

 

 

 

 

由于代碼量過多, 就不一一講解只介紹幾個核心的自定義控件)

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

  • github地址
  • apk下載
  • 最外層的布局文件
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     xmlns:app="http://schemas.android.com/apk/res-auto" 
  4.     xmlns:tools="http://schemas.android.com/tools" 
  5.     android:layout_width="match_parent" 
  6.     android:layout_height="match_parent" 
  7.     android:orientation="vertical"> 
  8.      <!-- 頂部標題 --> 
  9.     <LinearLayout 
  10.         android:id="@+id/ll_title_root" 
  11.         android:layout_width="match_parent" 
  12.         android:layout_height="wrap_content" 
  13.         android:background="#ec0f38" 
  14.         android:orientation="vertical"> 
  15.  
  16.         <LinearLayout 
  17.             android:layout_width="match_parent" 
  18.             android:layout_height="44dp" 
  19.             android:orientation="horizontal"> 
  20.  
  21.             <LinearLayout 
  22.                 android:id="@+id/ll_back" 
  23.                 android:layout_width="wrap_content" 
  24.                 android:layout_height="match_parent" 
  25.                 android:paddingLeft="15dp"> 
  26.  
  27.                 <ImageView 
  28.                     android:id="@+id/iv_back" 
  29.                     android:layout_width="22dp" 
  30.                     android:layout_height="22dp" 
  31.                     android:layout_gravity="center_vertical" 
  32.                     android:src="@mipmap/address_come_back" /> 
  33.             </LinearLayout> 
  34.  
  35.             <LinearLayout 
  36.                 android:layout_width="0dp" 
  37.                 android:layout_height="match_parent" 
  38.                 android:layout_weight="1" 
  39.                 android:gravity="center"> 
  40.  
  41.                 <!-- 商品、詳情、評價切換的控件 --> 
  42.                 <com.gxz.PagerSlidingTabStrip 
  43.                     android:id="@+id/psts_tabs" 
  44.                     android:layout_width="wrap_content" 
  45.                     android:layout_height="32dp" 
  46.                     android:layout_gravity="center" 
  47.                     android:textColor="#ffffff" 
  48.                     android:textSize="15sp" 
  49.                     app:pstsDividerColor="@android:color/transparent" 
  50.                     app:pstsDividerPaddingTopBottom="0dp" 
  51.                     app:pstsIndicatorColor="#ffffff" 

 

  • ItemWebView是SlideDetailsLayout的子View (SlideDetailsLayout代碼太多, 放到了***)
    • 功能為顯示商品簡介的webview
    • 防止往上滑動時會直接滑動到***個View
    • 實現(xiàn)滑動到WebView頂部時, 讓父控件重新獲得觸摸事件
  1. /** 
  2.  * 商品詳情頁底部的webview 
  3.  */ 
  4. public class ItemWebView extends WebView { 
  5.     public float oldY; 
  6.     private int t; 
  7.     private float oldX; 
  8.  
  9.     public ItemWebView(Context context) { 
  10.         super(context); 
  11.     } 
  12.  
  13.     public ItemWebView(Context context, AttributeSet attrs) { 
  14.         super(context, attrs); 
  15.     } 
  16.  
  17.     public ItemWebView(Context context, AttributeSet attrs, int defStyleAttr) { 
  18.         super(context, attrs, defStyleAttr); 
  19.     } 
  20.  
  21.  
  22.     @Override 
  23.     public boolean onTouchEvent(MotionEvent ev) { 
  24.  
  25.         switch (ev.getAction()) { 
  26.             case MotionEvent.ACTION_MOVE: 
  27.                 float Y = ev.getY(); 
  28.                 float Ys = Y - oldY; 
  29.                 float X = ev.getX(); 
  30.  
  31.                 //滑動到頂部讓父控件重新獲得觸摸事件 
  32.                 if (Ys > 0 && t == 0) { 
  33.                     getParent().getParent().requestDisallowInterceptTouchEvent(false); 
  34.                 } 
  35.                 break; 
  36.  
  37.             case MotionEvent.ACTION_DOWN: 
  38.                 getParent().getParent().requestDisallowInterceptTouchEvent(true); 
  39.                 oldY = ev.getY(); 
  40.                 oldX = ev.getX(); 
  41.                 break; 
  42.  
  43.             case MotionEvent.ACTION_UP: 
  44.                 getParent().getParent().requestDisallowInterceptTouchEvent(true); 
  45.                 break; 
  46.  
  47.             default: 
  48.                 break; 
  49.         } 
  50.         return super.onTouchEvent(ev); 
  51.     } 
  52.  
  53.     @Override 
  54.     protected void onScrollChanged(int l, int t, int oldl, int oldt) { 
  55.         this.t = t; 
  56.         super.onScrollChanged(l, t, oldl, oldt); 
  57.     } 
  58.  
  59. } 

 

  • ItemListView 也是SlideDetailsLayout的子View
    • 和ItemWebView功能大致一樣

 

  1. /** 
  2.  * 商品詳情頁底部的ListView 
  3.  */ 
  4. public class ItemListView extends ListView implements AbsListView.OnScrollListener { 
  5.     private float oldX, oldY; 
  6.     private int currentPosition; 
  7.  
  8.     public ItemListView(Context context) { 
  9.         super(context); 
  10.         setOnScrollListener(this); 
  11.     } 
  12.  
  13.     public ItemListView(Context context, AttributeSet attrs) { 
  14.         super(context, attrs); 
  15.         setOnScrollListener(this); 
  16.     } 
  17.  
  18.     public ItemListView(Context context, AttributeSet attrs, int defStyleAttr) { 
  19.         super(context, attrs, defStyleAttr); 
  20.         setOnScrollListener(this); 
  21.     } 
  22.  
  23.  
  24.     @Override 
  25.     public boolean onTouchEvent(MotionEvent ev) { 
  26.         switch (ev.getAction()) { 
  27.             case MotionEvent.ACTION_MOVE: 
  28.                 float Y = ev.getY(); 
  29.                 float Ys = Y - oldY; 
  30.                 float X = ev.getX(); 
  31.                 int [] location = new int [2]; 
  32.                 getLocationInWindow(location); 
  33.  
  34.                 //滑動到頂部讓父控件重新獲得觸摸事件 
  35.                 if (Ys > 0 && currentPosition == 0) { 
  36.                     getParent().getParent().requestDisallowInterceptTouchEvent(false); 
  37.                 } 
  38.                 break; 
  39.  
  40.             case MotionEvent.ACTION_DOWN: 
  41.                 getParent().getParent().requestDisallowInterceptTouchEvent(true); 
  42.                 oldY = ev.getY(); 
  43.                 oldX = ev.getX(); 
  44.                 break; 
  45.  
  46.             case MotionEvent.ACTION_UP: 
  47.                 getParent().getParent().requestDisallowInterceptTouchEvent(true); 
  48.                 break; 
  49.  
  50.             default: 
  51.                 break; 
  52.         } 
  53.         return super.onTouchEvent(ev); 
  54.     } 
  55.  
  56.     @Override 
  57.     public void onScrollStateChanged(AbsListView view, int scrollState) { 
  58.         currentPosition = getFirstVisiblePosition(); 
  59.     } 
  60.  
  61.     @Override 
  62.     public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { 
  63.  
  64.     } 
  65. } 

 

  • NoScrollViewPager為最外層的父布局
    • 當滑動到圖文詳情模塊時, 能禁止掉ViewPager的滑動事件
  1. /** 
  2.  * 提供禁止滑動功能的自定義ViewPager 
  3.  */ 
  4. public class NoScrollViewPager extends ViewPager { 
  5.     private boolean noScroll = false; 
  6.  
  7.     public NoScrollViewPager(Context context, AttributeSet attrs) { 
  8.         super(context, attrs); 
  9.     } 
  10.  
  11.  
  12.     public NoScrollViewPager(Context context) { 
  13.         super(context); 
  14.     } 
  15.  
  16.     public void setNoScroll(boolean noScroll) { 
  17.         this.noScroll = noScroll; 
  18.     } 
  19.  
  20.     @Override 
  21.     public void scrollTo(int x, int y) { 
  22.         super.scrollTo(x, y); 
  23.     } 
  24.  
  25.     @Override 
  26.     public boolean onTouchEvent(MotionEvent arg0) { 
  27.         if (noScroll) 
  28.             return false; 
  29.         else 
  30.             return super.onTouchEvent(arg0); 
  31.     } 
  32.  
  33.     @Override 
  34.     public boolean onInterceptTouchEvent(MotionEvent arg0) { 
  35.         if (noScroll) 
  36.             return false; 
  37.         else 
  38.             return super.onInterceptTouchEvent(arg0); 
  39.     } 
  40.  
  41.     @Override 
  42.     public void setCurrentItem(int item, boolean smoothScroll) { 
  43.         super.setCurrentItem(item, smoothScroll); 
  44.     } 
  45.  
  46.     @Override 
  47.     public void setCurrentItem(int item) { 
  48.         super.setCurrentItem(item); 
  49.     } 
  50.  
  51. } 

 

商品模塊最外層的布局是一個自定義的ViewGroup名為SlideDetailsLayout

SlideDetailsLayout內(nèi)容有兩個View, mFrontView(***個View)和mBehindView(第二個View)

有兩種狀態(tài), 狀態(tài)設置為close就顯示***個商品數(shù)據(jù)View, open狀態(tài)就顯示第二個圖文詳情View

  1. @SuppressWarnings("unused") 
  2. public class SlideDetailsLayout extends ViewGroup { 
  3.  
  4.     /** 
  5.      * Callback for panel OPEN-CLOSE status changed. 
  6.      */ 
  7.     public interface OnSlideDetailsListener { 
  8.         /** 
  9.          * Called after status changed. 
  10.          * 
  11.          * @param status {@link Status} 
  12.          */ 
  13.         void onStatucChanged(Status status); 
  14.     } 
  15.  
  16.     public enum Status { 
  17.         /** Panel is closed */ 
  18.         CLOSE, 
  19.         /** Panel is opened */ 
  20.         OPEN; 
  21.  
  22.         public static Status valueOf(int stats) { 
  23.             if (0 == stats) { 
  24.                 return CLOSE; 
  25.             } else if (1 == stats) { 
  26.                 return OPEN; 
  27.             } else { 
  28.                 return CLOSE; 
  29.             } 
  30.         } 
  31.     } 
  32.  
  33.     private static final float DEFAULT_PERCENT = 0.2f; 
  34.     private static final int DEFAULT_DURATION = 300; 
  35.  
  36.     private View mFrontView; 
  37.     private View mBehindView; 
  38.  
  39.     private float mTouchSlop; 
  40.     private float mInitMotionY; 
  41.     private float mInitMotionX; 
  42.  
  43.  
  44.     private View mTarget; 
  45.     private float mSlideOffset; 
  46.     private Status mStatus = Status.CLOSE; 
  47.     private boolean isFirstShowBehindView = true; 
  48.     private float mPercent = DEFAULT_PERCENT; 
  49.     private long mDuration = DEFAULT_DURATION; 
  50.     private int mDefaultPanel = 0; 
  51.  
  52.     private OnSlideDetailsListener mOnSlideDetailsListener; 
  53.  
  54.     public SlideDetailsLayout(Context context) { 
  55.         this(context, null); 
  56.     } 
  57.  
  58.     public SlideDetailsLayout(Context context, AttributeSet attrs) { 
  59.         this(context, attrs, 0); 
  60.     } 
  61.  
  62.     public SlideDetailsLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
  63.         super(context, attrs, defStyleAttr); 
  64.  
  65.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SlideDetailsLayout, defStyleAttr, 0); 
  66.         mPercent = a.getFloat(R.styleable.SlideDetailsLayout_percent, DEFAULT_PERCENT); 
  67.         mDuration = a.getInt(R.styleable.SlideDetailsLayout_duration, DEFAULT_DURATION); 
  68.         mDefaultPanel = a.getInt(R.styleable.SlideDetailsLayout_default_panel, 0); 

 

這個商品詳情頁的架構也是本人在已上線的項目中使用 

責任編輯：龐桂玉 來源： 安卓巴士Android開發(fā)者門戶
Android布局架構功能實現(xiàn)
相關推薦

2016-11-28 09:58:53

京東服務閉環(huán)實踐

2017-01-15 18:51:57

京東手機商品詳情頁

2016-01-04 15:16:01

京東詳情頁實踐

2016-11-23 15:26:01

詳情頁單品頁前端

2023-07-31 22:02:17

客服訂單詳情

2024-07-12 14:52:20

2024-06-03 14:37:22

銳捷天蝎路由器

2022-07-21 08:00:00

京東數(shù)據(jù)存儲汽車行業(yè)

2015-11-13 10:25:04

京東商品搜索架構

2009-07-29 11:46:22

asp.net1.1

2018-02-26 06:33:53

京東商品系統(tǒng)商品架構

2023-05-31 07:57:12

筆記本電腦信譽度

2015-04-16 14:17:53

2017-04-27 21:00:33

Android滑動分析

2015-12-14 15:12:42

京東

2017-06-30 17:48:59

互聯(lián)網(wǎng)

2018-06-13 15:47:10

阿里文學

2013-08-02 10:20:03

android時間軸

2015-12-09 11:07:16

商城源碼android

2018-07-02 13:10:05

Android短信驗證
點贊
收藏

51CTO技術棧公眾號