안 드 로 이 드 상품 상세 페이지 디자인 상세 설명

본 논문 의 사례 는 안 드 로 이 드 상품 의 상세 한 전시 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

먼저 효과 도(스타일,구 조 는 제품 의 요구 에 따라 바 꿀 수 있 습 니 다)를 보 세 요.
먼저 대체적으로 말 하면 전체적인 구 조 는 LinearLayout 를 사용 하여 이 루어 진 것 이다.상하 두 부분 으로 나 뉘 는데 위 는 우리 가 미 끄 러 질 수 있 는 사용자 정의 구조 이 고 아래 는'가게 에 들 어가','즉시 구 매'라 는 중요 하지 않 은 구조 이다.
다음은 제품 의 요구 에 따라 변 경 된 것 으로 앱 마다 거의 다 르 기 때문에 중요 하지 않다.
레이아웃 파일 골격:

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

실제 페이지 의 가장 큰 난점 은 바로 이 사용자 정의 레이아웃 파일 입 니 다:ScrollView Container
그러나 매우 시원 한 것 은 여러분 이 직접 쓰 지 않 고 데모 에서 ScrollView Container 를 자신의 프로젝트 에 복사 하면 사용 할 수 있 고 매우 편리 하 다 는 것 입 니 다.
효과 도 는 우리 프로젝트 에서 정말 사용 하 는 것 입 니 다.ScrollView Container 역시 상하 두 부분 으로 나 뉘 어'드래그 항목'에서 분 리 됩 니 다.
상반부 의 맨 위 에 보통 윤파 도 를 놓 은 다음 에 아래 에 상품 의 상세 한 정 보 를 놓 아 사람들 이 선택 하 는 속성 정 보 를 제공한다.
이것들 은 모두 수요 에 따라 스스로 추가 할 수 있다.
아 랫 부분 은 보통 웹 뷰 를 하나 넣 는데'경 동'은 세 개 넣 었 어 요.
우 리 는 아래 웹 뷰 를 ScrollView 로 바 꾸 고 그 안에 무엇 을 넣 고 싶 은 지 고민 할 필요 가 없습니다.
클릭 하여 링크 열기 무료원본 코드 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.