当前位置： 移动技术网 > IT编程>移动开发>Android > Android中ViewPager组件的基本用法及实现图片切换的示例

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

偶是霸道公主,喷泉制作公司,防眩板

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内容如下：

<?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的代码

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中的配置,设置样式为：

android:theme="@android:style/theme.black.notitlebar" 


<?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创建的默认设置。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网