首页 > 解决方案 > ViewPager 指示器随着整个页面向上/向下滚动

问题描述

我已经做ActivityViewPager,我也有它的适配器,它FragmentViewPager.
整个Fragment(在 XML 中)在ScrollView. 当我上下滚动页面时,指示器不会随着整个布局滚动。
我知道发生这种情况的原因(指示器在 Activity 布局内,而 ScrollView 在 Fragment XML 文件内)。
我需要一些帮助或建议如何使其滚动或任何其他解决方案如何避免这种情况,因为“起始位置”的指示器看起来不错,但是当我向下滚动时它会覆盖部分文本。
我知道这是可能的,因为我在 Instagram 上看到过,但我不知道如何实现。让我提供一些代码:

带有 ViewPager 的活动:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Album.AlbumPagerActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/album_pager_fab_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="10dp"
        android:layout_marginStart="15dp"
        android:alpha=".7"
        android:backgroundTint="@color/CKBrownie"
        android:elevation="2dp"
        android:scaleType="center"
        android:src="@drawable/back_ico"
        android:tint="@color/CKGold"
        android:translationZ="0dp"
        app:backgroundTint="@color/CKBrownie" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/album_pager_fab_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="15dp"
        android:alpha=".7"
        android:backgroundTint="@color/CKBrownie"
        android:elevation="2dp"
        android:scaleType="center"
        android:src="@drawable/forward_ico"
        android:tint="@color/CKGold"
        android:translationZ="0dp"
        app:backgroundTint="@color/CKBrownie" />

    <android.support.v4.view.ViewPager
        android:id="@+id/album_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignTop="@+id/album_view_pager"
        android:layout_marginTop="@dimen/_360sdp" />

</RelativeLayout>

分段:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/backgroudmck">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Album.PhotoFragment">


    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/photo_pager_image"
        android:layout_width="@dimen/_240sdp"
        android:layout_height="@dimen/_360sdp"
        android:layout_marginTop="@dimen/_12sdp"
        android:background="?android:attr/selectableItemBackground"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/photo_pager_image_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_24sdp"
        android:layout_marginTop="@dimen/_16sdp"
        android:layout_marginEnd="@dimen/_24sdp"
        android:gravity="left"
        android:text="Image title"
        android:textColor="#FFFFFF"
        android:textSize="22sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photo_pager_image" />

    <LinearLayout
        android:id="@+id/underline_photo_fragment"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_2sdp"
        android:layout_marginStart="@dimen/_22sdp"
        android:layout_marginTop="@dimen/_20sdp"
        android:layout_marginEnd="@dimen/_22sdp"
        android:background="@color/CKGold"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photo_pager_image_title" />

    <TextView
        android:id="@+id/photo_pager_image_technique"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_24sdp"
        android:layout_marginTop="@dimen/_8sdp"
        android:layout_marginEnd="@dimen/_24sdp"
        android:textSize="@dimen/_18sdp"
        android:text="Additional info about image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/underline_photo_fragment" />


    <TextView
        android:id="@+id/photo_pager_image_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/_24sdp"
        android:layout_marginTop="@dimen/_16sdp"
        android:layout_marginEnd="@dimen/_24sdp"
        android:layout_marginBottom="@dimen/_2sdp"
        android:textSize="@dimen/_18sdp"
        android:text="Long image description (because of this TextView I had to make it scrollable)"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photo_pager_image_technique" />

</android.support.constraint.ConstraintLayout>
</ScrollView>

适配器:

public class AlbumViewPagerAdapter extends FragmentStatePagerAdapter {

    private int number;

    public AlbumViewPagerAdapter(FragmentManager fm, int number) {
        super(fm);
        this.number = number;
    }

    @Override
    public Fragment getItem(int i) {
        PhotoFragment pf;
        Bundle bundle;

        switch (i) {

            case 0:
                bundle = new Bundle();
                bundle.putInt("num", i);
                bundle.putInt(Constants.NUMBER, number);
                pf = new PhotoFragment();
                pf.setArguments(bundle);
                return pf;
            case 1:
                bundle = new Bundle();
                bundle.putInt("num", i);
                bundle.putInt(Constants.NUMBER, number);
                pf = new PhotoFragment();
                pf.setArguments(bundle);
                return pf;
            case 2:
                bundle = new Bundle();
                bundle.putInt("num", i);
                bundle.putInt(Constants.NUMBER, number);
                pf = new PhotoFragment();
                pf.setArguments(bundle);
                return pf;
        }
        return null;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        Object obj = super.instantiateItem(container, position);

        return obj;
    }

    @Override
    public int getCount() {
        return 3;
    }

}

Instagram 应用程序在照片下方但在文本上方放置了一个ViewPagerindicator当我在“页面”之间导航时,文本和照片正在发生变化,但是当我向上/向下滚动页面时indicator,整个页面会上下移动。
也许是我的指标放置有问题?但是当我尝试把它放在里面时,Fragment我将无法将它附加到我ViewPager在里面创建的Activity

标签: androidandroid-layoutandroid-fragmentsandroid-viewpagerscrollview

解决方案


推荐阅读