一起学android之ViewPager讲解（11）

来源：互联网发布：淘宝店铺装修方案ppt 编辑：程序博客网时间：2024/05/16 18:54

ViewPager的功能提供界面切换的效果，我们可以定义一组VIEW，在当前界面中进行左右切换它们。

使用ViewPager时我们需要以下准备：

1、准备适配器：

<span style="font-size:18px;">PagerAdapter mPagerAdapter=new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}@Overridepublic int getCount() {return viewList.size();}@Overridepublic void destroyItem(View container, int position, Object object) {// TODO Auto-generated method stub((ViewPager)container).removeView(viewList.get(position));}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager)container).addView(viewList.get(position));return  viewList.get(position);}};</span>

看下 ViewPager的适配器继承于PagerAdapter基类，并且实现了以上几种方法：

判断是否由对象生产界面

<span style="font-size:18px;">public boolean isViewFromObject(View arg0, Object arg1){}</span>

获取当前需要显示的总View数

<span style="font-size:18px;">public int getCount() {}</span>

销毁position位置的界面

<span style="font-size:18px;">public void destroyItem(View container, int position, Object object) {}</span>

初试化position位置的界面

<span style="font-size:18px;">public Object instantiateItem(View container, int position) {}</span>

2、注册监听事件

<span style="font-size:18px;">public class PageChangeListener implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {}}</span>

实现的方法：

<span style="font-size:18px;">public void onPageScrollStateChanged(int arg0) {}</span>

这个方法是在状态改变的时候调用，arg0共有三种状态(0,1,2)，当为0时，代表当前什么都没做；当为1时，代表正在滑动；当为2时，代表滑动完毕。

<span style="font-size:18px;">public void onPageScrolled(int arg0, float arg1, int arg2) {}</span>

这个方法是在滑动的时候调用，在滑动停止之前，一直保持调用，arg0代表当前点击滑动的页面，arg1代表页面偏移的百分比，arg2代表页面偏移的像素位置

<span style="font-size:18px;">public void onPageSelected(int arg0) {}</span>

这个方法是在跳转完后调用，arg0是当前选中的页面。

接下来我们实现微信中的登陆后的界面，效果如下：

login_anim.xml布局文件：

<span style="font-size:18px;"><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v4.view.ViewPager        android:id="@+id/vp_login"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" >            </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:layout_marginBottom="30dp"            android:gravity="center_horizontal" >            <ImageView                android:id="@+id/iv_page0"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:scaleType="matrix"                android:src="@drawable/page_now" />            <ImageView                 android:id="@+id/iv_page1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:scaleType="matrix"                android:src="@drawable/page"/>            <ImageView                 android:id="@+id/iv_page2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:scaleType="matrix"                android:src="@drawable/page"/>            <ImageView                 android:id="@+id/iv_page3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:scaleType="matrix"                android:src="@drawable/page"/>            <ImageView                 android:id="@+id/iv_page4"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:scaleType="matrix"                android:src="@drawable/page"/>            <ImageView                 android:id="@+id/iv_page5"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:scaleType="matrix"                android:src="@drawable/page"/>        </LinearLayout>    </LinearLayout></FrameLayout></span>

上面定义的几个ImageView就是效果图中的下方的小圆点，后面通过监听ViewPager的滑动事件来改变这些ImageView的图标，来强调当前显示的View。

