【移动应用开发技术】如何在Android中使用ViewPager方法

【移动应用开发技术】如何在Android中使用ViewPager方法

Android是一种基于Linux内核的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由美国Google公司和开放手机联盟领导及开发。ViewPager简介：ViewPager（android.support.v4.view.ViewPager）是android扩展包v4包中的类，这个类可以让用户左右切换当前的view，实现滑动切换的效果。注意：ViewPager类直接继承了ViewGroup类，也就是说它和我们经常打交道的LinearLayout一样，都是一个容器，需要在里面添加我们想要显示的内容。ViewPager类需要一个PagerAdapter适配器类给它提供数据，这个和ListView类似。ViewPager基础使用具体步骤：1.在布局文件里加入

<android.support.v4.view.ViewPager

android:id="@+id/in_viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent">

</android.support.v4.view.ViewPager>2.在Activity中加载要显示的Views，通过动态加载布局得到一个个View

mViewList

=

new

ArrayList<View>();

LayoutInflater

lf

=

getLayoutInflater().from(MainActivity.this);

View

view1

=

lf.inflate(R.layout.we_indicator1,

null);

View

view2

=

lf.inflate(R.layout.we_indicator2,

null);

View

view3

=

lf.inflate(R.layout.we_indicator3,

null);

mViewList.add(view1);

mViewList.add(view2);

mViewList.add(view3);3.自定义PagerAdapter，以便将步骤2中的Views数据加载到ViewPager容器中public

class

ViewPagerAdatper

extends

PagerAdapter

{

private

List<View>

mViewList

;

public

ViewPagerAdatper(List<View>

mViewList

)

{

this.mViewList

=

mViewList;

}

@Override

public

int

getCount()

{

return

mViewList.size();

}

@Override

public

boolean

isViewFromObject(View

view,

Object

object)

{

return

view==object;

}

@Override

public

Object

instantiateItem(ViewGroup

container,

int

position)

{

container.addView(mViewList.get(position));

return

mViewList.get(position);

}

@Override

public

void

destroyItem(ViewGroup

container,

int

position,

Object

object)

{

container.removeView(mViewList.get(position));

}

}4.将ViewPager和自定义的PagerAdapter关联起来mIn_vp.setAdapter(new

ViewPagerAdatper(mViewList));通过简单使用ViewPager，得到的展示效果，仅仅支持左右滑动，效果比较单一。ViewPager进阶使用——实现跟随式小圆点效果步骤：1.添加小圆点在布局中的设置如下：<RelativeLayout

android:id="@+id/rl_dots"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="60dp">

<LinearLayout

android:id="@+id/in_ll"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

</LinearLayout>

<ImageView

android:id="@+id/iv_light_dots"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/light_dot"/>

</RelativeLayout>随后在LinearLayout中动态添加3个小黑点，小白点默认覆盖在第一个小黑点的上面。在Activity中的添加小黑点，代码如下：private

void

addDots()

{

mOne_dot

=

new

ImageView(this);

mOne_dot.setImageResource(R.drawable.gray_dot);

LinearLayout.LayoutParams

layoutParams

=

new

LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

layoutParams.setMargins(0,

0,

40,

0);

mIn_ll.addView(mOne_dot,

layoutParams);

mTwo_dot

=

new

ImageView(this);

mTwo_dot.setImageResource(R.drawable.gray_dot);

mIn_ll.addView(mTwo_dot,

layoutParams);

mThree_dot

=

new

ImageView(this);

mThree_dot.setImageResource(R.drawable.gray_dot);

mIn_ll.addView(mThree_dot,

layoutParams);

setClickListener();

}2.获得两个点之间的距离实现小白点动态跟随的思路是：根据页面的移动情况，通过设置小白点的leftMargin实现小红点的动态跟随。因此首要的是获得两个点之间的距离，根据页面移动到的位置，进行相应的运算。需要注意的是：在onCreate()中直接获得小白点的左边距getLeft()结果为0，这是因为View组件布局要在onResume回调后完成。因此使用另一种方法：mLight_dots.getViewTreeObserver().addOnGlobalLayoutListener(new

ViewTreeObserver.OnGlobalLayoutListener()

{

@Override

public

void

onGlobalLayout()

{

//获得两个圆点之间的距离

mDistance

=

mIn_ll.getChildAt(1).getLeft()

-

mIn_ll.getChildAt(0).getLeft();

mLight_dots.getViewTreeObserver()

.removeGlobalOnLayoutListener(this);

}

});在布局发生改变或者某个视图的可视状态发生改变时调用该事件。但此方法会被多次调用，因此需要在获取到视图的宽度和高度后执行remove方法移除该监听事件。3.监听页面的移动情况

