一起学android之ViewPager讲解（11）
浏览数：28 /
时间：2015年06月11日
ViewPager的功能提供界面切换的效果，我们可以定义一组VIEW，在当前界面中进行左右切换它们。
使用ViewPager时我们需要以下准备：
1、准备适配器：
<span style="font-size:18px;">PagerAdapter mPagerAdapter=new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager)container).removeView(viewList.get(position));
}
@Override
public 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>
<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{
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public 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;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.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
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager)container).removeView(viewList.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(viewList.get(position));
return viewList.get(position);
}
};
return mPagerAdapter;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_start://开始
break;
default:
break;
}
}
public class PageChangeListener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public 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 情绪控_
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
