DOCSEARCHbyAlgolia
Submit Docs

DragScrollDetailsLayout

repository·master·Indexed 20 days ago

https://github.com/happylishang/dragscrolldetailslayout

An Android custom layout for high-performance nested scrolling experiences, designed for product detail pages. It enables smooth transitions between a top ScrollView header and bottom scrollable components such as WebView, ViewPager, ListView, or FragmentTabHost. When using ViewPager or FragmentTabHost, the implementation requires using DragDetailFragmentPagerAdapter for correct drag-to-scroll synchronization.

Tokens
1.5K
Snippets
2
Records
4
Agent score
20%

What's inside DragScrollDetailsLayout

  1. Implement DragScrollDetailsLayout for product detail pages

    master

    DragScrollDetailsLayout is an Android layout designed to mimic the product detail page behavior found in apps like Taobao or JD. It allows for a seamless transition between a top content area (usually a ScrollView) and a bottom scrollable area (like a WebView, ListView, or ViewPager).

    Supported Combinations:

    1. ScrollView + WebView
    2. ScrollView + ViewPager (Note: The content inside the ViewPager must not be a ListView or WebView to avoid scrolling conflicts)
    3. ScrollView + ListView
    4. ScrollView + FragmentTabHost

  2. Use DragDetailFragmentPagerAdapter when using ViewPager

    master
    If your implementation involves a ViewPager or FragmentTabHost within the DragScrollDetailsLayout, you must ensure that your FragmentPagerAdapter extends DragDetailFragmentPagerAdapter instead of the standard Android FragmentPagerAdapter. This is required for the drag-to-scroll synchronization to work correctly.

  3. Configure ScrollView + ViewPager/FragmentTabHost layout

    master

    To implement a layout with a ViewPager or FragmentTabHost, place the ScrollView as the first child of DragScrollDetailsLayout, followed by a container (like a LinearLayout) that holds the FragmentTabHost and its corresponding FrameLayout content area.

    <com.snail.labaffinity.view.DragScrollDetailsLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#98ff0000"
                android:text="pull up to show more"/>
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.app.FragmentTabHost
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.v4.app.FragmentTabHost>

        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>
    </LinearLayout>

</com.snail.labaffinity.view.DragScrollDetailsLayout>

  4. Configure ScrollView + WebView layout

    master

    To implement a layout where a ScrollView (containing header info) is followed by a WebView, wrap them both inside a com.snail.labaffinity.view.DragScrollDetailsLayout container. The ScrollView should have android:layout_height="wrap_content" and android:fillViewport="false".

    <com.snail.labaffinity.view.DragScrollDetailsLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#98ff0000"
                android:text="pull up to show more"/>
        </LinearLayout>
    </ScrollView>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</com.snail.labaffinity.view.DragScrollDetailsLayout>