效果：
PagerData类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
package com.cloud.viewpagerdemo;import java.io.Serializable;class PagerData implements Serializable { private int mImageResId; private String mContent; PagerData(int imageResId, String content) { mImageResId = imageResId; mContent = content; } public int getImageResId() { return mImageResId; } public void setImageResId(int imageResId) { mImageResId = imageResId; } public String getContent() { return mContent; } public void setContent(String content) { mContent = content; }} |
PagerFragment类：
|
1
2
3
4
5
6
7
8
9
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
|
package com.cloud.viewpagerdemo;import android.graphics.Outline;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewOutlineProvider;import android.widget.ImageView;import android.widget.TextView;public class PagerFragment extends Fragment { private static final String ARG_DATA = "data"; private PagerData mData; private ImageView mImageView; private TextView mContent; /** * 通过静态方法获取Fragment实例，向Fragment传参数 * @param data 数据 * @return Fragment */ public static PagerFragment newInstance(PagerData data) { PagerFragment fragment = new PagerFragment(); //使用FragmentArguments传递参数 Bundle args = new Bundle(); args.putSerializable(ARG_DATA, data); fragment.setArguments(args); return fragment; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); mData = (PagerData) getArguments().getSerializable(ARG_DATA); } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_pager, container, false); //绑定控件 mImageView = view.findViewById(R.id.image_view); mContent = view.findViewById(R.id.text_content); //ImageView设置圆角 ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { outline.setRoundRect(0, 0, mImageView.getWidth(), mImageView.getHeight(), 16); } }; mImageView.setOutlineProvider(viewOutlineProvider); mImageView.setClipToOutline(true); mImageView.setImageResource(mData.getImageResId()); mContent.setText(mData.getContent()); return view; }} |
PagerActivity:
|
1
2
3
4
5
6
7
8
9
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
61
62
63
|
package com.cloud.viewpagerdemo;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class PagerActivity extends AppCompatActivity { private List<PagerData> mPagerData = new ArrayList<>(); private ViewPager mViewPager; private TextView mTextPage; private String page = "1 / 3"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_pager); initData(); FragmentManager fragmentManager = getSupportFragmentManager(); mViewPager = findViewById(R.id.view_pager); mTextPage = findViewById(R.id.text_page); //设置ViewPager适配器 mViewPager.setAdapter(new FragmentStatePagerAdapter(fragmentManager) { @Override public Fragment getItem(int position) { return PagerFragment.newInstance(mPagerData.get(position)); } @Override public int getCount() { return mPagerData.size(); } }); //监听页面改变 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //页面选中 page = String.valueOf(position + 1) + " / " + String.valueOf(mPagerData.size()); mTextPage.setText(page); } @Override public void onPageScrollStateChanged(int state) { } }); //设置缓存页数 mViewPager.setOffscreenPageLimit(3); //设置默认页 mViewPager.setCurrentItem(0); mTextPage.setText(page); } private void initData() { //添加三项数据 mPagerData.add(new PagerData(R.drawable.img_0, "Photo by Adam Krowitz")); mPagerData.add(new PagerData(R.drawable.img_1, "Photo by Samuel Ferrara")); mPagerData.add(new PagerData(R.drawable.img_2, "Photo by Earth")); }} |
fragment_pager：
|
1
2
3
4
5
6
7
8
9
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
|
<?xml version="1.0" encoding="utf-8"?><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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="32dp" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:background="@drawable/pager_background" android:elevation="4dp" android:orientation="vertical" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <ImageView android:id="@+id/image_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_margin="8dp" android:layout_weight="1" android:contentDescription="@null" android:scaleType="centerCrop" /> <TextView android:id="@+id/text_content" android:layout_width="match_parent" android:layout_height="125dp" android:gravity="center" android:padding="8dp" android:textSize="18sp" android:textColor="#000000" tools:text="Content" /> </LinearLayout></android.support.constraint.ConstraintLayout> |
activity_pager：
|
1
2
3
4
5
6
7
8
9
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
|
<?xml version="1.0" encoding="utf-8"?><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=".PagerActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="48dp" android:background="@color/colorPrimary" android:elevation="4dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="18sp" android:textColor="#FFFFFF" android:text="@string/app_name" /> </android.support.v7.widget.Toolbar> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/toolbar"> </android.support.v4.view.ViewPager> <TextView android:id="@+id/text_page" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/toolbar" tools:text="page" /></android.support.constraint.ConstraintLayout> |
总结
以上所述是小编给大家介绍的Android ViewPager + Fragment实现滑动页面效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：https://www.cnblogs.com/cloudfloating/archive/2018/06/06/9147143.html
