android - ViewPager 指示器随着整个页面向上/向下滚动
问题描述
我已经做Activity
了ViewPager
,我也有它的适配器,它Fragment
由ViewPager
.
整个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 应用程序在照片下方但在文本上方放置了一个ViewPager
,indicator
当我在“页面”之间导航时,文本和照片正在发生变化,但是当我向上/向下滚动页面时indicator
,整个页面会上下移动。
也许是我的指标放置有问题?但是当我尝试把它放在里面时,Fragment
我将无法将它附加到我ViewPager
在里面创建的Activity
解决方案
推荐阅读
- python - 从 QGraphicsView 的场景中删除 QGraphicsSimpleTextItem 不起作用
- image - wxPython - 将按钮固定到图像中的给定位置
- symfony - 如何扩展 FOSRestBundle RequestBodyParamConverter?
- grep - 使用多个标志时,Grep 不返回此类文件或目录
- amazon-web-services - 如何使用胶水启动 AWS 云形成堆栈?
- spring-boot - 返回一个空对象 Java Spring Boot REST
- typescript - 发送电子邮件时 MODULE_NOT_FOUND 错误
- c# - 等待信号量可能仍在同一线程上执行代码
- c# - 用 \ 替换字符串在 Visual Studio 2019 中不起作用
- reactjs - 部署我的 React 应用程序时应该使用哪种 AWS 服务?