码迷,mamicode.com
首页 > 移动开发 > 详细

Android随笔--使用ViewPager实现简单地图片的左右滑动切换

时间:2016-08-07 12:32:19      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~:

  1. 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一:
     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:orientation="vertical"
     6     >
     7     <ImageView
     8         android:layout_width="match_parent"
     9         android:layout_height="match_parent"
    10         android:scaleType="centerCrop"
    11         android:src="@mipmap/view1"/>
    12 
    13 </LinearLayout>

    只是用了一个ImageView作为显示图片的容器

  2. 主页面布局:
     1 <?xml version="1.0" encoding="UTF-8"?>
     2 
     3 <RelativeLayout android:orientation="vertical"
     4 android:layout_height="match_parent"
     5 android:layout_width="match_parent"
     6 xmlns:android="http://schemas.android.com/apk/res/android">
     7 
     8 
     9 
    10 
    11 <!-- 切换卡 -->
    12 
    13 
    14 <android.support.v4.view.ViewPager
    15     android:layout_height="wrap_content"
    16     android:layout_width="match_parent"
    17     android:id="@+id/viewPager"></android.support.v4.view.ViewPager>
    18 
    19 <!-- 点点 -->
    20 
    21 
    22 <LinearLayout
    23     android:orientation="horizontal"
    24     android:layout_height="wrap_content"
    25     android:layout_width="fill_parent"
    26     android:id="@+id/viewGroup"
    27     android:layout_alignParentBottom="true"
    28     android:gravity="center_horizontal"
    29     android:layout_marginBottom="40dp"></LinearLayout>
    30 </RelativeLayout>

     

  3. 接下来就是主函数的的代码了:
      1 package com.yztc.lx.homework;
      2 
      3 import android.app.Activity;
      4 import android.os.Bundle;
      5 import android.support.v4.view.PagerAdapter;
      6 import android.support.v4.view.ViewPager;
      7 import android.view.LayoutInflater;
      8 import android.view.ViewGroup.LayoutParams;
      9 import android.view.View;
     10 import android.view.ViewGroup;
     11 import android.widget.ImageView;
     12 
     13 import java.util.ArrayList;
     14 import java.util.List;
     15 
     16 /**
     17  * Created by Lx on 2016/8/6.
     18  */
     19 
     20 public class Layout1Activity extends Activity {
     21     private ViewPager viewPager;
     22     private PagerAdapter adapter;
     23     private List<View> viewPages = new ArrayList<>();
     24 
     25     //包裹点点的LinearLayout
     26     private ViewGroup group;
     27     private ImageView imageView;
     28     //定义一个ImageVIew数组,来存放生成的小园点
     29     private ImageView[] imageViews;
     30 
     31     @Override
     32     protected void onCreate(Bundle savedInstanceState) {
     33         super.onCreate(savedInstanceState);
     34         setContentView(R.layout.layout1);
     35 
     36         initView();
     37         initPageAdapter();
     38         initPointer();
     39         initEvent();
     40     }
     41 
     42     //为控件绑定事件,绑定适配器
     43     private void initEvent() {
     44         viewPager.setAdapter(adapter);
     45         viewPager.addOnPageChangeListener(new GuidePageChangeListener());
     46     }
     47 
     48     //初始化ViewPager
     49     private void initPageAdapter() {
     50         /**
     51          * 对于这几个想要动态载入的page页面,使用LayoutInflater.inflate()来找到其布局文件,并实例化为View对象
     52          */
     53         LayoutInflater inflater = LayoutInflater.from(this);
     54         View page1 = inflater.inflate(R.layout.page1, null);
     55         View page2 = inflater.inflate(R.layout.page2, null);
     56         View page3 = inflater.inflate(R.layout.page3, null);
     57 
     58         //添加到集合中
     59         viewPages.add(page1);
     60         viewPages.add(page2);
     61         viewPages.add(page3);
     62 
     63         adapter = new PagerAdapter() {
     64             //获取当前界面个数
     65             @Override
     66             public int getCount() {
     67                 return viewPages.size();
     68             }
     69 
     70             //判断是否由对象生成页面
     71             @Override
     72             public boolean isViewFromObject(View view, Object object) {
     73                 return view == object;
     74             }
     75 
     76             @Override
     77             public void destroyItem(ViewGroup container, int position, Object object) {
     78                 container.removeView(viewPages.get(position));
     79             }
     80 
     81             //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
     82             @Override
     83             public Object instantiateItem(ViewGroup container, int position) {
     84                 View view = viewPages.get(position);
     85                 container.addView(view);
     86                 return view;
     87             }
     88         };
     89     }
     90 
     91     //绑定控件
     92     private void initView() {
     93         viewPager = (ViewPager) findViewById(R.id.viewPager);
     94         group = (ViewGroup) findViewById(R.id.viewGroup);
     95     }
     96 
     97     //初始化下面的小圆点的方法
     98     private void initPointer() {
     99         //有多少个界面就new多长的数组
    100         imageViews = new ImageView[viewPages.size()];
    101         for (int i = 0; i < imageViews.length; i++) {
    102             imageView = new ImageView(this);
    103             //设置控件的宽高
    104             imageView.setLayoutParams(new LayoutParams(25, 25));
    105             //设置控件的padding属性
    106             imageView.setPadding(20, 0, 20, 0);
    107             imageViews[i] = imageView;
    108             //初始化第一个page页面的图片的原点为选中状态
    109             if (i == 0) {
    110                 //表示当前图片
    111                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused);
    112                 /**
    113                  * 在java代码中动态生成ImageView的时候
    114                  * 要设置其BackgroundResource属性才有效
    115                  * 设置ImageResource属性无效
    116                  */
    117 
    118             } else {
    119                 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
    120             }
    121             group.addView(imageViews[i]);
    122         }
    123     }
    124 
    125     //ViewPager的onPageChangeListener监听事件,当ViewPager的page页发生变化的时候调用
    126     public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
    127         @Override
    128         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    129 
    130         }
    131 
    132         //页面滑动完成后执行
    133         @Override
    134         public void onPageSelected(int position) {
    135             //判断当前是在那个page,就把对应下标的ImageView原点设置为选中状态的图片
    136             for (int i = 0; i < imageViews.length; i++) {
    137                 imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused);
    138                 if (position != i) {
    139                     imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
    140                 }
    141             }
    142         }
    143 
    144         //监听页面的状态,0--静止  1--滑动   2--滑动完成
    145         @Override
    146         public void onPageScrollStateChanged(int state) {
    147 
    148         }
    149     }
    150 
    151 }

     

  4. 这样,一个简单地滑动图片的Demo就完成了,需要注意的地方有:在java代码中生成ImageView的时候,如果想为其设置显示的图片,要使用setBackgroundResource()方法而不是setImageResource()方法

Android随笔--使用ViewPager实现简单地图片的左右滑动切换

标签:

原文地址:http://www.cnblogs.com/RabbitLx/p/5745857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!