计算机安全

0%

Android ViewPager

Posted on In

ViewPager

一个引导页面，就比如我们一进入一个APP，第一次打开，他会告诉我们程序的各种使用方法，这个ViewPager就是这个东西。

导入android-support-v4.jar包

因为低版本无法支持这个引导页，所以我们一般需要引入一个Android4.0以上版本的一个jar包，路径一般是：android-sdk_r24.4.1-windows\android-sdk-windows\extras\google\play_billing\samples\TrivialDrive\libs。
操作过程就是先建一个Folder（文件夹），然后导入我们的包，托文件进来就好了，然后，右键这个包找到Build Path->Add…添加进来就可以了。

组件的配置。

导入组件之后，我们布局一下：

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
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </android.support.v4.view.ViewPager>
    <LinearLayout 
        android:id="@+id/Lly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="bottom|center_horizontal"
        >
        <ImageView 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"            
            android:src="@drawable/ic_point1"
            android:padding="15dip"
            />
        <ImageView 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"            
            android:src="@drawable/ic_launcher"
            android:padding="15dip"
            />        
        <ImageView 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"            
            android:src="@drawable/ic_launcher"
            android:padding="15dip"
            />        
    </LinearLayout>
    
</FrameLayout>

注意，要是用全类名：android.support.v4.view.ViewPager,属性啥的没啥注意的，我们在下面添加几个图片控件。

之后我们再编写java代码。

初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private ViewPager viewpager;
private List<View> viewList;
private int[] imagesArr = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher};
private ImageView[] PointArr;
private ViewAdapterPager VpA;
private LinearLayout Lly;
private int currentPoint;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	initView();
	initData();
	initPoint();
}
  1. ViewPager就是我们的控件
  2. viewList就是我们存储ViewPager中存放的图片的。
  3. int数组存放的就是我们图片资源ID
  4. PointArr，存放的是我们在下方展示的那几个ImageView，为的是告诉用户你当前到第几页了。
  5. VpA就是我们的适配器，类使我们自己写的，集成别的类，下面会提到。
  6. Lly我们的LinearLayout布局。
  7. currentPoint当前选中的页面
1
2
3
4
5
6
7
private void initView()
{
	Lly = (LinearLayout) findViewById(R.id.Lly);
	viewpager = (ViewPager) findViewById(R.id.viewpager);
	viewList = new ArrayList<View>();
	VpA = new ViewAdapterPager(viewList);
}

我们在初始换视图的时候我们就是简单的new和find一下我们的控件和集合。

1
2
3
4
5
6
7
8
9
10
11
12
private void initData()
{
	LayoutParams lP = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
	for (int i : imagesArr) {
		ImageView image = new ImageView(this);
		image.setImageResource(i);
		image.setLayoutParams(lP);
		viewList.add(image);
	}
	viewpager.setAdapter(VpA);
	viewpager.setOnPageChangeListener(this);
}

在初始化数据的时候，我们就创建我们的图片资源，然后设置他填充父窗体，然后加入我们的List集合中，然后设置ViewPager的适配器，再设置页面改变的一个监听器。

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
package com.example.android_study8;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ViewAdapterPager extends PagerAdapter{

	private List<View> views;
	
	public ViewAdapterPager(List<View> views) {
		this.views = views;
	}
	@Override
	public int getCount() {
		return views.size();
	}

	
	/*
	 * 初始化界面的
	 * */
	@Override
	public Object instantiateItem(View container, int position) {
		((ViewPager)container).addView(views.get(position));
		return views.get(position);
	}
	/*
	 * 判断是否是对象生成的页面
	 * */
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}
	
	
	/*
	 * 销毁position位置的页面的
	 * */
	@Override
	public void destroyItem(View container, int position, Object object) {
		((ViewPager)container).removeView(views.get(position));
	}

}

我们自己写的这个类需要说一下，构造方法中，我们需要传入我们的那个ImageView控件的集合，getCount必须重写，返回页面个数。instantiateItem这个方法就是来要我们的控件的，在这个时候我们需要将我们控件先添加到我们的container也就是ViewPager中，然后返回给他这个ImageView控件。isViewFromObject方法就是判断是不是对象生成的页面，返回判断两者是否相等就好了。destroyItem方法就是和instantiateItem相对的，只不过没返回值，我们需要删除图片，在学习的过程中，发现内存中最多有三个图片，最少有两个。

1
2
3
4
5
6
7
8
9
10
11
12
private void initPoint()
{
	PointArr = new ImageView[imagesArr.length];
	for (int i = 0; i < Lly.getChildCount(); i++) {
		PointArr[i] = (ImageView) Lly.getChildAt(i);
		PointArr[i].setImageResource(R.drawable.ic_launcher);
		PointArr[i].setOnClickListener(this);
		PointArr[i].setTag(i);
	}
	currentPoint = 0;
	PointArr[currentPoint].setImageResource(R.drawable.ic_point1);
}

这个就是初始化我们下面那几个点的，而且增加了点击事件，增加了控件的Tag标签，然后初始化这几个点的图片。

我们的类需要实现：implements OnPageChangeListener,OnClickListener。
有几个方法我们需要用到。

1
2
3
4
5
6
7
8
9
10
11
@Override
public void onPageSelected(int arg0) {
	setCurrentPoint(arg0);
}

private void setCurrentPoint(int position) {
	for (int i = 0; i < PointArr.length; i++) {
		PointArr[i].setImageResource(R.drawable.ic_launcher);
	}
	PointArr[position].setImageResource(R.drawable.ic_point1);
}

onPageSelected这个方法就是我们切换页面的时候用到的，传进来的其实是个当前页面下标，我们自定义一个函数来设置底部图片的。首先现将我们的所有图片设置为不是当前页，然后设置当前页为当前页，如果不设置其他的不是当前页，将会导致之后划完全都是当前页。

1
2
3
4
5
@Override
public void onClick(View v) {
	int i = (Integer)v.getTag();
	viewpager.setCurrentItem(i);
}

这个就是当我们点击图片的时候，通过传进来的控件取得控件Tag，我们之前设置好的，和图片页面一一对应的，取得之后设置当前页面就好了。

实现效果

由于我懒得找图，这样看看效果就好了。