Spotify列表视图标题图片效果

Question

Spotify列表视图标题图片效果

androidandroid-listview

17

在查看艺术家时，Spotify的Android版本具有一种独特的ListView标题效果。基本上，头图像似乎保持自己的滚动速度，与实际列表分开。是否有人知道我在说什么？如果知道，可以有人解释如何实现这种效果吗？

以下是视频链接，演示了我所指的标题图片效果:

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

- William Seemann

添加一张图片，或上传一个视频来展示您在谈论什么。Spotify的设备兼容性有限。 - Vikram

1

链接不再可用。 - Machado

4个回答

22

我制作了一个开源库，可以满足你的需求 - https://github.com/nirhart/ParallaxScroll 你可以在这里查看示例 - https://play.google.com/store/apps/details?id=com.nirhart.parallaxscrollexample

- Nir Hartmann

我是Android的新手，所以请原谅我的无知，但是我该如何将这个库添加到我的现有Android Studio项目中？ - Misha

我仍然在使用Eclipse，所以不太确定，但也许这篇文章可以帮到你：https://dev59.com/TmQn5IYBdhLWcg3wxZcn。 - Nir Hartmann

@NirHartmann 首先感谢您提供的库。但是我们该如何使用这个库呢？难道没有使用示例吗？ - Olkunmustafa

@MustafaOlkun 这个 GitHub 链接包含了库和示例代码。 - Nir Hartmann

这个库有淡入淡出和向上滚动视差效果，但是移动后退效果在哪里呢？我在这个库中没有看到像 Spotify 那样的效果。 - Jithin Angel'z Jas'z

显示剩余3条评论

0

假设您有一个包含ImageView的ScrollView并且两者都具有引用，那么可以像这样简单地完成：

   scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
        @Override
        public void onScrollChanged() {
                    int top = scrollView.getScrollY(); // Increases when scrolling up ^
                    int newTop = (int) (top * .5f);
                    imageFrame.setTranslationY(newTop < 0 ? 0 : newTop);

        }
    });

这将使ImageView以比ScrollView其余部分慢一半的速度向上滚动，并检查它不会向下滚动超过应该的范围（超过0）

- DKIT

0

你可以尝试使用 FadingActionBar 来复制 Google Play 音乐处理其艺术家标题的方式。

- TheWizKid95

抱歉，我不需要一个渐隐的操作栏。我只需要在ListView标题上有一个效果。 - William Seemann

这个答案是正确的。该库可以实现你想要的功能，包括淡化操作栏。如果你不想要淡化效果，请查看源代码，特别是FadingActionBarHelper.java，并使用你需要的部分。特别注意标题、内容（在你的情况下是listview）、OnScrollListener之间的交互以及更新标题高度的onNewScroll的部分。 - rarp

这个库实现了我想要的部分，但正如你的回答所证明的那样，并不是以一种易于重用或简洁的方式。告诉我阅读源代码并剪切可能不需要的部分并不是一个直截了当的答案，抱歉。 - William Seemann

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikram · Accepted Answer

感谢您发布视频。这是一种视差效果。以下库可以帮助您实现：

ParallaxScrollView：一个视差滚动视图，其中包含背景和前景视图。 Link 因此，我去修改了链接提供的演示。如果这正是您想要的，请告诉我，我将添加有关我所做的修改以使其工作的详细信息。 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()。

修改后的库：Link。

演示项目：Link。

APK（已修订/带有ListView）：Link。