服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android中ViewPager组件的基本用法及实现图片切换的示例

Android中ViewPager组件的基本用法及实现图片切换的示例

2021-07-02 16:0551kata Android

这篇文章主要介绍了Android中ViewPager组件的基本用法及实现图片切换的示例,ViewPager主要被用来实现滑动切换效果,需要的朋友可以参考下

viewpager是android-support-v4.jar包里的组件。在布局文件里标签需要连包名一起

写全称<android.support.v4.view.viewpager />

基本用法

viewpager的基本用法我概括为三步

第一步 在主布局文件里放一个viewpager组件

第二步 为每个页面建立布局文件,把界面写好

第三步 在主activity里获取viewpager组件,并为它设定adapter。

adapter详细讲讲,viewpager对应的adapter继承自pageradapter,

也是android.support.v4.view包里的,继承类需要实现四个方法:

  • int getcount():返回页面数目
  • object instantiateitem(viewgroup,int position):创建position位置的页面视图,加入到viewgroup中,并返回该视图的key。key可以是该视图,也可以是其他唯一与该视图对应的对象:
  • boolean isviewfromobject(view,object):判断object所代表的key是否对应指定的view。
  • void destroyitem(viewgroup,int position,object):从viewgroup里删除position位置的view。

我们先用layoutinflater将前面为每个页面建立的界面加载进来,并放在一个arraylist之类的容器里面。然后在pageradapter的这四个方法里,我们操作的,就是与这些页面对应的view。

使用viewpager组件实现图片切换
上面说的这些步骤可能听起来挺空洞的,下面我们来看这个使用viewpager组件实现图片切换的实例:
在很多app中,尤其是第一次安装启动后,都会出现几个图片进行一些app的介绍和说明,图片可以随着滑动而切换。

我们这里利用 viewpager组件来演示如何实现这一点。

1、创建一个app工程,默认创建一个主 activity

2、设置该activity的布局文件activity_main.xml内容如下:

?
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
<?xml version="1.0" encoding="utf-8"?>
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
   
  <android.support.v4.view.viewpager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
     
  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
  
    <linearlayout
      android:id="@+id/tagview"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignparentbottom="true"
      android:layout_marginbottom="20dp"
      android:gravity="center_horizontal"
      android:orientation="horizontal" >
    </linearlayout>
  </relativelayout>
 
</framelayout>

因为我们希望再切换图片上,能有一些点点形状的图标(或者数字)显示当前图片。所以这里的activity采用了framelayout布局(可以实现view重叠放置)。

第一个控件就是viewpager (注意viewpager 是在support.v4包中的,新的andorid中并没有移植该组件)。

第二个控件是放置一个relativelayout,其中放置一个linearlayout(位于屏幕的底部位置),该linearlayout采用水平布局,用来放置小的图标。

3、准备图片

准备5张用于切换显示的图片,如 pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg、pic5.jpg,再准备两个小图标图片page_current.png、page_not_current.png。

将这些图片放到drawable-hdpi目录下(或相应尺寸的drawable目录下)。

4、编写activity的代码

?
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package com.example.showviewpager;
 
import java.util.arraylist;
 
import android.app.activity;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.menu;
import android.view.menuitem;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.imageview.scaletype;
import android.widget.linearlayout;
import android.widget.linearlayout.layoutparams;
 
public class mainactivity extends activity {
 
  private static final int view_num = 5;
  private viewpager viewpager;
  private imageview[] tagimageviews = new imageview[view_num];
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    addtagimage();
    initviewpager();
  }
 
  private void addtagimage() {
    linearlayout layout = (linearlayout)findviewbyid(r.id.tagview);
    linearlayout.layoutparams params = new linearlayout.layoutparams(
     linearlayout.layoutparams.wrap_content, linearlayout.layoutparams.wrap_content);
    params.setmargins(15, 0, 0, 0);
    for (int i = 0; i < view_num; i++) {
      imageview tagimageview = new imageview(this);
      tagimageview.setlayoutparams(params);
      tagimageviews[i] = tagimageview;
      if (i == 0) {
        tagimageview.setbackgroundresource(r.drawable.page_current);
      } else {
        tagimageview.setbackgroundresource(r.drawable.page_not_current);
      }
 
      layout.addview(tagimageview);
    }
  }
   
  private void initviewpager() {
    viewpager = (viewpager) findviewbyid(r.id.viewpager);
    viewpager.setadapter(new myadapter());
    viewpager.setonpagechangelistener(new onpagechangelistener() {
      @override
      public void onpageselected(int arg0) {
        for (int i = 0; i < tagimageviews.length; i++) {
          if (i == arg0 % view_num) {
            tagimageviews[i].setbackgroundresource(r.drawable.page_current);
          } else {
            tagimageviews[i].setbackgroundresource(r.drawable.page_not_current);
          }
        }
      }
       
      @override
      public void onpagescrolled(int arg0, float arg1, int arg2) {
         
      }
       
      @override
      public void onpagescrollstatechanged(int arg0) {
         
      }
    });
    viewpager.setcurrentitem(0);
  }
   
  class myadapter extends pageradapter{
    private arraylist<view> viewlist;
    public myadapter(){
      viewlist = new arraylist<view>();
      viewlist.add(createpagerimageview(r.drawable.pic1));
      viewlist.add(createpagerimageview(r.drawable.pic2));
      viewlist.add(createpagerimageview(r.drawable.pic3));
      viewlist.add(createpagerimageview(r.drawable.pic4));
      viewlist.add(createpagerimageview(r.drawable.pic5));
    }
     
    private view createpagerimageview(int resid){
      layoutparams params = new layoutparams(layoutparams.match_parent, layoutparams.match_parent);
      linearlayout layout = new linearlayout(mainactivity.this);
      layout.setlayoutparams(params);
      layout.setorientation(linearlayout.vertical);
      imageview imageview = new imageview(mainactivity.this);
      imageview.setlayoutparams(params);
      imageview.setscaletype(scaletype.center_crop);
      imageview.setimageresource(resid);
      layout.addview(imageview);
      return layout;
    }
     
    @override
    public int getcount() {
      return integer.max_value;
    }
 
    @override
    public boolean isviewfromobject(view arg0, object arg1) {
      return arg0 == arg1;
    }
     
    @override
    public object instantiateitem(viewgroup container, int position) {
      ((viewpager) container).addview(viewlist.get(position % view_num),0);
      return viewlist.get(position % view_num);
    }
 
    @override
    public void destroyitem(view container, int position, object object) {
      ((viewpager) container).removeview(viewlist
          .get(position % view_num));
    }
     
  }
 
  @override
  public boolean oncreateoptionsmenu(menu menu) {
    getmenuinflater().inflate(r.menu.main, menu);
    return true;
  }
 
  @override
  public boolean onoptionsitemselected(menuitem item) {
    int id = item.getitemid();
    if (id == r.id.action_settings) {
      return true;
    }
    return super.onoptionsitemselected(item);
  }
}

