Android ViewPager+Fragmentでスライドページを実現
38151 ワード
効果:
PagerDataクラス:
PagerFragmentクラス:
PagerActivity:
fragment_pager:
activity_pager:
PagerDataクラス:
1 package com.cloud.viewpagerdemo;
2
3 import java.io.Serializable;
4
5 class PagerData implements Serializable {
6
7 private int mImageResId;
8 private String mContent;
9
10 PagerData(int imageResId, String content) {
11 mImageResId = imageResId;
12 mContent = content;
13 }
14
15 public int getImageResId() {
16 return mImageResId;
17 }
18
19 public void setImageResId(int imageResId) {
20 mImageResId = imageResId;
21 }
22
23 public String getContent() {
24 return mContent;
25 }
26
27 public void setContent(String content) {
28 mContent = content;
29 }
30 }
PagerFragmentクラス:
1 package com.cloud.viewpagerdemo;
2
3 import android.graphics.Outline;
4 import android.os.Bundle;
5 import android.support.annotation.NonNull;
6 import android.support.annotation.Nullable;
7 import android.support.v4.app.Fragment;
8 import android.view.LayoutInflater;
9 import android.view.View;
10 import android.view.ViewGroup;
11 import android.view.ViewOutlineProvider;
12 import android.widget.ImageView;
13 import android.widget.TextView;
14
15 public class PagerFragment extends Fragment {
16
17 private static final String ARG_DATA = "data";
18
19 private PagerData mData;
20
21 private ImageView mImageView;
22 private TextView mContent;
23
24 /**
25 * Fragment , Fragment
26 * @param data
27 * @return Fragment
28 */
29 public static PagerFragment newInstance(PagerData data) {
30 PagerFragment fragment = new PagerFragment();
31
32 // FragmentArguments
33 Bundle args = new Bundle();
34 args.putSerializable(ARG_DATA, data);
35 fragment.setArguments(args);
36 return fragment;
37 }
38
39 @Override
40 public void onCreate(@Nullable Bundle savedInstanceState) {
41 super.onCreate(savedInstanceState);
42 mData = (PagerData) getArguments().getSerializable(ARG_DATA);
43 }
44
45 @Nullable
46 @Override
47 public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
48 @Nullable Bundle savedInstanceState) {
49 View view = inflater.inflate(R.layout.fragment_pager, container, false);
50
51 //
52 mImageView = view.findViewById(R.id.image_view);
53 mContent = view.findViewById(R.id.text_content);
54
55 //ImageView
56 ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
57 @Override
58 public void getOutline(View view, Outline outline) {
59 outline.setRoundRect(0, 0, mImageView.getWidth(), mImageView.getHeight(), 16);
60 }
61 };
62
63 mImageView.setOutlineProvider(viewOutlineProvider);
64 mImageView.setClipToOutline(true);
65 mImageView.setImageResource(mData.getImageResId());
66 mContent.setText(mData.getContent());
67
68 return view;
69 }
70 }
PagerActivity:
1 package com.cloud.viewpagerdemo;
2
3 import android.support.v4.app.Fragment;
4 import android.support.v4.app.FragmentManager;
5 import android.support.v4.app.FragmentStatePagerAdapter;
6 import android.support.v4.view.ViewPager;
7 import android.support.v7.app.AppCompatActivity;
8 import android.os.Bundle;
9 import android.widget.TextView;
10
11 import java.util.ArrayList;
12 import java.util.List;
13
14 public class PagerActivity extends AppCompatActivity {
15
16 private List mPagerData = new ArrayList<>();
17
18 private ViewPager mViewPager;
19 private TextView mTextPage;
20
21 private String page = "1 / 3";
22
23 @Override
24 protected void onCreate(Bundle savedInstanceState) {
25 super.onCreate(savedInstanceState);
26 setContentView(R.layout.activity_pager);
27
28 initData();
29
30 FragmentManager fragmentManager = getSupportFragmentManager();
31
32 mViewPager = findViewById(R.id.view_pager);
33 mTextPage = findViewById(R.id.text_page);
34 // ViewPager
35 mViewPager.setAdapter(new FragmentStatePagerAdapter(fragmentManager) {
36 @Override
37 public Fragment getItem(int position) {
38 return PagerFragment.newInstance(mPagerData.get(position));
39 }
40
41 @Override
42 public int getCount() {
43 return mPagerData.size();
44 }
45 });
46
47 //
48 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
49 @Override
50 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
51
52 }
53
54 @Override
55 public void onPageSelected(int position) {
56 //
57 page = String.valueOf(position + 1) + " / " + String.valueOf(mPagerData.size());
58 mTextPage.setText(page);
59 }
60
61 @Override
62 public void onPageScrollStateChanged(int state) {
63
64 }
65 });
66 //
67 mViewPager.setOffscreenPageLimit(3);
68 //
69 mViewPager.setCurrentItem(0);
70
71 mTextPage.setText(page);
72 }
73
74 private void initData() {
75 //
76 mPagerData.add(new PagerData(R.drawable.img_0, "Photo by Adam Krowitz"));
77 mPagerData.add(new PagerData(R.drawable.img_1, "Photo by Samuel Ferrara"));
78 mPagerData.add(new PagerData(R.drawable.img_2, "Photo by Earth"));
79 }
80 }
fragment_pager:
1 xml version="1.0" encoding="utf-8"?>
2 <android.support.constraint.ConstraintLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 xmlns:tools="http://schemas.android.com/tools"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent">
8
9 <LinearLayout
10 android:layout_width="match_parent"
11 android:layout_height="match_parent"
12 android:layout_marginBottom="32dp"
13 android:layout_marginEnd="16dp"
14 android:layout_marginStart="16dp"
15 android:layout_marginTop="16dp"
16 android:background="@drawable/pager_background"
17 android:elevation="4dp"
18 android:orientation="vertical"
19 app:layout_constraintBottom_toBottomOf="parent"
20 app:layout_constraintEnd_toEndOf="parent"
21 app:layout_constraintStart_toStartOf="parent"
22 app:layout_constraintTop_toTopOf="parent">
23
24 <ImageView
25 android:id="@+id/image_view"
26 android:layout_width="match_parent"
27 android:layout_height="0dp"
28 android:layout_margin="8dp"
29 android:layout_weight="1"
30 android:contentDescription="@null"
31 android:scaleType="centerCrop" />
32
33 <TextView
34 android:id="@+id/text_content"
35 android:layout_width="match_parent"
36 android:layout_height="125dp"
37 android:gravity="center"
38 android:padding="8dp"
39 android:textSize="18sp"
40 android:textColor="#000000"
41 tools:text="Content" />
42
43 LinearLayout>
44
45 android.support.constraint.ConstraintLayout>
activity_pager:
1 xml version="1.0" encoding="utf-8"?>
2 <android.support.constraint.ConstraintLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 xmlns:tools="http://schemas.android.com/tools"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent"
8 tools:context=".PagerActivity">
9
10 <android.support.v7.widget.Toolbar
11 android:id="@+id/toolbar"
12 android:layout_width="match_parent"
13 android:layout_height="48dp"
14 android:background="@color/colorPrimary"
15 android:elevation="4dp"
16 app:layout_constraintEnd_toEndOf="parent"
17 app:layout_constraintStart_toStartOf="parent"
18 app:layout_constraintTop_toTopOf="parent">
19
20 <TextView
21 android:layout_width="wrap_content"
22 android:layout_height="wrap_content"
23 android:layout_gravity="center"
24 android:textSize="18sp"
25 android:textColor="#FFFFFF"
26 android:text="@string/app_name" />
27
28 android.support.v7.widget.Toolbar>
29
30 <android.support.v4.view.ViewPager
31 android:id="@+id/view_pager"
32 android:layout_width="0dp"
33 android:layout_height="0dp"
34 app:layout_constraintBottom_toBottomOf="parent"
35 app:layout_constraintEnd_toEndOf="parent"
36 app:layout_constraintStart_toStartOf="parent"
37 app:layout_constraintTop_toBottomOf="@+id/toolbar">
38
39 android.support.v4.view.ViewPager>
40
41 <TextView
42 android:id="@+id/text_page"
43 android:layout_width="wrap_content"
44 android:layout_height="wrap_content"
45 android:layout_marginBottom="4dp"
46 app:layout_constraintBottom_toBottomOf="parent"
47 app:layout_constraintEnd_toEndOf="parent"
48 app:layout_constraintStart_toStartOf="@+id/toolbar"
49 tools:text="page" />
50
51 android.support.constraint.ConstraintLayout>