GoodsInfoPage

repository·master·Indexed 20 days ago

https://github.com/hexianqiao3755/goodsinfopage

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

Tokens
2.4K
Snippets
8
Records
10
Agent score
72%

What's inside GoodsInfoPage

  1. Overview of GoodsInfoPage

    master
    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.
  2. Adapt scrollable views for SlideDetailsLayout

    master

    To ensure smooth scrolling between the SlideDetailsLayout and its children (like WebView or ListView), children must handle touch events to pass control back to the parent when they reach their scroll boundaries.

    • ItemWebView: A custom WebView that calls requestDisallowInterceptTouchEvent(false) on its parent when the user scrolls to the top of the web content.
    • ItemListView: A custom ListView that implements AbsListView.OnScrollListener to detect when the user is at the first visible position, allowing the parent to regain touch control.
  3. Implement the SlideDetailsLayout structure

    master

    The core layout for a goods information page uses a LinearLayout containing a header (with a PagerSlidingTabStrip for tab switching) and a NoScrollViewPager as the main content container. The content within the ViewPager should utilize SlideDetailsLayout to 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>
  4. Install GoodsInfoPage dependencies

    master

    To use this project, add the following dependencies to your build.gradle file. Ensure you have jcenter() in your allprojects repositories 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'
    }
  5. Configure NoScrollViewPager to disable swipe gestures

    master

    The NoScrollViewPager extends ViewPager and 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);
  6. Use SlideDetailsLayout for sliding panels

    master

    SlideDetailsLayout is a custom ViewGroup that manages two child views: mFrontView (the first child, e.g., basic product info) and mBehindView (the second child, e.g., detailed description). It supports two states: CLOSE and OPEN.

    • Status.CLOSE: Shows the first view.
    • Status.OPEN: Shows the second view.

    Key methods:

    • smoothOpen(boolean smooth): Animates the panel to the OPEN state.
    • smoothClose(boolean smooth): Animates the panel to the CLOSE state.
    • 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);
  7. Use ItemRecommendGoodsAdapter to display recommended goods

    master

    The ItemRecommendGoodsAdapter is a BaseAdapter used to render a list of recommended goods items in an Android UI (typically within a ListView). It manages a list of RecommendGoodsBean objects and maps them to the R.layout.item_recommend_goods_item layout.

    To use this adapter, instantiate it with a Context and a List<RecommendGoodsBean>. You can then update the displayed data using setData, addData, or clearData.

    // 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();
  8. Use GoodsConfigAdapter to display goods specification parameters

    master

    The GoodsConfigAdapter is an Android BaseAdapter used to render a list of goods specification parameters (key-value pairs) in a ListView. It maps a list of GoodsConfigBean objects to a layout defined by R.layout.config_listview_item.

    To use it, instantiate the adapter with a Context and a List<GoodsConfigBean>. You can update the displayed data at any time by calling setData().

    // 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);
  9. ItemRecommendGoodsAdapter API Reference

    master

    Methods available in ItemRecommendGoodsAdapter for 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()