當前位置：首頁 > 运维知识 > Android >内容正文

Android

云炬Android开发笔记 17商品详情功能开发

發布時間：2025/3/15 Android 31 豆豆

生活随笔收集整理的這篇文章主要介紹了云炬Android开发笔记 17商品详情功能开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

閱讀目錄

1.商品詳情ui框架設計

1.1 自定義圓形控件

1.2 底部欄的布局

1.3 整體布局

2.商品詳情UI-MD風格伸縮漸變效果實現

2.1 ui的綁定

2.2 服務器中商品詳情頁的數據的取出

3.商品詳情頁的中間信息的完善

4. 商品詳情頁下部滑動Tab頁面的實現

4.2 填充的ImageDelegate和布局

4.4 商品詳情頁的ViewPager的適配器的設置

5.商品飛入購物車和邏輯梳理

5.1 動畫的依賴

1.商品詳情ui框架設計
【說明】點擊商品之后跳轉到商品的詳情頁面

1.1 自定義圓形控件【源碼】自定義圓形textView控件：com.flj.latte.ui.widget.CircleTextView1 package com.flj.latte.ui.widget; 2 3 import android.content.Context; 4 import android.graphics.Canvas; 5 import android.graphics.Color; 6 import android.graphics.Paint; 7 import android.graphics.PaintFlagsDrawFilter; 8 import android.support.annotation.ColorInt; 9 import android.support.v7.widget.AppCompatTextView; 10 import android.util.AttributeSet; 11 12 13 public class CircleTextView extends AppCompatTextView { 14 15 private final Paint PAINT; 16 private final PaintFlagsDrawFilter FILTER; 17 18 public CircleTextView(Context context) { 19 this(context, null); 20 } 21 22 public CircleTextView(Context context, AttributeSet attrs) { 23 super(context, attrs); 24 PAINT = new Paint(); 25 FILTER = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); 26 PAINT.setColor(Color.WHITE); 27 PAINT.setAntiAlias(true); 28 } 29 30 public final void setCircleBackground(@ColorInt int color) { 31 PAINT.setColor(color); 32 } 33 34 @Override 35 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 36 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 37 final int width = getMeasuredWidth(); 38 final int height = getMaxHeight(); 39 final int max = Math.max(width, height); 40 setMeasuredDimension(max, max); 41 } 42 43 @Override 44 public void draw(Canvas canvas) { 45 canvas.setDrawFilter(FILTER); 46 canvas.drawCircle(getWidth() / 2, getHeight() / 2, 47 Math.max(getWidth(), getHeight()) / 2, PAINT); 48 super.draw(canvas); 49 } 50 }

回到頂部
1.2 底部欄的布局
【源碼】\d1nj4n\latte-ec\src\main\res\layout\layout_goods_detail_bottom.xml

