本文實例為大家分享了android商品詳情展示的具體代碼,供大家參考,具體內容如下

首先看下效果圖(樣式,布局可以根據產品要求改變),
先大致說一下,整體結構使用的是LinearLayout實現,分上下兩部分,上邊就是我們能滑動的自定義布局,下面就是“進入店鋪”,“立即購買”這兩個無關緊要的布局;
下面是根據產品的要求更改的,每個APP幾乎都不一樣,所以說是無關緊要;
布局文件骨架:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--因為要在整體布局右下角放一個置頂圖標,所以用frameLayout包裹一下--> <FrameLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <!--自定義的相對布局--> <www.gd.com.goodsdetails.view.ScrollViewContainer android:layout_width="match_parent" android:layout_height="match_parent"> <!--上半區域的scrollview,因為上半區域也要滑動--> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="240dp"> <!--這塊區域放輪播圖--> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="500dp"> <!--這塊區域放商品詳情信息--> </FrameLayout> <!-- 中間繼續拖動條目(繼續拖動,查看圖文詳情) 可以根據產品需求更改自己想要的樣式(一般這里都是一些簡單的文字) --> <RelativeLayout android:layout_width="match_parent" android:layout_height="40dp"> ...... </RelativeLayout> </LinearLayout> </ScrollView><!--結束:上半區域的scrollview--> <!--下面需要顯示的webview了--> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" /> </www.gd.com.goodsdetails.view.ScrollViewContainer> <!--一鍵滑到頂部的圖片--> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="15dp" /> </FrameLayout> <!--*******************************************************--> <!--這些無關緊要,“進入店鋪”,“立即購買”--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <span style="white-space:pre"> </span>...... </LinearLayout> </LinearLayout>
真個頁面最大的難點就是這個自定義的布局文件:ScrollViewContainer
不過非常爽的就是大家不用自己寫,直接從demo中把ScrollViewContainer復制到自己的項目中即可使用,非常方便;
效果圖就是我們項目中真是使用的,ScrollViewContainer同樣分為上下兩部分,從“拖動條目”分開;
上半部分最上面一般都會放置一個輪播圖,然后下面放一些商品詳情,讓大家選擇的一些屬性信息;
這些大家可以根據需求自己添加;
下半部分一般都是放一個webview但是“京東”放置了三個;
我們不用糾結放置幾個,因為我們可以把下面的webview更改為ScrollView,然后里面想放什么放什么;
點擊打開鏈接免費下載源碼
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答