Android：ViewPage+Fragment滑动窗口简单应用

**Android：ViewPage+Fragment滑动窗口简单应用**

在 Android 开发中，使用 ViewPage 和 Fragment 来实现滑动窗口的效果是非常常见的一种设计模式。这种模式可以让用户在不同的界面之间进行滑动切换，从而提高用户体验和交互性。

**什么是ViewPage？**

ViewPage 是一个用于显示多个页面的控件，它可以通过滑动来切换页面。每个页面都是一个 Fragment，通过 ViewPage 来管理这些 Fragment 的生命周期。

**简单应用场景**

我们来看一个简单的应用场景：一个新闻阅读器app，用户可以在不同的新闻界面之间进行滑动切换。

**实现步骤**

1. **创建Fragment**

首先，我们需要创建几个 Fragment，每个 Fragment 都代表一个新闻界面。例如，我们可以创建三个 Fragment：`NewsFragmentA`, `NewsFragmentB`, 和 `NewsFragmentC`.

java// NewsFragmentA.javapublic class NewsFragmentA extends Fragment {
 @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {
 // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_news_a, container, false);
 }
}

// NewsFragmentB.javapublic class NewsFragmentB extends Fragment {
 @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {
 // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_news_b, container, false);
 }
}

// NewsFragmentC.javapublic class NewsFragmentC extends Fragment {
 @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {
 // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_news_c, container, false);
 }
}

2. **创建ViewPage**

接下来，我们需要创建一个 ViewPage 来管理这些 Fragment。我们可以在 Activity 中创建一个 ViewPage。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);
 }
}

3. **创建FragmentPagerAdapter**

我们需要创建一个 FragmentPagerAdapter 来管理这些 Fragment。

java// MyFragmentPagerAdapter.javapublic class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 public MyFragmentPagerAdapter(FragmentManager fm) {
 super(fm);
 }

 @Override public Fragment getItem(int position) {
 switch (position) {
 case0:
 return new NewsFragmentA();
 case1:
 return new NewsFragmentB();
 case2:
 return new NewsFragmentC();
 default:
 return null;
 }
 }

 @Override public int getCount() {
 return3;
 }
}

4. **滑动窗口效果**

现在，我们可以在 Activity 中实现滑动窗口的效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);
 }
}

5. **页面切换效果**

我们可以在 Activity 中实现页面切换的效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);

 // Set the page transformer mViewPager.setPageTransformer(true, new DepthPageTransformer());
 }
}

// DepthPageTransformer.javapublic class DepthPageTransformer implements ViewPager.PageTransformer {
 @Override public void transformPage(View view, float position) {
 if (position < -1 || position >1) {
 return;
 }

 final int pageWidth = view.getWidth();
 final int pageHeight = view.getHeight();

 if (position ==0) {
 // No need to do anything here return;
 } else if (position < 0) {
 // Move the page to the left view.setTranslationX(-pageWidth * position);
 } else {
 // Move the page to the right view.setTranslationX(pageWidth * position);
 }
 }
}

6. **页面切换动画**

我们可以在 Activity 中实现页面切换的动画效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);

 // Set the page transformer mViewPager.setPageTransformer(true, new DepthPageTransformer());

 // Set the page animation mViewPager.setPageAnimation(R.anim.slide_in_left);
 }
}

// slide_in_left.xml<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android=" /> <translate android:duration="@integer/duration_short"
 android:fromXDelta="-100%p"
 android:toXDelta="0%p"/>
</set>

7. **页面切换效果**

我们可以在 Activity 中实现页面切换的效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);

 // Set the page transformer mViewPager.setPageTransformer(true, new DepthPageTransformer());

 // Set the page animation mViewPager.setPageAnimation(R.anim.slide_in_left);
 }
}

8. **页面切换效果**

我们可以在 Activity 中实现页面切换的效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);

 // Set the page transformer mViewPager.setPageTransformer(true, new DepthPageTransformer());

 // Set the page animation mViewPager.setPageAnimation(R.anim.slide_in_left);
 }
}

9. **页面切换效果**

我们可以在 Activity 中实现页面切换的效果。

java// MainActivity.javapublic class MainActivity extends AppCompatActivity {
 private ViewPager mViewPager;

 @Override protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Create a ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);

 // Create a FragmentPagerAdapter MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
 mViewPager.setAdapter(adapter);

 // Set the page margin mViewPager.setPageMargin(10);

 // Set the page transformer mViewPager.setPageTransformer(true, new DepthPageTransformer());

 // Set the page animation mViewPager.setPageAnimation(R.anim.slide_in_left);
 }
}

**总结**

在本文中，我们讲解了如何使用 ViewPage 和 Fragment 来实现滑动窗口的效果。我们创建了一个简单的应用场景：一个新闻阅读器app，用户可以在不同的新闻界面之间进行滑动切换。我们一步步地讲解了如何创建 Fragment、ViewPage、FragmentPagerAdapter 等组件，并且展示了如何使用这些组件来实现页面切换效果和动画效果。