1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:id="@+id/ll_bottom" 5 android:layout_width="match_parent" 6 android:layout_height="50dp" 7 android:layout_alignParentBottom="true" 8 android:baselineAligned="true" 9 android:orientation="horizontal"> 10 11 <RelativeLayout 12 android:id="@+id/rl_favor" 13 android:layout_width="0dp" 14 android:layout_height="match_parent" 15 android:layout_weight="1" 16 android:background="@android:color/white" 17 android:paddingBottom="5dp"> 18 19 <com.joanzapata.iconify.widget.IconTextView 20 android:id="@+id/icon_favor" 21 android:layout_width="match_parent" 22 android:layout_height="wrap_content" 23 android:layout_centerHorizontal="true" 24 android:layout_marginTop="10dp" 25 android:gravity="center" 26 android:text="{fa-heart-o}" 27 android:textSize="20sp" /> 28 29 <android.support.v7.widget.AppCompatTextView 30 android:layout_width="match_parent" 31 android:layout_height="wrap_content" 32 android:layout_alignParentBottom="true" 33 android:layout_centerHorizontal="true" 34 android:gravity="center" 35 android:text="喜歡" 36 android:textSize="12sp" /> 37 38 </RelativeLayout> 39 40 <RelativeLayout 41 android:id="@+id/rl_shop_cart" 42 android:layout_width="0dp" 43 android:layout_height="match_parent" 44 android:layout_weight="1" 45 android:background="@android:color/white" 46 android:paddingBottom="5dp"> 47 48 <com.joanzapata.iconify.widget.IconTextView 49 android:id="@+id/icon_shop_cart" 50 android:layout_width="match_parent" 51 android:layout_height="wrap_content" 52 android:layout_centerHorizontal="true" 53 android:layout_marginTop="10dp" 54 android:gravity="center" 55 android:text="{fa-shopping-cart}" 56 android:textSize="20sp" /> 57 58 <android.support.v7.widget.AppCompatTextView 59 android:layout_width="match_parent" 60 android:layout_height="wrap_content" 61 android:layout_alignParentBottom="true" 62 android:layout_centerHorizontal="true" 63 android:gravity="center" 64 android:text="購物車" 65 android:textSize="12sp" /> 66 67 <com.flj.latte.ui.widget.CircleTextView 68 android:id="@+id/tv_shopping_cart_amount" 69 android:layout_width="20dp" 70 android:layout_height="20dp" 71 android:layout_alignEnd="@+id/icon_shop_cart" 72 android:layout_alignParentTop="true" 73 android:layout_alignRight="@+id/icon_shop_cart" 74 android:layout_marginRight="20dp" 75 android:layout_marginTop="2dp" 76 android:gravity="center" 77 android:textColor="@android:color/white" 78 android:textSize="12sp" 79 tools:ignore="RtlHardcoded" /> 80 81 </RelativeLayout> 82 83 <RelativeLayout 84 android:id="@+id/rl_add_shop_cart" 85 android:layout_width="0dp" 86 android:layout_height="match_parent" 87 android:layout_weight="2" 88 android:background="@android:color/holo_orange_dark" 89 android:gravity="center_horizontal"> 90 91 <android.support.v7.widget.AppCompatTextView 92 android:layout_width="match_parent" 93 android:layout_height="match_parent" 94 android:layout_centerInParent="true" 95 android:gravity="center" 96 android:text="加入購物車" 97 android:textColor="@android:color/white" /> 98 99 </RelativeLayout> 100 </android.support.v7.widget.LinearLayoutCompat>

回到頂部
1.3 整體布局
【源碼】d1nj4n\latte-ec\src\main\res\layout\delegate_goods_detail.xml

1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 <android.support.design.widget.CoordinatorLayout //內容部分整體使用該布局抱起來 8 android:layout_width="match_parent" 9 android:layout_height="match_parent"> 10 11 <android.support.design.widget.AppBarLayout //商品詳情：會隨著整體滑動而滑動 12 android:id="@+id/app_bar_detail" 13 android:layout_width="match_parent" 14 android:layout_height="wrap_content"> 15 16 <android.support.design.widget.CollapsingToolbarLayout //可伸縮的toolbar，需要配合84行的behavior；必須套在appBarLayout中； 17 android:id="@+id/collapsing_toolbar_detail" 18 android:layout_width="match_parent" 19 android:layout_height="wrap_content" 20 app:layout_scrollFlags="scroll|exitUntilCollapsed" 21 app:statusBarScrim="@android:color/transparent"> 22 23 <RelativeLayout 24 android:layout_width="match_parent" 25 android:layout_height="wrap_content"> 26 27 <com.bigkoo.convenientbanner.ConvenientBanner 28 android:id="@+id/detail_banner" 29 android:layout_width="match_parent" 30 android:layout_height="260dp" /> 31 32 <android.support.v7.widget.ContentFrameLayout 33 android:id="@+id/frame_goods_info" 34 android:layout_width="match_parent" 35 android:layout_height="match_parent" 36 android:layout_below="@+id/detail_banner" /> 37 </RelativeLayout> 38 39  40 <android.support.v7.widget.Toolbar 41 android:id="@+id/goods_detail_toolbar" 42 android:layout_width="match_parent" 43 android:layout_height="?android:attr/actionBarSize" 44 app:layout_collapseMode="pin"> //此處的模式必須選擇為：pin模式，否則無法上下折疊滑動 45 46 <RelativeLayout 47 android:layout_width="match_parent" 48 android:layout_height="match_parent"> 49 50 <com.joanzapata.iconify.widget.IconTextView 51 android:id="@+id/icon_goods_back" 52 android:layout_width="wrap_content" 53 android:layout_height="match_parent" 54 android:layout_marginLeft="12dp" 55 android:gravity="center" 56 android:text="{fa-chevron-left}" 57 android:textColor="@android:color/black" 58 android:textSize="26sp" /> 59 60 <android.support.v7.widget.AppCompatTextView 61 android:id="@+id/tv_detail_title_text" 62 android:layout_width="wrap_content" 63 android:layout_height="wrap_content" 64 android:layout_centerInParent="true" 65 android:text="商品詳情" 66 android:textColor="@android:color/black" 67 android:textSize="20sp" /> 68 </RelativeLayout> 69 </android.support.v7.widget.Toolbar> 70  71 72 </android.support.design.widget.CollapsingToolbarLayout> 73 74 <android.support.design.widget.TabLayout 75 android:id="@+id/tab_layout" 76 android:layout_width="match_parent" 77 android:layout_height="?attr/actionBarSize" /> 78 </android.support.design.widget.AppBarLayout> 79 80 <android.support.v4.view.ViewPager 81 android:id="@+id/view_pager" 82 android:layout_width="match_parent" 83 android:layout_height="match_parent" 84 app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 85 86 87 </android.support.design.widget.CoordinatorLayout> 88 89 <include layout="@layout/layout_goods_detail_bottom" /> 90 91 </RelativeLayout>

回到頂部
2.商品詳情UI-MD風格伸縮漸變效果實現
回到頂部
2.1 ui的綁定
【說明】首先取出控件；
【商品詳情頁面的設置和布局】

【點擊響應】【點擊index頁面的商品的按鈕圖標的點擊響應】商品的id進行了傳遞，此處id就是json字符串中的id值；

【詳情頁面的數據】

【完善商品詳情頁】綁定ui；

回到頂部
2.2 服務器中商品詳情頁的數據的取出
【數據的返回】初始化數據；此處具有goods_id的參數；

【banner數據的取出】

回到頂部
3.商品詳情頁的中間信息的完善
【說明】布局使用的是frameLayout,內部會塞一個fragment，即delegate；
【好處】可以降低耦合度，可以改變其中的內容；

【新建fragment】

【布局】

1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:background="@android:color/white" 6 android:orientation="vertical"> 7 8 <android.support.v7.widget.AppCompatTextView 9 android:id="@+id/tv_goods_info_title" 10 android:layout_width="match_parent" 11 android:layout_height="wrap_content" 12 android:layout_marginLeft="20dp" 13 android:layout_marginRight="20dp" 14 android:layout_marginTop="20dp" 15 android:textColor="@android:color/black" 16 android:textSize="18sp" /> 17 18 <android.support.v7.widget.AppCompatTextView 19 android:id="@+id/tv_goods_info_desc" 20 android:layout_width="match_parent" 21 android:layout_height="wrap_content" 22 android:layout_marginLeft="20dp" 23 android:layout_marginRight="20dp" 24 android:layout_marginTop="5dp" 25 android:textSize="16sp" /> 26 27 <android.support.v7.widget.LinearLayoutCompat 28 android:layout_width="match_parent" 29 android:layout_height="wrap_content" 30 android:orientation="horizontal"> 31 32 <android.support.v7.widget.AppCompatTextView 33 android:layout_width="wrap_content" 34 android:layout_height="wrap_content" 35 android:layout_marginLeft="20dp" 36 android:layout_marginTop="10dp" 37 android:text="￥" 38 android:textColor="@color/app_main" 39 android:textSize="20sp" /> 40 41 <android.support.v7.widget.AppCompatTextView 42 android:id="@+id/tv_goods_info_price" 43 android:layout_width="wrap_content" 44 android:layout_height="wrap_content" 45 android:layout_marginTop="10dp" 46 android:text="1299" 47 android:textColor="@color/app_main" 48 android:textSize="20sp" /> 49 </android.support.v7.widget.LinearLayoutCompat> 50 51 </android.support.v7.widget.LinearLayoutCompat>

【傳遞服務器中的data數據】

【取出數據值】

【設置數據值】

回到頂部
4. 商品詳情頁下部滑動Tab頁面的實現

【需要將viewPager和TabLayout相應的adapter中將數據進行轉化】達到映射數據和滑動變換的效果；

【傳遞數據】

【數據適配器--數據的取出】

回到頂部
4.2 填充的ImageDelegate和布局
【數據為空】當數據為空的時候，在頁面中使用fragment進行填充，有利于解耦；

【使用recycleView布局處理下半部的數據】

【完善】

【正確的寫法】上面的寫法不正確；

【初始化images】fragment天生支持StringarrayList；此處沒有進行轉化，處理簡單；

【recycleView中的item的布局】

【recycleView的數據適配器】

【使用ImageDelegate】

回到頂部
4.4 商品詳情頁的ViewPager的適配器的設置

回到頂部
5.商品飛入購物車和邏輯梳理
回到頂部
5.1 動畫的依賴
【貝塞爾動畫】使用別人的貝塞爾的動畫庫，經過了修改；

【源碼】d1nj4n\latte-ui\src\main\java\com\flj\latte\ui\animation\BezierAnimation.java