<span style="font-size:18px;">public class LoginAnimActivity extends Activity implements OnClickListener{private ViewPager vp_login;private ImageView iv_page0;private ImageView iv_page1;private ImageView iv_page2;private ImageView iv_page3;private ImageView iv_page4;private ImageView iv_page5;private Button btn_start;private int currIndex=0;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.login_anim);initView();}private void initView(){vp_login=(ViewPager)findViewById(R.id.vp_login);</span>

<span style="font-size:18px;">//注册监听事件vp_login.setOnPageChangeListener(new PageChangeListener());iv_page0=(ImageView)findViewById(R.id.iv_page0);iv_page1=(ImageView)findViewById(R.id.iv_page1);iv_page2=(ImageView)findViewById(R.id.iv_page2);iv_page3=(ImageView)findViewById(R.id.iv_page3);iv_page4=(ImageView)findViewById(R.id.iv_page4);iv_page5=(ImageView)findViewById(R.id.iv_page5);</span>

<span style="font-size:18px;">                //绑定适配器vp_login.setAdapter(inflaterView());}/* * 装载数据VIEW */private PagerAdapter inflaterView(){</span>

<span style="font-size:18px;">                LayoutInflater layoutInflater=LayoutInflater.from(this);View view1=layoutInflater.inflate(R.layout.login_anim1, null);//这些view就是我们需要显示的View view2=layoutInflater.inflate(R.layout.login_anim2, null);View view3=layoutInflater.inflate(R.layout.login_anim3, null);View view4=layoutInflater.inflate(R.layout.login_anim4, null);View view5=layoutInflater.inflate(R.layout.login_anim5, null);View view6=layoutInflater.inflate(R.layout.login_anim6, null);btn_start=(Button)view6.findViewById(R.id.btn_start);final ArrayList<View> viewList=new ArrayList<View>();//将这些View放入集合中viewList.add(view1);viewList.add(view2);viewList.add(view3);viewList.add(view4);viewList.add(view5);viewList.add(view6);PagerAdapter mPagerAdapter=new PagerAdapter() {//装载这些View@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}@Overridepublic int getCount() {return viewList.size();}@Overridepublic void destroyItem(View container, int position, Object object) {// TODO Auto-generated method stub((ViewPager)container).removeView(viewList.get(position));}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager)container).addView(viewList.get(position));return  viewList.get(position);}};return mPagerAdapter;}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn_start://开始break;default:break;}}public class PageChangeListener implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {switch (arg0) {case 0:iv_page0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 1:iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page0.setImageDrawable(getResources().getDrawable(R.drawable.page));iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 2:iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page1.setImageDrawable(getResources().getDrawable(R.drawable.page));iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 3:iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page2.setImageDrawable(getResources().getDrawable(R.drawable.page));iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 4:iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page3.setImageDrawable(getResources().getDrawable(R.drawable.page));iv_page5.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 5:iv_page5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));iv_page4.setImageDrawable(getResources().getDrawable(R.drawable.page));break;default:break;}}}}</span>

login_anim1布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/w01" >    <TextView         android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="\n高仿\n是学习开发的最佳途径"        android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"/></RelativeLayout></span>

login_anim2布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:background="@drawable/w02"     android:layout_width="fill_parent"     android:layout_height="fill_parent"  >        <TextView         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:text="\n按住就能说话\n聊天是如此简单轻松"         android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"         /></RelativeLayout></span>

login_anim3布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:background="@drawable/w03"     android:layout_width="fill_parent"     android:layout_height="fill_parent"  >        <TextView         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"                  android:text="透过视频聊天\n你甚至可以和朋友们\n面对面沟通"         android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"         /></RelativeLayout></span>

login_anim4布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:background="@drawable/w04"     android:layout_width="fill_parent"     android:layout_height="fill_parent"  >        <TextView         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:text="摇一摇手机\n或者看看附近的人\n认识更多的朋友"         android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"         /></RelativeLayout></span>

login_anim5布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:background="@drawable/w05"     android:layout_width="fill_parent"     android:layout_height="fill_parent"  >        <TextView         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:text="\n你还可以透过朋友圈\n和朋友们分享彼此的生活"         android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"         /></RelativeLayout></span>

login_anim6布局文件：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:background="@drawable/w01"     android:layout_width="fill_parent"     android:layout_height="fill_parent"  >        <TextView         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"                 android:text=" \n \nOK,见证高仿的威力吧"         android:layout_alignParentTop="true"        android:layout_marginTop="35dp"        android:textSize="22sp"        android:textColor="#fff"         />    <Button              android:id="@+id/btn_start"              android:layout_width="120dp"              android:layout_height="wrap_content"              android:layout_alignParentBottom="true"              android:layout_centerHorizontal="true"              android:layout_marginBottom="120dp"              android:text="开始"              android:textSize="18sp"              android:textColor="#fff"              android:background="@drawable/btn_style_green"                android:layout_gravity="center_vertical"              /></RelativeLayout></span>

转载请注明出处：http://blog.csdn.net/hai_qing_xu_kong/article/details/42277073 情绪控_

0 0