快捷導(dǎo)航

android商品詳情頁面設(shè)計(jì)詳解

更新時(shí)間：2017年12月05日 10:56:01 作者：ZhengJiaoCsdn

這篇文章主要為大家詳細(xì)介紹了android商品詳情頁面設(shè)計(jì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了android商品詳情展示的具體代碼，供大家參考，具體內(nèi)容如下

首先看下效果圖（樣式，布局可以根據(jù)產(chǎn)品要求改變），
先大致說一下，整體結(jié)構(gòu)使用的是LinearLayout實(shí)現(xiàn)，分上下兩部分，上邊就是我們能滑動(dòng)的自定義布局，下面就是“進(jìn)入店鋪”，“立即購(gòu)買”這兩個(gè)無關(guān)緊要的布局；
下面是根據(jù)產(chǎn)品的要求更改的，每個(gè)APP幾乎都不一樣，所以說是無關(guān)緊要；

布局文件骨架：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical"> 
 
 <!--因?yàn)橐谡w布局右下角放一個(gè)置頂圖標(biāo)，所以用frameLayout包裹一下--> 
 <FrameLayout 
 android:layout_width="match_parent" 
 android:layout_height="0dp" 
 android:layout_weight="1"> 
 
 <!--自定義的相對(duì)布局--> 
 <www.gd.com.goodsdetails.view.ScrollViewContainer 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
 
  <!--上半?yún)^(qū)域的scrollview，因?yàn)樯习雲(yún)^(qū)域也要滑動(dòng)--> 
  <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"> 
   <!--這塊區(qū)域放輪播圖--> 
   </FrameLayout> 
 
   <FrameLayout 
   android:layout_width="match_parent" 
   android:layout_height="500dp"> 
   <!--這塊區(qū)域放商品詳情信息--> 
   </FrameLayout> 
 
   <!-- 
   中間繼續(xù)拖動(dòng)條目（繼續(xù)拖動(dòng)，查看圖文詳情） 
   可以根據(jù)產(chǎn)品需求更改自己想要的樣式（一般這里都是一些簡(jiǎn)單的文字） 
   --> 
   <RelativeLayout 
   android:layout_width="match_parent" 
   android:layout_height="40dp"> 
   ...... 
   </RelativeLayout> 
 
  </LinearLayout> 
 
  </ScrollView><!--結(jié)束：上半?yún)^(qū)域的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> 
 
 <!--*******************************************************--> 
 
 <!--這些無關(guān)緊要，“進(jìn)入店鋪”，“立即購(gòu)買”--> 
 <LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:orientation="vertical"> 
 <span style="white-space:pre"> </span>...... 
 </LinearLayout> 
 
</LinearLayout>

真?zhèn)€頁面最大的難點(diǎn)就是這個(gè)自定義的布局文件：ScrollViewContainer
不過非常爽的就是大家不用自己寫，直接從demo中把ScrollViewContainer復(fù)制到自己的項(xiàng)目中即可使用，非常方便；
效果圖就是我們項(xiàng)目中真是使用的，ScrollViewContainer同樣分為上下兩部分，從“拖動(dòng)條目”分開；
上半部分最上面一般都會(huì)放置一個(gè)輪播圖，然后下面放一些商品詳情，讓大家選擇的一些屬性信息；
這些大家可以根據(jù)需求自己添加；
下半部分一般都是放一個(gè)webview但是“京東”放置了三個(gè)；
我們不用糾結(jié)放置幾個(gè)，因?yàn)槲覀兛梢园严旅娴膚ebview更改為ScrollView，然后里面想放什么放什么；

點(diǎn)擊打開鏈接免費(fèi)下載源碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: