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

作者:51kata 时间:2021-09-28 17:49:42 

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

标签:Android,ViewPager
0
投稿

猜你喜欢

  • winform获取当前名称实例汇总

    2023-03-22 17:03:18
  • 实例分析java中重载与重写的区别

    2021-09-11 01:49:38
  • android中UI主线程与子线程深入分析

    2022-02-06 15:19:25
  • C#/Java连接sqlite与使用技巧

    2021-07-10 08:34:05
  • 关于SpringSecurity配置403权限访问页面的完整代码

    2023-11-13 02:03:59
  • Java日期与时间类原理解析

    2021-07-20 14:00:36
  • springboot 自定义启动器的实现

    2021-06-05 00:33:14
  • Android基于OpenCV实现QR二维码检测

    2021-12-13 07:56:39
  • 文件路径正确,报java.io.FileNotFoundException异常的原因及解决办法

    2022-01-28 04:52:57
  • C++在vscode中的多文件编程问题解读

    2021-06-14 13:37:04
  • 浅谈C#中的委托、事件与异步

    2022-04-25 23:05:34
  • Java 中的垃圾回收机制详解

    2023-01-11 19:32:34
  • C#资源释放方法实例分析

    2022-03-22 04:46:20
  • Android自定义有限制区域的图例角度自识别涂鸦工具类完结篇

    2022-10-22 23:05:13
  • java和matlab画多边形闭合折线图示例讲解

    2021-06-23 08:39:15
  • java代码效率优化方法(推荐)

    2023-05-26 01:42:32
  • Spring Boot中lombok的安装与使用详解

    2021-08-26 14:50:38
  • Java 在PDF中添加条形码的两种方法

    2023-05-29 19:10:23
  • intellij idea14打包apk文件和查看sha1值

    2022-05-25 13:18:37
  • C#中char和string的入门使用教程

    2022-06-14 15:07:17
  • asp之家 软件编程 m.aspxhome.com