Android切换页面效果的实现二：WebView+ViewPager

最新推荐文章于 2025-03-28 13:57:53 发布

Jlins

最新推荐文章于 2025-03-28 13:57:53 发布

阅读量1.1w

点赞数

本文介绍如何利用 ViewPager 控件实现类似 Zaker 的文章阅读效果，并提供了文章排版 HTML 代码生成工具 KompoZer 的推荐。通过将网页视图放入列表并与 PagerAdapter 配合使用，可以轻松实现屏幕间的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

由于第一种切换页面的效果不能满足项目的要求，于是又找到另外一种更简单好用的方法来实现，顿时感觉，做项目开发，找到一种合适的方法能够减少很多时间，（刚开始自己弄的时候还想着自己写手势识别的方法呢）……

布局很简单，用到的是ViewPager控件，它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support-v4.jar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbars="none" />


</RelativeLayout>

实现效果：类似zaker的文章阅读的效果，采用html对文章进行排版，图文并排很容易实现，推荐一个文章排版的html代码自动生成的工具：KompoZer，下载地址：http://sourceforge.net/projects/kompozer/

主体Activity主要是将一个个页面的webview放到一个List里面，然后viewpager控件有一个PagerAdapter的适配器，实现很简单

 1 package cn.edu.stu.webview_viewpager;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 import android.os.Parcelable;
 9 import android.support.v4.view.PagerAdapter;
10 import android.support.v4.view.ViewPager;
11 import android.util.Log;
12 import android.view.View;
13 import android.view.Window;
14 import android.webkit.WebView;
15 
16 public class MainActivity extends Activity {
17     
18     private ViewPager vpArticle;
19     private MyPagerAdapter myAdapter;
20     private List<View> mListViews;
21     
22     @Override
23     public void onCreate(Bundle savedInstanceState) {
24         super.onCreate(savedInstanceState);
25         requestWindowFeature(Window.FEATURE_NO_TITLE);
26         setContentView(R.layout.main);
27         
28         myAdapter = new MyPagerAdapter();
29         vpArticle = (ViewPager) findViewById(R.id.viewpager);
30         vpArticle.setAdapter(myAdapter);
31         
32         mListViews = new ArrayList<View>();
33         addView(mListViews, "file:///android_asset/experience/exp_article2.html");
34         addView(mListViews, "file:///android_asset/experience/exp_article6.html");
35         addView(mListViews, "file:///android_asset/experience/exp_article10.html");
36     }
37     
38     private void addView(List<View> viewList,String url)
39     {
40         WebView webView=new WebView(this);
41         webView.loadUrl(url);
42         viewList.add(webView);
43     }
44     
45     private class MyPagerAdapter extends PagerAdapter {
46 
47         @Override
48         public void destroyItem(View arg0, int arg1, Object arg2) {
49             Log.d("k", "destroyItem");
50             ((ViewPager) arg0).removeView(mListViews.get(arg1));
51         }
52 
53         @Override
54         public void finishUpdate(View arg0) {
55             Log.d("k", "finishUpdate");
56         }
57 
58         @Override
59         public int getCount() {
60             Log.d("k", "getCount");
61             return mListViews.size();
62         }
63 
64         @Override
65         public Object instantiateItem(View arg0, int arg1) {
66             Log.d("k", "instantiateItem");
67             ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
68             return mListViews.get(arg1);
69         }
70 
71         @Override
72         public boolean isViewFromObject(View arg0, Object arg1) {
73             Log.d("k", "isViewFromObject");
74             return arg0 == (arg1);
75         }
76 
77         @Override
78         public void restoreState(Parcelable arg0, ClassLoader arg1) {
79             Log.d("k", "restoreState");
80         }
81 
82         @Override
83         public Parcelable saveState() {
84             Log.d("k", "saveState");
85             return null;
86         }
87 
88         @Override
89         public void startUpdate(View arg0) {
90             Log.d("k", "startUpdate");
91         }
92     }
93 }