滑动页面效果

来源:互联网 发布:开奖网站源码 编辑:程序博客网 时间:2024/05/15 08:39

我们先来谷歌官方文档对viewpager的介绍,该类允许用户通过页面翻转左右的数据,需要通过实现PagerAdapter适配器来生成视图显示的页面。因为注意这个类是早期设计和开发的,API可能会改变,并在以后更新兼容库,到时候我们需要做相应的处理。ViewPager最常用于结合Fragment,这是一个方便的方式来供应和管理每个页面的生命周期,我们后面的博客介绍相关的内容,今天我们先来简单实现viewpager的功能。

MainAcitivity的代码

[java] view plaincopy
  1. package com.example.f10_viewpager;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import android.os.Bundle;  
  6. import android.app.Activity;  
  7. import android.support.v4.view.PagerAdapter;  
  8. import android.support.v4.view.PagerTabStrip;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.ViewGroup;  
  13.   
  14. public class MainActivity extends Activity {  
  15.   
  16.     private View view1, view2, view3;// 需要滑动的页卡  
  17.     private ViewPager viewPager;  
  18.     private PagerTabStrip pagerTabStrip;  
  19.     private List<View> viewList;// 把需要滑动的页卡添加到这个list中  
  20.     private List<String> titleList;// viewpager的标题  
  21.   
  22.     @Override  
  23.     public void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.         setContentView(R.layout.activity_main);  
  26.         // 像普通控件一样先初始化  
  27.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
  28.         pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);  
  29.         pagerTabStrip.setDrawFullUnderline(false);//设置下划线不整页显示  
  30.         pagerTabStrip.setTextSpacing(1000);//设置标题之间的距离  
  31.         initView();  
  32.         MyAdapter pagerAdapter = new MyAdapter();  
  33.         viewPager.setAdapter(pagerAdapter);  
  34.     }  
  35.     //填充布局,设置每一页的标题  
  36.     private void initView() {  
  37.         view1 = findViewById(R.layout.layout1);  
  38.         view2 = findViewById(R.layout.layout2);  
  39.         view3 = findViewById(R.layout.layout3);  
  40.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
  41.         viewList.add(view1);  
  42.         viewList.add(view2);  
  43.         viewList.add(view3);  
  44.         titleList = new ArrayList<String>();// 每个页面的Title数据  
  45.         titleList.add("第一个页面");  
  46.         titleList.add("第二个页面");  
  47.         titleList.add("第三个页面");  
  48.     }  
  49.   
  50.     public class MyAdapter extends PagerAdapter {  
  51.         @Override  
  52.         public boolean isViewFromObject(View arg0, Object arg1) {  
  53.   
  54.             return arg0 == arg1;  
  55.         }  
  56.   
  57.         @Override  
  58.         public int getCount() {  
  59.   
  60.             return viewList.size();  
  61.         }  
  62.   
  63.         @Override  
  64.         public void destroyItem(ViewGroup container, int position, Object object) {  
  65.             container.removeView(viewList.get(position));  
  66.   
  67.         }  
  68.   
  69.         @Override  
  70.         public int getItemPosition(Object object) {  
  71.   
  72.             return super.getItemPosition(object);  
  73.         }  
  74.   
  75.         @Override  
  76.         public CharSequence getPageTitle(int position) {  
  77.   
  78.             return titleList.get(position);  
  79.   
  80.         }  
  81.   
  82.         // 将每一页的布局填充如ViewGroup容器中  
  83.         @Override  
  84.         public Object instantiateItem(ViewGroup container, int position) {  
  85.             container.addView(viewList.get(position));  
  86.   
  87.             return viewList.get(position);  
  88.         }  
  89.   
  90.     };  
  91.   
  92. }  

   在我之间浏览博文的时候,有人提到过第30行代码设置标题的距离效果没有实现,不知道为什么,后来我调试了一下,发现应该是这个值要设置的大一些,我这里设置的就是1000就实现了一个页面只显示一个标题的效果。在layout布局文件下,我们首先得先创建三个简单的布局文件,来实现滑动效果,当然最重要的是main.xml的代码书写

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:layout_width="fill_parent"    
  4.     android:layout_height="fill_parent"    
  5.     android:orientation="vertical" >    
  6.     
  7.    <android.support.v4.view.ViewPager    
  8.         android:id="@+id/viewpager"    
  9.         android:layout_width="wrap_content"    
  10.         android:layout_height="wrap_content"    
  11.         android:layout_gravity="center" >    
  12.                   
  13.         <android.support.v4.view.PagerTabStrip      
  14.             android:id="@+id/pagertab"      
  15.             android:layout_width="wrap_content"      
  16.             android:layout_height="wrap_content"      
  17.             android:layout_gravity="top"/>     
  18.          
  19.                   
  20.                
  21.        
  22.              
  23.     </android.support.v4.view.ViewPager>    
  24.     
0 0
原创粉丝点击