mIn_vp.addOnPageChangeListener(new

ViewPager.OnPageChangeListener()

{

@Override

public

void

onPageScrolled(int

position,

float

positionOffset,

int

positionOffsetPixels)

{

//页面滚动时小白点移动的距离，并通过setLayoutParams(params)不断更新其位置

float

leftMargin

=

mDistance

*

(position

+

positionOffset);

RelativeLayout.LayoutParams

params

=

(RelativeLayout.LayoutParams)

mLight_dots.getLayoutParams();

params.leftMargin

=

(int)

leftMargin;

mLight_dots.setLayoutParams(params);

}

@Override

public

void

onPageSelected(int

position)

{

//页面跳转时，设置小圆点的margin

float

leftMargin

=

mDistance

*

position;

RelativeLayout.LayoutParams

params

=

(RelativeLayout.LayoutParams)

mLight_dots.getLayoutParams();

params.leftMargin

=

(int)

leftMargin;

mLight_dots.setLayoutParams(params);

}

@Override

public

void

onPageScrollStateChanged(int

state)

{

}

});

}在页面移动过程中,根据mDistance*(position+positionOffset)可以实时更新小白点的位置这部分内容加入了一个新的功能点击小黑点可以直接跳转到对应的引导页面，具体逻辑就是在小黑点的点击事件中加入如下代码：

mIn_vp.setCurrentItem(1);在页面选择过程中,根据mDistance*position可以实时小红点的位置4.跳转按钮的实现具体逻辑：到引导页到达最后一页时，跳转到主页的按钮出现。其他情况为隐藏状态因此可以在onPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels)和onPageSelected(intposition)方法中加入如下代码：

if(position==2){

mBtn_next.setVisibility(View.VISIBLE);

}当按照从第一页到最后一页，然后点击按钮跳转到首页，则以上逻辑足够。但当用户浏览到最后一页后再回转到前面感兴趣的页面，则会出现按钮依旧出现的情况，不符合要求。因此要完善逻辑，加入新的判断，逻辑如下：if(position!=2&&mBtn_next.getVisibility()==View.VISIBLE){

mBtn_next.setVisibility(View.GONE);

}以上逻辑保证了按钮的正常显示，剩下的就可以具体操作，实现跳转到首页的逻辑。ViewPager进阶使用——自定义炫酷动画ViewPager自带了一个setPageTransformer用于设置切换动画~setPageTransformer(booleanreverseDrawingOrder,PageTransformertransformer）需要传入两个参数第一个参数：如果为true，则表明自定义的pageTransformer需要pageview从后到前的顺序绘制，反之则为false。第二个参数：传入一个自定义的pageTransformer对象因此实现炫酷动画的关键点就在于：自定义pageTransformerGoogle官方给我们展示了两个动画例子：DepthPageTransformer和ZoomOutPageTransformer，比较炫。我们就以Google官方的例子来学习自定义pageTransformer,以此为基础，我们可以自定义各种各样的动画实现效果。1.PageTransformer中position解析自定义PageTransformer只需要实现一个方法，transformPage(Viewpage,floatposition)，而这个方法实现的关键就是对position的理解。源码中的注释解释如下：ApplythetransformationtothispageApplythetransformationtothispageposition-Positionofpagerelativetothecurrentfront-and-centerpositionofthepager.0isfrontandcenter.1isonefullpagepositiontotheright,and-1isonepagepositiontotheleft.我们可以理解为：0表示当前页面，是当前页面-1表示左侧的页面，是左侧页面1表示右侧的页面，是右侧页面在用户滑动界面的时候，position是动态变化的，下面以左滑为例:选中页面position：0->-1前一个itemposition：-1->-2后一个itemposition：1->0但是当ViewPager设置pageMargin，设置两个页面之间的距离（通过调用viewPager.setPageMargin()方法设置）后，情况则不同。如果你设置了pageMargin，前后页面的position需要分别加上（或减去，前减后加）一个偏移量（偏移量的计算方式为pageMargin/pageWidth）。同样以左滑为例:选中页面position：0->-1-pageMargin/pageWidth前一个itemposition：-1-pageMargin/pageWidth->-2-pageMargin/pageWidth后一个itemposition：1+pageMargin/pageWidth->0因此我们可以将position的值应用于setAlpha(),setTranslationX(),或者setScaleY()等等方法，从而实现自定义的动画效果。2.实现transformPage(Viewpage,floatposition)方法public

class

DepthPageTransformer

implements

ViewPager.PageTransformer

{

private

static

final

float

MIN_SCALE

=

0.75f;

@Override

public

void

transformPage(View

page,

float

positi