Android 具有视差背景图像的 ViewPager
Android ViewPager With Parallax Background Image
我想在具有视图寻呼机的 Activity 中制作背景图像的视差滚动效果,图像应该根据 ViewPager swipe/slide 滚动。
我已经尝试使用
https://github.com/andraskindler/parallaxviewpager
它不工作它显示空白背景而不是显示图像。
这张 gif 描述了我的要求:
请帮助我
使用HorizontalScrollView
和ViewPager.addOnPageChangeListener
方法。
下面是示例。
在MainActivity.java中:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final HorizontalScrollView scrollView = (HorizontalScrollView) findViewById(R.id.scroll_view);
final ImageView imageView = (ImageView) findViewById(R.id.background);
final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int x = (int) ((viewPager.getWidth() * position + positionOffsetPixels) * computeFactor());
scrollView.scrollTo(x, 0);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
private float computeFactor() {
return (imageView.getWidth() - viewPager.getWidth()) /
(float)(viewPager.getWidth() * (viewPager.getAdapter().getCount() - 1));
}
});
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
在布局文件中 (activity_main.xml):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<HorizontalScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="@+id/background"
android:layout_width="1000dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/image"/>
</FrameLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
我想在具有视图寻呼机的 Activity 中制作背景图像的视差滚动效果,图像应该根据 ViewPager swipe/slide 滚动。
我已经尝试使用 https://github.com/andraskindler/parallaxviewpager 它不工作它显示空白背景而不是显示图像。
这张 gif 描述了我的要求:
请帮助我
使用HorizontalScrollView
和ViewPager.addOnPageChangeListener
方法。
下面是示例。
在MainActivity.java中:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final HorizontalScrollView scrollView = (HorizontalScrollView) findViewById(R.id.scroll_view);
final ImageView imageView = (ImageView) findViewById(R.id.background);
final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int x = (int) ((viewPager.getWidth() * position + positionOffsetPixels) * computeFactor());
scrollView.scrollTo(x, 0);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
private float computeFactor() {
return (imageView.getWidth() - viewPager.getWidth()) /
(float)(viewPager.getWidth() * (viewPager.getAdapter().getCount() - 1));
}
});
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
在布局文件中 (activity_main.xml):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<HorizontalScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="@+id/background"
android:layout_width="1000dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/image"/>
</FrameLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>