Android 版本的 Spotify 在查看艺术家时具有独特的 ListView 标题效果。基本上，标题图像似乎保持了它自己的滚动速度，而不是实际列表。有人知道我在说什么吗？如果是这样，有人可以解释如何实现这种效果吗？
这是一个视频链接，概述了我所指的标题图像效果：
问问题
20385 次
4 回答
28
感谢您发布视频。这是视差效应。以下库可以帮助您实现它：
ParallaxScrollView：在 ParallexScrollView 中采用背景和前景视图的视差滚动视图。
因此，我继续修改了链接上提供的演示。如果这是您所追求的，请告诉我，我将添加有关我为使其正常工作所做的修改的详细信息。
如何得到这个：
如果在可滚动部分中除了 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）：链接。
于 2013-09-12T05:03:25.830 回答
22
我制作了一个开源库，可以满足您的需求 - https://github.com/nirhart/ParallaxScroll 您可以在此处查看示例 - https://play.google.com/store/apps/details?id=com .nirhart.parallaxscrollexample
于 2014-03-08T20:38:18.393 回答
0
您可以尝试使用FadingActionBar复制 Google Play 音乐处理其艺术家标题的方式
于 2013-07-29T19:45:39.067 回答
0
就像这样简单地完成，假设您有一个滚动视图，其中包含一个您都引用的图像视图：
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);
}
});
与滚动视图的其余部分相比，这将以一半的速度向上滚动图像视图，并检查它是否永远不会向下滚动超过应有的范围（过去 0）
于 2015-05-22T09:45:49.953 回答