Spotify ListView标题图像效果

Question

在查看艺术家时,Spotify的Android版本具有唯一的ListView标题效果.基本上,标题图像似乎保持它自己的滚动速度与实际列表不同.有谁知道我在说什么？如果是这样,有人可以解释如何实现这种效果吗？

这是一个视频链接,概述了我所指的标题图像效果:

http://servestream.sourceforge.net/20130911_200347.mp4

Answer 1

感谢您发布视频.这是一种视差效应.以下库可以帮助您实现它:

ParallaxScrollView:一个Parallax ScrollView,它在ParallexScrollView中获取背景和前景视图.

链接

所以,我继续修改链接上提供的演示.如果这就是您所追求的,请告诉我,我将添加有关我为使其工作所做的修改的详细信息.

APK链接

怎么弄这个:

如果在可滚动部分中除了ListView之外什么都有,那么效果很容易实现.因为持有ListView的容器是扩展的ScrollView,所以事情变得复杂.进行了以下修改:

在活动中,膨胀以下布局:

<couk.jenxsol.parallaxscrollview.views.ParallaxScrollView xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DemoActivity" >

<!-- Top Image: Here, the height is set to 300dp. You can set this in code -->
<!-- depending on screen dimensions -->

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:gravity="center"
        android:scaleType="fitXY"
        android:src="@drawable/image_to_use" />

<!-- Foreground -->
<!-- You can place any of the items below as the foreground,  -->
<!-- but for most control, add the scroll view yourself. -->

<!-- This is the area that will hold the ListView -->
<!-- Also note that the LinearLayout's top margin will 
<!-- depend on ImageView's height. Here, there's an overalp of 100dp -->
<!-- between the ImageView and the LinearLayout -->
<!-- Reason: The first TextView(with a transparent background) inside the 
<!-- LinearLayout is displayed over the ImageView. -->
<!-- So, the overlapping height should be equal to first TextView's height -->
<!-- LinearLayout's top margin = ImageView's height - firstTextView's height -->

<!-- AnotherView is an extended LinearLayout that I added to the library -->

    <couk.jenxsol.parallaxscrollview.views.AnotherView
        android:id="@+id/anotherView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:id="@+id/llMainHolder"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:gravity="center"
                android:padding="@dimen/spacing"
                android:text="Parallax Effect"
                android:textColor="@android:color/white"
                android:textSize="21sp"
                tools:ignore="NewApi" />

            <!-- ListView -->

            <LinearLayout
                android:id="@+id/llMain"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <ListView
                    android:id="@+id/lvMain"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:divider="@android:color/black"
                    android:dividerHeight="2px" >

                </ListView>

            </LinearLayout>            

        </LinearLayout>

    </couk.jenxsol.parallaxscrollview.views.AnotherView>

</couk.jenxsol.parallaxscrollview.views.ParallaxScrollView>

活动代码:

public class DemoActivity extends Activity {

    private ParallaxScrollView mScrollView;
    private ListView lvMain;
    private LinearLayout llMain, llMainHolder;
    private AnotherView anotherView;
    private ImageView iv;
    private TextView tvTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        // Inflated layout
        View mContent = getLayoutInflater().inflate(R.layout.activity_demo, null);

        // Initialize components

        mScrollView = (ParallaxScrollView) mContent.findViewById(R.id.scroll_view);

        llMain = (LinearLayout) mContent.findViewById(R.id.llMain);

        llMainHolder = (LinearLayout) mContent.findViewById(R.id.llMainHolder);

        lvMain = (ListView) mContent.findViewById(R.id.lvMain);

        iv = (ImageView) mContent.findViewById(R.id.iv);

        tvTitle = (TextView) mContent.findViewById(R.id.tvTitle);

        anotherView = (AnotherView) mContent.findViewById(R.id.anotherView);

        String[] array = {"one", "two", "three", "four", "five", "six", "seven", "eight",
            "nine", "ten", "evelen", "twelve", "thirteen", "fourteen"};

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.text, array);

        lvMain.setAdapter(adapter);            

        // Set Content
        setContentView(mContent);

        lvMain.post(new Runnable() {

            @Override
            public void run() {

                // Adjusts llMain's height to match ListView's height
                setListViewHeight(lvMain, llMain);  

                // LayoutParams to set the top margin of LinearLayout holding
                // the content. 
                // topMargin = iv.getHeight() - tvTitle.getHeight()
                LinearLayout.LayoutParams p = 
                       (LinearLayout.LayoutParams)llMainHolder.getLayoutParams();
                p.topMargin = iv.getHeight() - tvTitle.getHeight(); 
                llMainHolder.setLayoutParams(p);
            }
        });
    }

    // Sets the ListView holder's height    
    public void setListViewHeight(ListView listView, LinearLayout llMain) {
        ListAdapter listAdapter = listView.getAdapter();
        if (listAdapter == null) {

            return;
        }

        int totalHeight = 0;
        int firstHeight = 0;
        int desiredWidth = MeasureSpec.makeMeasureSpec(
                             listView.getWidth(), MeasureSpec.AT_MOST);

        for (int i = 0; i < listAdapter.getCount(); i++) {

            if (i == 0) {
                View listItem = listAdapter.getView(i, null, listView);
                listItem.measure(desiredWidth, MeasureSpec.UNSPECIFIED);
                firstHeight = listItem.getMeasuredHeight();
        }
            totalHeight += firstHeight; 
        }

        LinearLayout.LayoutParams params = 
                         (LinearLayout.LayoutParams)llMain.getLayoutParams();

        params.height = totalHeight + (listView.getDividerHeight() *
                                                (listAdapter.getCount() - 1));
        llMain.setLayoutParams(params);
        anotherView.requestLayout();    
    }
}

保存内容的库(ObservableScrollView)提供的视图扩展了ScrollView.这导致您要显示的ListView出现问题.我补充说AnotherView,扩展了一个LinearLayout:

public class AnotherView extends LinearLayout {

private ScrollCallbacks mCallbacks;

    static interface ScrollCallbacks {
        public void onScrollChanged(int l, int t, int oldl, int oldt);
    }

    public void setCallbacks(ScrollCallbacks listener) {
        mCallbacks = listener;
    }

    public AnotherView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
    } 

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mCallbacks != null) {
            mCallbacks.onScrollChanged(l, t, oldl, oldt);
        }
    }

    @Override
    public int computeVerticalScrollRange() {
        return super.computeVerticalScrollRange();
    }              

}

最后:图书馆提供了视差效果.视频中的效果是反向视差效果.为了获得理想的结果,需要进行小的改动ParallaxScrollView.onLayout().代替final int scrollYCenterOffset = -mScrollView.getScrollY(),使用final int scrollYCenterOffset = mScrollView.getScrollY().

修改过的库:链接.

演示项目:链接.

APK(修订/使用ListView):链接.

Answer 2

我创建了一个开源库,可以满足您的需求 - https://github.com/nirhart/ParallaxScroll 您可以在此处查看示例 - https://play.google.com/store/apps/details?id=com .nirhart.parallaxscrollexample