GoodsInfoPage
repository·master·Indexed 20 days ago
https://github.com/hexianqiao3755/goodsinfopageA mobile-app-style layout architecture for product detail pages inspired by JD.com and Tmall. It provides a reference implementation for e-commerce mobile interfaces, featuring SlideDetailsLayout for managing transitions between product info and detailed descriptions, NoScrollViewPager to control swipe gestures, and specialized adapters like GoodsConfigAdapter and ItemRecommendGoodsAdapter for displaying product specifications and recommendations.
What's inside GoodsInfoPage
- GoodsInfoPage is a layout architecture and functional implementation designed to mimic the product detail pages (PDP) of major e-commerce applications like JD.com and Tmall. It serves as a reference implementation for developers building e-commerce mobile applications. The architecture is customizable, and the source code includes comments to guide modifications.
Adapt scrollable views for SlideDetailsLayout
masterTo ensure smooth scrolling between the
SlideDetailsLayoutand its children (likeWebVieworListView), children must handle touch events to pass control back to the parent when they reach their scroll boundaries.- ItemWebView: A custom
WebViewthat callsrequestDisallowInterceptTouchEvent(false)on its parent when the user scrolls to the top of the web content. - ItemListView: A custom
ListViewthat implementsAbsListView.OnScrollListenerto detect when the user is at the first visible position, allowing the parent to regain touch control.
- ItemWebView: A custom
Implement the SlideDetailsLayout structure
masterThe core layout for a goods information page uses a
LinearLayoutcontaining a header (with aPagerSlidingTabStripfor tab switching) and aNoScrollViewPageras the main content container. The content within theViewPagershould utilizeSlideDetailsLayoutto manage the transition between the primary product info and the detailed description.<LinearLayout ... android:orientation="vertical"> <!-- Top Title/Tabs --> <LinearLayout android:id="@+id/ll_title_root" android:layout_width="match_parent" android:layout_height="wrap_content" ...> <!-- ... Back button and PagerSlidingTabStrip ... --> <com.gxz.PagerSlidingTabStrip android:id="@+id/psts_tabs" ... /> </LinearLayout> <!-- Main Content --> <com.hq.hsmwan.widget.NoScrollViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>Install GoodsInfoPage dependencies
masterTo use this project, add the following dependencies to your
build.gradlefile. Ensure you havejcenter()in yourallprojectsrepositories block.allprojects { repositories { jcenter() } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.facebook.fresco:fresco:0.9.0' compile 'com.gxz.pagerslidingtabstrip:library:1.3' compile 'com.bigkoo:convenientbanner:2.0.5' }Configure NoScrollViewPager to disable swipe gestures
masterThe
NoScrollViewPagerextendsViewPagerand provides a way to disable horizontal swiping. This is useful when the user is interacting with a detailed content module (like a long description) and you want to prevent them from accidentally swiping to the next tab (e.g., moving from 'Details' to 'Reviews').Use
setNoScroll(boolean noScroll)to enable or disable the swipe functionality.NoScrollViewPager viewPager = findViewById(R.id.vp_content); // Disable swiping to prevent accidental tab changes while reading details viewPager.setNoScroll(true);Use SlideDetailsLayout for sliding panels
masterSlideDetailsLayoutis a customViewGroupthat manages two child views:mFrontView(the first child, e.g., basic product info) andmBehindView(the second child, e.g., detailed description). It supports two states:CLOSEandOPEN.- Status.CLOSE: Shows the first view.
- Status.OPEN: Shows the second view.
Key methods:
smoothOpen(boolean smooth): Animates the panel to theOPENstate.smoothClose(boolean smooth): Animates the panel to theCLOSEstate.setPercent(float percent): Sets the threshold (0.0 to 1.0) for switching states during a drag gesture.setOnSlideDetailsListener(OnSlideDetailsListener listener): Registers a callback for status changes.
// Example usage of SlideDetailsLayout SlideDetailsLayout layout = findViewById(R.id.slide_details_layout); layout.setOnSlideDetailsListener(new SlideDetailsLayout.OnSlideDetailsListener() { @Override public void onStatucChanged(SlideDetailsLayout.Status status) { // Handle status change } }); // To open the detailed view layout.smoothOpen(true);Use ItemRecommendGoodsAdapter to display recommended goods
masterThe
ItemRecommendGoodsAdapteris aBaseAdapterused to render a list of recommended goods items in an Android UI (typically within aListView). It manages a list ofRecommendGoodsBeanobjects and maps them to theR.layout.item_recommend_goods_itemlayout.To use this adapter, instantiate it with a
Contextand aList<RecommendGoodsBean>. You can then update the displayed data usingsetData,addData, orclearData.// Initialize the adapter ItemRecommendGoodsAdapter adapter = new ItemRecommendGoodsAdapter(context, goodsList); // Set the adapter to a ListView listView.setAdapter(adapter); // Update data later adapter.setData(newList); // Or append data adapter.addData(moreGoods); // Or clear all items adapter.clearData();Update data in GoodsConfigAdapter
masterIf the underlying list of goods configuration parameters changes, use the
setData(List<GoodsConfigBean> data)method. This method replaces the current data set and automatically triggersnotifyDataSetChanged()to refresh the UI.adapter.setData(newDataList);Use GoodsConfigAdapter to display goods specification parameters
masterThe
GoodsConfigAdapteris an AndroidBaseAdapterused to render a list of goods specification parameters (key-value pairs) in aListView. It maps a list ofGoodsConfigBeanobjects to a layout defined byR.layout.config_listview_item.To use it, instantiate the adapter with a
Contextand aList<GoodsConfigBean>. You can update the displayed data at any time by callingsetData().// Assuming you have a list of GoodsConfigBean objects List<GoodsConfigBean> configList = getGoodsConfigList(); // Initialize the adapter GoodsConfigAdapter adapter = new GoodsConfigAdapter(context, configList); // Attach to a ListView listView.setAdapter(adapter); // To update the data later: adapter.setData(newConfigList);ItemRecommendGoodsAdapter API Reference
masterMethods available in
ItemRecommendGoodsAdapterfor managing the recommended goods data set:/** * Constructor * @param context The Android context * @param data The initial list of RecommendGoodsBean */ public ItemRecommendGoodsAdapter(Context context, List<RecommendGoodsBean> data) /** * Replaces the current data set with a new list and refreshes the UI. * @param data The new list of RecommendGoodsBean */ public void setData(List<RecommendGoodsBean> data) /** * Appends a new list of items to the existing data set and refreshes the UI. * @param data The list of items to add */ public void addData(List<RecommendGoodsBean> data) /** * Returns the current list of items. * @return List<RecommendGoodsBean> */ public List<RecommendGoodsBean> getData() /** * Removes all items from the data set and refreshes the UI. */ public void clearData()