我如何在我的滚动视图中调整我的图像视图的大小，因为它在这个图像中完成？

Posted 2023-04-18

【中文标题】我如何在我的滚动视图中调整我的图像视图的大小，因为它在这个图像中完成？

【英文标题】：How do I resize my imageview within my scrollview as it is done in this image?

【发布时间】：2015-03-17 14:46:22

【问题描述】：

我创建了一个滚动视图，并在其中放置了一个图像视图。我希望滚动它以与下图相同的方式调整大小，但到目前为止我收效甚微。

在我的尝试中，图像在滚动时调整了大小，但是调整大小后还有剩余空间。您将如何修改以下内容：

图片：

到目前为止我的代码：

activity_main.xml

<ImageView
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            android:layout_
            android:layout_
            android:paddingTop="0dp"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:scaleType="fitXY"
            android:id="@+id/contactPic"
            android:src="@drawable/stock"
            android:clickable="true"/>

MainActivity：

@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) 
    final ImageView contactPicture = (ImageView) findViewById(R.id.contactPic);
    final RelativeLayout contactLayout = (RelativeLayout) findViewById(R.id.ContactRLayout);
    if (scrollView == contactScrollView) 
        View view = (View) scrollView.getChildAt(scrollView.getChildCount() - 1);
        int distanceFromPageEnd = (view.getBottom() - (scrollView.getHeight() + scrollView.getScrollY()));

        Log.e("onScrollChanged", "distance from bottom = " + String.valueOf(distanceFromPageEnd));
        if (distanceFromPageEnd >= 1408)
        
       contactPicture.getLayoutParams().height = (distanceFromPageEnd - 1408);
        contactPicture.requestLayout();
        
    

ScrollViewListener：

    public interface ScrollViewListener 

        void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);

    

ObservableScrollView：

public class ObservableScrollView extends ScrollView 

    private ScrollViewListener scrollViewListener = null;

    public ObservableScrollView(Context context) 
        super(context);
    

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) 
        super(context, attrs, defStyle);
    

    public ObservableScrollView(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    public void setScrollViewListener(ScrollViewListener scrollViewListener) 
        this.scrollViewListener = scrollViewListener;
    

    public void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) 
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
    

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) 
        super.onScrollChanged(x, y, oldx, oldy);
        if(scrollViewListener != null) 
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        
    

【问题讨论】：

检查 iosched 应用源...

该项目在构建时似乎失败了，当我访问您描述的 xml 时，页面上显示的所有内容都是带有分隔符的单词扬声器。到目前为止，您建议的项目没有任何帮助。你不知道如何解决我的问题

那一定是视差滚动视图

您不应该调整 ImageView 的大小，而应该相对于 ScrollView 滚动或平移它。这样它将保持一致的大小。

这是一种视差效果。您应该使用视差滚动库github.com/nirhart/ParallaxScroll 和淡入淡出操作栏github.com/ManuelPeinado/FadingActionBar 之类的东西来获得确切的效果

【参考方案1】：

下面有一个简单的例子展示了如何实现视差效果。

首先，将您的ImageView 和其他视图放入FrameLayout：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView"
    android:layout_
    android:layout_>

    <FrameLayout
        android:id="@+id/flWrapper"
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/contactPic"
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:src="@drawable/stock" />

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_marginTop="@dimen/contact_photo_height">

            <!-- Other Views -->

        </LinearLayout>

    </FrameLayout>
</ScrollView>

LinearLayout 的上边距等于ImageViews 的高度（在我们的示例中为@dimen/contact_photo_height）。

那么我们应该监听ScrollView的滚动位置并改变ImageView的位置：

@Override
protected void onCreate(Bundle savedInstanceState) 
    <...>

    mScrollView = (ScrollView) findViewById(R.id.scrollView);
    mPhotoIV = (ImageView) findViewById(R.id.contactPic);
    mWrapperFL = (FrameLayout) findViewById(R.id.flWrapper);

    mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ScrollPositionObserver());

    <...>


private class ScrollPositionObserver implements ViewTreeObserver.OnScrollChangedListener 

    private int mImageViewHeight;

    public ScrollPositionObserver() 
        mImageViewHeight = getResources().getDimensionPixelSize(R.dimen.contact_photo_height);
    

    @Override
    public void onScrollChanged() 
        int scrollY = Math.min(Math.max(mScrollView.getScrollY(), 0), mImageViewHeight);

        // changing position of ImageView
        mPhotoIV.setTranslationY(scrollY / 2);

        // alpha you could set to ActionBar background
        float alpha = scrollY / (float) mImageViewHeight;
    

【讨论】：

我认为框架布局只能有一个孩子。

@Suragch 框架布局可以有多个子级。这就是框架布局的重点，它将每个子布局叠加在一起

好的，我以前没有这样用过。来自文档：“FrameLayout 旨在阻止屏幕上的一个区域以显示单个项目。通常，FrameLayout 应该用于保存单个子视图，因为可能很难组织子视图以一种可缩放到不同屏幕尺寸的方式查看视图，而子项不会相互重叠。但是，您可以将多个子项添加到 FrameLayout，并通过为每个子项分配重力来控制它们在 FrameLayout 中的位置，使用android:layout_gravity 属性。”

很高兴看到这行得通，但它会使帧速率降低到无法接受的程度。有人知道如何改进吗？