本文详细介绍了如何在Android应用中使用ViewPager组件实现屏幕间的流畅切换，包括创建视图、布局文件、Fragment类、适配器及页面转换动画的定制。通过实例演示，用户可以快速掌握创建分步引导页面、实现页面间平滑过渡和自定义动画的技巧。
对于屏幕切换使用ViewPager
创建视图
创建一个布局文件，之后你将把它用作fragment的内容。
创建Fragment
创建一个Fragment类，在onCreateView（）中返回刚才创建的布局。当你需要一个新的页面
来展示给用户时，你可以创建一个该fragment的实例。
添加一个ViewPager
ViewPager在页面切换的时候设有内置的滑动手势，它能够默认展示屏幕动画。ViewPager使
用PagerAdapter显示新的页面，所以PagerAdapter将会使用你之前创建的fragment类。
开始时，先创建一个包含ViewPager的布局文件：
创建一个activity做下面的事情：
1.将有ViewPager的布局设置为content view。
2.创建一个继承于FragmentStatePagerAdapter抽象类的子类，实现getItem（）方法提供一个
ScreenSlidePageFragment的实例作为新的页面。该adapter也需要你实现getCount（）方法，
它会返回在adapter中创建的页面的数量。
3.将PagerAdapter配置到ViewPager。
4.重写设备的back键，使viewpager退回到前一个fragment。如果用户已经在第一个页面，则
返回前一个activity。
使用PageTransformer定制动画
要显示一个不同于默认动动画的动画，实现ViewPager.PageTransformer接口，并将其提供给
view pager。该接口提供了唯一一个方法transformPage（）。在每一个屏幕变换的点，该方
法都被每一个可见的页面和每一个相邻退出屏幕的页面调用。例如，如果第三个页面是可见
的，用户拖动屏幕滑向第四个界面，transformPage（）被两个页面调用，第三个和第四个页
面，在用户手势的每一步。
在你的transformPage（）的实现中，你可以通过基于当前页面的位置确定哪个页面将要被显
示，来创建定制的动画，当前页面的位置可由transformPage（）的参数确定。
该位置参数明确了相对屏幕中心位置的页面。这是一个动态变化的参数，随着用户滑动屏幕
而变化。当一个页面充满整个屏幕时，它的位置是0.当一个页面从屏幕的右侧退出时，其位
置为1.如果用户滑动到第一页和第二页的中间时，第一页的位置为-0.5，第二页的位置为0.5。
基于在屏幕上页面的位置，你可以通过使用setAlpha （ ） ， setTranslationX （ ） ，或
setScaleY （）方法设置页面属性，来创建自定义动画。
当你有一个PageTransformer的实现时，调用setPageTransformer（）方法来提供自定义的动
画。
Zoom-out页面变换
深度页面变换
创建视图
创建一个布局文件，之后你将把它用作fragment的内容。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<com.example.android.animationsdemo.ScrollView
xmlns:android=
"http://schemas.android.com/apk/res/android"
android:id=
"@+id/content"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
>
<TextView style=
"?android:textAppearanceMedium"
android:padding=
"16dp"
android:lineSpacingMultiplier=
"1.2"
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:text=
"@string/lorem_ipsum"
/>
</com.example.android.animationsdemo.ScrollView>
|
创建Fragment
创建一个Fragment类，在onCreateView（）中返回刚才创建的布局。当你需要一个新的页面
来展示给用户时，你可以创建一个该fragment的实例。
|
01
02
03
04
05
06
07
08
09
10
11
|
public
class
ScreenSlidePageFragment
extends
Fragment {
@Override
public
View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.fragment_screen_slide_page, container,
false
);
return
rootView;
}
}
|
添加一个ViewPager
ViewPager在页面切换的时候设有内置的滑动手势，它能够默认展示屏幕动画。ViewPager使
用PagerAdapter显示新的页面，所以PagerAdapter将会使用你之前创建的fragment类。
开始时，先创建一个包含ViewPager的布局文件：
|
01
02
03
04
05
|
<android.support.v4.view.ViewPager
xmlns:android=
"http://schemas.android.com/apk/res/android"
android:id=
"@+id/pager"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
/>
|
创建一个activity做下面的事情：
1.将有ViewPager的布局设置为content view。
2.创建一个继承于FragmentStatePagerAdapter抽象类的子类，实现getItem（）方法提供一个
ScreenSlidePageFragment的实例作为新的页面。该adapter也需要你实现getCount（）方法，
它会返回在adapter中创建的页面的数量。
3.将PagerAdapter配置到ViewPager。
4.重写设备的back键，使viewpager退回到前一个fragment。如果用户已经在第一个页面，则
返回前一个activity。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
public
class
ScreenSlidePagerActivity
extends
FragmentActivity {
/**
* The number of pages (wizard steps) to show in this demo.
*/
private
static
final
int
NUM_PAGES =
5
;
/**
* The pager widget, which handles animation and allows swiping horizontally to access previous
* and next wizard steps.
*/
private
ViewPager mPager;
/**
* The pager adapter, which provides the pages to the view pager widget.
*/
private
PagerAdapter mPagerAdapter;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_screen_slide_pager);
// Instantiate a ViewPager and a PagerAdapter.
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter =
new
ScreenSlidePagerAdapter(getFragmentManager());
mPager.setAdapter(mPagerAdapter);
}
@Override
public
void
onBackPressed() {
if
(mPager.getCurrentItem() ==
0
) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.
super
.onBackPressed();
}
else
{
// Otherwise, select the previous step.
mPager.setCurrentItem(mPager.getCurrentItem() -
1
);
}
}
/**
* A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
* sequence.
*/
private
class
ScreenSlidePagerAdapter
extends
FragmentStatePagerAdapter {
public
ScreenSlidePagerAdapter(FragmentManager fm) {
super
(fm);
}
@Override
public
Fragment getItem(
int
position) {
return
new
ScreenSlidePageFragment();
}
@Override
public
int
getCount() {
return
NUM_PAGES;
}
}
}
|
使用PageTransformer定制动画
要显示一个不同于默认动动画的动画，实现ViewPager.PageTransformer接口，并将其提供给
view pager。该接口提供了唯一一个方法transformPage（）。在每一个屏幕变换的点，该方
法都被每一个可见的页面和每一个相邻退出屏幕的页面调用。例如，如果第三个页面是可见
的，用户拖动屏幕滑向第四个界面，transformPage（）被两个页面调用，第三个和第四个页
面，在用户手势的每一步。
在你的transformPage（）的实现中，你可以通过基于当前页面的位置确定哪个页面将要被显
示，来创建定制的动画，当前页面的位置可由transformPage（）的参数确定。
该位置参数明确了相对屏幕中心位置的页面。这是一个动态变化的参数，随着用户滑动屏幕
而变化。当一个页面充满整个屏幕时，它的位置是0.当一个页面从屏幕的右侧退出时，其位
置为1.如果用户滑动到第一页和第二页的中间时，第一页的位置为-0.5，第二页的位置为0.5。
基于在屏幕上页面的位置，你可以通过使用setAlpha （ ） ， setTranslationX （ ） ，或
setScaleY （）方法设置页面属性，来创建自定义动画。
当你有一个PageTransformer的实现时，调用setPageTransformer（）方法来提供自定义的动
画。
|
01
02
03
|
ViewPager pager = (ViewPager) findViewById(R.id.pager);
...
pager.setPageTransformer(
true
,
new
ZoomOutPageTransformer());
|
Zoom-out页面变换
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
public
class
ZoomOutPageTransformer
implements
ViewPager.PageTransformer {
private
static
float
MIN_SCALE =
0
.85f;
private
static
float
MIN_ALPHA =
0
.5f;
public
void
transformPage(View view,
float
position) {
int
pageWidth = view.getWidth();
int
pageHeight = view.getHeight();
if
(position < -
1
) {
// [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(
0
);
}
else
if
(position <=
1
) {
// [-1,1]
// Modify the default slide transition to shrink the page as well
float
scaleFactor = Math.max(MIN_SCALE,
1
- Math.abs(position));
float
vertMargin = pageHeight * (
1
- scaleFactor) /
2
;
float
horzMargin = pageWidth * (
1
- scaleFactor) /
2
;
if
(position <
0
) {
view.setTranslationX(horzMargin - vertMargin /
2
);
}
else
{
view.setTranslationX(-horzMargin + vertMargin /
2
);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(
1
- MIN_SCALE) * (
1
- MIN_ALPHA));
}
else
{
// (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(
0
);
}
}
}
|
深度页面变换
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
public
class
DepthPageTransformer
implements
ViewPager.PageTransformer {
private
static
float
MIN_SCALE =
0
.75f;
public
void
transformPage(View view,
float
position) {
int
pageWidth = view.getWidth();
if
(position < -
1
) {
// [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(
0
);
}
else
if
(position <=
0
) {
// [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(
1
);
view.setTranslationX(
0
);
view.setScaleX(
1
);
view.setScaleY(
1
);
}
else
if
(position <=
1
) {
// (0,1]
// Fade the page out.
view.setAlpha(
1
- position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float
scaleFactor = MIN_SCALE
+ (
1
- MIN_SCALE) * (
1
- Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
else
{
// (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(
0
);
}
}
}
|
扫一扫
3141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