1 package com.flj.latte.ui.animation; 2 3 import android.app.Activity; 4 import android.content.Context; 5 import android.graphics.drawable.Drawable; 6 import android.view.View; 7 import android.view.ViewGroup; 8 import android.view.animation.AccelerateInterpolator; 9 import android.view.animation.Animation; 10 import android.view.animation.AnimationSet; 11 import android.view.animation.DecelerateInterpolator; 12 import android.view.animation.TranslateAnimation; 13 import android.widget.ImageView; 14 import android.widget.LinearLayout; 15 16 import com.flj.latte.ui.R; 17 18 19 public final class BezierUtil { 20 21 static void startAnimationForJd(final View v, int fromXDelta, 22 int fromYDelta, int fx, int fy, int mx, int my, int tx, 23 int ty, final AnimationListener listener) { 24 final AnimationSet set = new AnimationSet(false); 25 final TranslateAnimation translateAnimation1 = new TranslateAnimation(fromXDelta, mx - fx, fromYDelta, my - fy); 26 translateAnimation1.setInterpolator(new DecelerateInterpolator()); 27 translateAnimation1.setRepeatCount(0); 28 translateAnimation1.setFillAfter(false); 29 set.addAnimation(translateAnimation1); 30 31 final TranslateAnimation translateAnimation2 = new TranslateAnimation(fromXDelta, tx - mx, fromYDelta, ty - my); 32 translateAnimation2.setInterpolator(new AccelerateInterpolator()); 33 translateAnimation2.setRepeatCount(0); 34 translateAnimation2.setFillAfter(false); 35 set.addAnimation(translateAnimation2); 36 set.setDuration(700); 37 set.setFillAfter(false); 38 set.setAnimationListener(new Animation.AnimationListener() { 39 @Override 40 public void onAnimationStart(Animation animation) { 41 v.setVisibility(View.VISIBLE); 42 } 43 44 @Override 45 public void onAnimationEnd(Animation animation) { 46 v.setVisibility(View.GONE); 47 if (listener != null) { 48 listener.onAnimationEnd(); 49 } 50 } 51 52 @Override 53 public void onAnimationRepeat(Animation animation) { 54 55 } 56 }); 57 58 v.startAnimation(set); 59 } 60 61 static ViewGroup createAnimLayout(Activity activity) { 62 final ViewGroup rootView = (ViewGroup) activity.getWindow().getDecorView(); 63 final LinearLayout animLayout = new LinearLayout(activity); 64 final LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( 65 ViewGroup.LayoutParams.MATCH_PARENT, 66 ViewGroup.LayoutParams.MATCH_PARENT); 67 animLayout.setLayoutParams(lp); 68 animLayout.setId(Integer.MAX_VALUE - 1); 69 animLayout.setBackgroundResource(android.R.color.transparent); 70 rootView.addView(animLayout); 71 return animLayout; 72 } 73 74 static View addViewToAnimLayout(Context mContext, View view, int[] location, boolean wrap_content) { 75 if (view == null) return null; 76 int x = location[0]; 77 int y = location[1]; 78 final LinearLayout.LayoutParams params; 79 if (wrap_content) { 80 Drawable drawable = null; 81 if (view instanceof ImageView) { 82 drawable = ((ImageView) view).getDrawable(); 83 } 84 if (drawable == null) { 85 params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 86 } else { 87 params = new LinearLayout.LayoutParams(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); 88 } 89 } else { 90 final int wh = mContext.getResources().getDimensionPixelSize(R.dimen.db_goods_wh); 91 params = new LinearLayout.LayoutParams(wh, wh); 92 } 93 params.leftMargin = x; 94 params.topMargin = y; 95 view.setLayoutParams(params); 96 return view; 97 } 98 99 public interface AnimationListener { 100 /** 101 * 處理動畫結束后的邏輯，不要涉及動畫相關的View 102 */ 103 void onAnimationEnd(); 104 } 105 }

【添加購物車的點擊事件】

【】圖片的url需要創建出來，獲取值；同樣，count值也需要處理；

【添加動畫】

【BUG】添加購物車之后沒有效果

【增加服務器返回數據的判斷】在真實的環境中返回的數據是很多的，不是簡單的true；

【效果】在加入購物車之后返回了服務器設置的值；

總結

以上是生活随笔為你收集整理的云炬Android开发笔记 17商品详情功能开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：云炬Android开发笔记 16附加功
下一篇：如何高效率学Web前端怎么规划前端学习