5、如果需要不显示activity的标题栏,可修改manifest中的activity中的配置,设置样式为:

?
1
android:theme="@android:style/theme.black.notitlebar"
?
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
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.showviewpager"
  android:versioncode="1"
  android:versionname="1.0" >
 
  <uses-sdk
    android:minsdkversion="16"
    android:targetsdkversion="21" />
 
  <application
    android:allowbackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/apptheme" >
    <activity
      android:name=".mainactivity"
      android:label="@string/app_name"
      android:theme="@android:style/theme.black.notitlebar" >
      <intent-filter>
        <action android:name="android.intent.action.main" />
        <category android:name="android.intent.category.launcher" />
      </intent-filter>
    </activity>
  </application>
 
</manifest>

  

其它配置文件、代码等都是采用eclipse创建的默认设置。

延伸 · 阅读

精彩推荐
  • AndroidAndroid实现固定屏幕显示的方法

    Android实现固定屏幕显示的方法

    这篇文章主要介绍了Android实现固定屏幕显示的方法,实例分析了Android屏幕固定显示所涉及的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    鉴客6192021-03-27
  • AndroidAndroid实现Service获取当前位置(GPS+基站)的方法

    Android实现Service获取当前位置(GPS+基站)的方法

    这篇文章主要介绍了Android实现Service获取当前位置(GPS+基站)的方法,较为详细的分析了Service基于GPS位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    Ruthless8342021-03-31
  • Android汇总Android视频录制中常见问题

    汇总Android视频录制中常见问题

    这篇文章主要汇总了Android视频录制中常见问题,帮助大家更好地解决Android视频录制中常见的问题,需要的朋友可以参考下...

    yh_thu5192021-04-28
  • AndroidAndroid CardView+ViewPager实现ViewPager翻页动画的方法

    Android CardView+ViewPager实现ViewPager翻页动画的方法

    本篇文章主要介绍了Android CardView+ViewPager实现ViewPager翻页动画的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    Abby代黎明9602022-03-02
  • AndroidAndroid中AsyncTask详细介绍

    Android中AsyncTask详细介绍

    这篇文章主要介绍了Android中AsyncTask详细介绍,AsyncTask是一个很常用的API,尤其异步处理数据并将数据应用到视图的操作场合,需要的朋友可以参考下...

    Android开发网7452021-03-11
  • AndroidAndroid程序设计之AIDL实例详解

    Android程序设计之AIDL实例详解

    这篇文章主要介绍了Android程序设计的AIDL,以一个完整实例的形式较为详细的讲述了AIDL的原理及实现方法,需要的朋友可以参考下...

    Android开发网4642021-03-09
  • AndroidAndroid编程解析XML方法详解(SAX,DOM与PULL)

    Android编程解析XML方法详解(SAX,DOM与PULL)

    这篇文章主要介绍了Android编程解析XML方法,结合实例形式详细分析了Android解析XML文件的常用方法与相关实现技巧,需要的朋友可以参考下...

    liuhe68810052021-05-03
  • AndroidAndroid界面效果UI开发资料汇总(附资料包)

    Android界面效果UI开发资料汇总(附资料包)

    android ui界面设计,友好的界面会提高用户体验度;同时也增强了android ui界面设计的难度,本文提供了一些常用开发资料(有下载哦)感兴趣的朋友可以了解下...

    Android开发网4672021-01-03