您好,登錄后才能下訂單哦!
怎么在Android中使用ViewPager 和 Fragment實(shí)現(xiàn)滑動(dòng)頁(yè)面效果?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
PagerData類:
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類:
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; /** * 通過(guò)靜態(tài)方法獲取Fragment實(shí)例,向Fragment傳參數(shù) * @param data 數(shù)據(jù) * @return Fragment */ public static PagerFragment newInstance(PagerData data) { PagerFragment fragment = new PagerFragment(); //使用FragmentArguments傳遞參數(shù) 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設(shè)置圓角 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:
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); //設(shè)置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(); } }); //監(jiān)聽頁(yè)面改變 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //頁(yè)面選中 page = String.valueOf(position + 1) + " / " + String.valueOf(mPagerData.size()); mTextPage.setText(page); } @Override public void onPageScrollStateChanged(int state) { } }); //設(shè)置緩存頁(yè)數(shù) mViewPager.setOffscreenPageLimit(3); //設(shè)置默認(rèn)頁(yè) mViewPager.setCurrentItem(0); mTextPage.setText(page); } private void initData() { //添加三項(xiàng)數(shù)據(jù) 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:
<?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:
<?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>
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。