Question

我有一个我想要应用视差滚动的布局。我的布局如下：

enter image description here

相关的XML是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/top_control_bar"
        android:background="@drawable/container_dropshadow">
        <RelativeLayout
            android:id="@+id/logo_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="#ffffff">
            <ImageView
                android:id="@+id/organiser_logo"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_layout"
        android:layout_below="@+id/top_control_bar">
        <LinearLayout
            android:orientation="vertical"
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="fill_parent"
            android:layout_below="@+id/top_control_bar"
            android:layout_height="wrap_content"
            android:background="@drawable/container_dropshadow"
            android:id="@+id/explanation_wrapper">
            <TextView
                android:text="@string/no_event_header"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:id="@+id/explanation_header"
                android:padding="8dip"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent" />
            <TextView
                android:text="@string/no_event_text_1st_paragraph"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:id="@+id/explanation_1st_paragraph"
                android:paddingTop="8dip"
                android:paddingRight="20dip"
                android:paddingBottom="10dip"
                android:paddingLeft="10dip" />
        </LinearLayout>
        <ListView
            android:id="@+id/album_active_list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:choiceMode="singleChoice"
            android:background="@drawable/container_dropshadow"
            android:layout_below="@+id/explanation_wrapper" />
    </RelativeLayout>
</RelativeLayout>

我需要让中间层滚动到底层。当顶部没有空间（中间层完全滚动到底层）时，我需要顶层在中间层上滚动。

我将如何实现这种行为？

Answer 1

您可以尝试使用此https://github.com/chrisjenx/ParallaxScrollView。它非常简单易用，您可以查看演示应用https://github.com/chrisjenx/ParallaxScrollView/downloads

Answer 2

我在尝试使用XML布局后自己找到了答案。相关的XML是这样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/scroll_view"
  android:background="#ffffff"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

      <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff00ff"
        android:padding="15dip"
        android:text="Hello ParallaxScrollView 1 !"
        android:layout_marginTop="5dip"/>

     <ScrollView
        android:id="@+id/sv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/transparent"
            android:orientation="vertical" >

            <!-- This Linearlayout is used as padding but 60dip is fixed so that needs to be calculated dynamically-->
            <LinearLayout
                android:layout_width="fill_parent"
                android:background="@android:color/transparent"
                android:layout_height="60dip"
                android:baselineAligned="true"
                android:orientation="vertical"/>

             <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:background="#dddddd"
                android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ff0000"
                        android:padding="15dip"
                        android:text="Hello ParallaxScrollView 1 !" 
                        android:layout_marginTop="5dip"/>   

                </LinearLayout>

        </LinearLayout>

     </ScrollView>



</RelativeLayout>

Answer 3

 @Override
 public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,int totalItemCount)                                                                                                                 
          {
            if (listView.getFirstVisiblePosition() == 0) {
            View firstChild = listView.getChildAt(0);
            int topY = 0;
            if (firstChild != null) {
                topY = firstChild.getTop();
            }

            int heroTopY = stickyViewSpacer.getTop();
            stickyView.setY(Math.max(0, heroTopY + topY));
            imageView.setY(topY * 0.5f);
        }
    }
});

如需更多参考，请点击此处http://androiddhina.blogspot.in/2015/08/listview-header-parallax-with-sticky-view-in-android.html

android中的视差滚动

3 个答案: