例如,我正在尝试创建在此网页上看到的效果
http://www.soyuzcoffee.com/ru/home
滚动显示为主要内容的部分是在大图像上滚动(用作各部分之间的分隔符的图像)
我离得很近,但如果图像比视图的高度小(图像不会填满整个屏幕),图像就会像往常一样滚动,直到到达顶部。我试图让它看起来像是静止的图像,而框架在它上面移动。
这是我的布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.CustomScrollView
android:id="@+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="@+id/image2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="@+id/image3"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.pinnedscrollview.PinnedImageView
android:id="@+id/image4"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
</com.example.pinnedscrollview.CustomScrollView>
</RelativeLayout>然后,我有一个onScrollChangedListener,它在每次滚动位置更改时运行此方法
private void handleScroll(ViewGroup source, int top) {
ViewGroup container = (ViewGroup) source.findViewById(R.id.container);
final int count = container.getChildCount();
for (int i = 0; i < count; i++) {
View item = container.getChildAt(i);
View v = null;
if(i == 0){
v = item.findViewById(R.id.image);
}else if(i == 1){
v = item.findViewById(R.id.image2);
}else if(i == 2){
v = item.findViewById(R.id.image3);
}else if(i == 3){
v = item.findViewById(R.id.image4);
}
source.getHitRect(mTempRect);
if (v != null && v.getLocalVisibleRect(mTempRect)) {
((PinnedImageView) v).reveal(source, item.getBottom(),item.getTop());
}
}
}然后,这是仅在Y方向上设置平移的direction方法
public void reveal(View scroller,int parentBottom,int parentTop) {
float previousOffset = mOffsetY;
if(parentTop - scroller.getScrollY() < 0){
mOffsetY= Math.abs(parentTop - scroller.getScrollY());
}else{
mOffsetY = Math.min(0, scroller.getHeight() - (parentBottom - scroller.getScrollY()));
}
if (previousOffset != mOffsetY) {
setTranslationY(mOffsetY);
}
}我不确定是否需要在onDraw中处理图像的Matrix并重绘位图。
有什么想法或其他方法可以让我完成类似于该网站的事情吗?
发布于 2014-04-11 05:23:59
我会将所需的图像设置为包含布局的背景图像。然后设置适当的透明胶片,并将可滚动视图放置为包含图像的父布局的子级。您甚至可以设置可滚动视图本身的背景。
然后,您可以使用条件等来调整背景图像的框架,并基于滚动位置交换图像。
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginTop="48dp"
android:background="@drawable/tmf_background"
>
<ImageView
android:src="@drawable/the_lineup_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="16.5dp"
android:contentDescription="@string/noDescription" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/tmf_sub_header" >
<TextView... />
<Button ... />
<Button... />
<Button ... />
<TextView ... />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@drawable/tmf_divider"
android:background="@android:color/transparent" >
</ListView>
</LinearLayout>这是我为True Music音乐节第一年制作的免费应用程序的xml片段。https://play.google.com/store/apps/details?id=com.fyresite.truemusicapp在那里,我们有一个背景图像,当内容滚动到它上面时它保持静态。把它和你的滚动位置监听器结合起来,你至少可以在滚动时改变背景图像。然后,您可以尝试转换背景图像以获得站点上的滚动效果。
你可能会发现这个问题很有用,Android: Moving background image while navigating through Views
https://stackoverflow.com/questions/22998305
复制相似问题