ViewPager的相关使用

来源：互联网发布：vcr制作软件下载编辑：程序博客网时间：2024/06/10 14:31

一个简单的轮播图的应用：
若要获取小点，需在res下新建一个drawable文件夹，且要创建一个selector Xml文件
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:drawable="@drawable/dot_unfocus"></item>
</selector>

dot_focus文件的创建：
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <solid android:color="#ffffff"/>
</shape>
dot_unfocus文件的创建：
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#aa000000"/>
</shape>
这两个文件均为xml文件，且都在drawable文件夹下被创建
布局activity_main中：
<RelativeLayout 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"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewPager"
        android:background="#77000000"
        android:orientation="vertical"
        android:padding="8dp" >

        <TextView
            android:id="@+id/tv_intro"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="@string/hello_world"
            android:textColor="#ffffff"
            android:textSize="16sp" />

        <LinearLayout
            android:id="@+id/dot_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="3dp"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>
布局activity_adapter中：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/a" />

</LinearLayout>
MainActivity中：
public class MainActivity extends Activity {
   private ArrayList<Integer> list = new ArrayList<Integer>();
   private List<Info> desList = new ArrayList<Info>();
   private ViewPager viewPager;
   private TextView tv_intro;
   private LinearLayout dot_layout;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       initView();
       initData();
       initListener();

   }

   // 第一步：初始化View视图，即mainactivity中的控件,把view加载到window上
   public void initView() {
       setContentView(R.layout.activity_main);
       viewPager = (ViewPager) findViewById(R.id.viewPager);
       tv_intro = (TextView) findViewById(R.id.tv_intro);
       dot_layout = (LinearLayout) findViewById(R.id.dot_layout);
   }

   // 第二步：初始化数据（图片和文本），并且进行匹配
   public void initData() {
       list.add(R.drawable.a);
       list.add(R.drawable.b);
       list.add(R.drawable.c);
       list.add(R.drawable.d);
       list.add(R.drawable.e);

       desList.add(new Info(R.drawable.a, "春季"));
       desList.add(new Info(R.drawable.b, "夏季"));
       desList.add(new Info(R.drawable.c, "秋季"));
       desList.add(new Info(R.drawable.d, "春秋季"));
       desList.add(new Info(R.drawable.e, "冬季"));
       initDot();
       viewPager.setAdapter(new MyPagerAdapter());
       updateIntroAndDot();

   }

   // 第三步：初始化小点
   public void initDot() {
       for (int i = 0; i < 5; i++) {
           View view = new View(this);
           LayoutParams params = new LinearLayout.LayoutParams(8, 8);
           if (i != 0) {
               params.setMargins(5, 0, 0, 0);
           }
           view.setLayoutParams(params);
           view.setBackgroundResource(R.drawable.selector_dot);
           dot_layout.addView(view);

       }
   }

   // 第四步：更新文本
   private void updateIntroAndDot() {
       int currentPage = viewPager.getCurrentItem() % list.size();
       tv_intro.setText(desList.get(currentPage).intro);
       for (int i = 0; i < dot_layout.getChildCount(); i++) {
           View view = dot_layout.getChildAt(i);
                                //Enable是selector中的方法
           view.setEnabled(i == currentPage);
       }

   }

   // 第五步：实现图片点击滑动事件
   private void initListener() {
       viewPager.setOnPageChangeListener(new OnPageChangeListener() {

           @Override
           public void onPageSelected(int position) {
               // TODO Auto-generated method stub
               updateIntroAndDot();
           }

           @Override
           public void onPageScrolled(int position, float positionOffset,
                   int positionOffsetPixels) {
               // TODO Auto-generated method stub

           }

           @Override
           public void onPageScrollStateChanged(int state) {
               // TODO Auto-generated method stub

           }
       });
   }

   /*
   * viewPager的适配器，使得viewPager内的控件与之匹配
   *
   * 有四个方法：getCount() isViewFromObject(View arg0, Object arg1)
   * instantiateItem(ViewGroup container, int position) destroyItem(ViewGroup
   * container, int position, Object object)
   */
   private class MyPagerAdapter extends PagerAdapter {

       @Override
       public int getCount() {

           return Integer.MAX_VALUE;
       }

       @Override
       public boolean isViewFromObject(View arg0, Object arg1) {
           // TODO Auto-generated method stub
           return arg0 == arg1;
       }

       @Override
       // 创建子条目，将图片加载进去
       public Object instantiateItem(ViewGroup container, int position) {
           View view = View.inflate(getApplicationContext(),
                   R.layout.activity_adapter, null);
           ImageView image = (ImageView) view.findViewById(R.id.image);
           // 这里会出现脚标越界异常
           // image.setImageResource(list.get(position)%list.size());错误的
           image.setImageResource(list.get(position % list.size()));
           // 把图片设置进去
           container.addView(view);
           return view;
       }

       @Override
       public void destroyItem(ViewGroup container, int position, Object object) {
           // container.removeView((View) object);

       }

   }

}
javaBean中：
public class Info {
   private int iconId;
   public String intro;
public Info(int iconId,String intro){
   this.iconId=iconId;
   this.intro=intro;
}
}

1 0