.

参考界面 : 携程app首页的广告栏, 使用ViewPager实现



自制页面效果图 :

源码下载地址:http://download.csdn.net/detail/han1202012/6835401


.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.


.


一. ViewPager适配页面问题


1. ViewPager出现的问题


ViewPager占满全屏问题 : ViewPager在XML中定义了android:layout_height 和 android:layout_width 之后, 不论这两个属性的值是 fill_parent 还是 wrap_content, 都会出现ViewPager占满全屏的问题;


不使用固定值定义宽高: 为了使ViewPager能适配各种类型的手机, 如果给ViewPager定义了高度和宽度, 与各种手机的界面兼容性肯定要大大的降低, 因此出现了下面的解决方案;


2. 解决方案


代码中添加组件 : 不在XML界面定义该组件, 可以在布局文件中,定义一个LinearLayout容器, 然后在代码中动态添加ViewPager;

好处 : 这样的好处是可以在代码中获取屏幕的宽高, 我们可以根据比例设定ViewPager的大小, 这样就解决了屏幕适配的问题;


3. 代码实现


//从布局文件中获取ViewPager父容器pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content);//创建ViewPager    adViewPager = new ViewPager(this);        //获取屏幕像素相关信息    DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);            //根据屏幕信息设置ViewPager广告容器的宽高        adViewPager.setLayoutParams(new LayoutParams(dm.widthPixels, dm.heightPixels * 2 / 5));                //将ViewPager容器设置到布局文件父容器中    pagerLayout.addView(adViewPager);



二. ViewPager广告栏基本解决方案


1. ViewPager适配器PagerAdapter


自定义PagerAdapter类 : 我们需要自定义一个类, 去继承PageAdapter, 至少实现下面四个方法 :


destroyItem(View container, int position, Object object) :

作用 :删除container中指定位置position的页面;

参数 : container 就是容器, 这里指的是ViewPager对象, position就是删除的页面索引;


int getCount() :

作用 :获取ViewPager页面的个数;

返回值 : ViewPager页面个数;


Object instantiateItem(View container, int position) :

作用 :在给定的位置创建页面, PageAdapter负责向指定的position位置添加View页面;

参数 : container容器就是ViewPager, position指的是ViewPager的索引;

返回值 : 返回代表新的一页的对象;


boolean isViewFromObject(View view, Object object) :

作用 :决定instantiateItem()方法返回的Object对象是不是需要显示的页面关联, 这个方法必须要有;

参数 : view 要关联的页面, objectinstantiateItem()方法返回的对象;

返回值 : 是否要关联显示页面与instantiateItem()返回值;


为PageAdapter关联数据源 : 可以将一个数组或者集合与PageAdapter关联,集合的索引与ViewPager的索引对应,destroyItem()方法中删除集合中对应索引的元素对象,instantiateItem 添加对应索引的元素对象;


PageAdapter 代码示例 :

    private final class AdvAdapter extends PagerAdapter {          private List<View> views = null;            /**         * 初始化数据源, 即View数组         */        public AdvAdapter(List<View> views) {              this.views = views;          }                  /**         * 从ViewPager中删除集合中对应索引的View对象         */        @Override          public void destroyItem(View container, int position, Object object) {              ((ViewPager) container).removeView(views.get(position));          }            /**         * 获取ViewPager的个数         */        @Override          public int getCount() {              return views.size();          }            /**         * 从View集合中获取对应索引的元素, 并添加到ViewPager中         */        @Override          public Object instantiateItem(View container, int position) {              ((ViewPager) container).addView(views.get(position), 0);              return views.get(position);          }            /**         * 是否将显示的ViewPager页面与instantiateItem返回的对象进行关联         * 这个方法是必须实现的         */        @Override          public boolean isViewFromObject(View view, Object object) {              return view == object;          }      }

创建PageAdapter代码 :


private void initPageAdapter() {pageViews = new ArrayList<View>();ImageView img1 = new ImageView(this);          img1.setBackgroundResource(R.drawable.view_add_1);          pageViews.add(img1);                  ImageView img2 = new ImageView(this);          img2.setBackgroundResource(R.drawable.view_add_2);          pageViews.add(img2);                 ImageView img3 = new ImageView(this);          img3.setBackgroundResource(R.drawable.view_add_3);          pageViews.add(img3);                 ImageView img4 = new ImageView(this);          img4.setBackgroundResource(R.drawable.view_add_4);          pageViews.add(img4);                 ImageView img5 = new ImageView(this);          img5.setBackgroundResource(R.drawable.view_add_5);          pageViews.add(img5);                 ImageView img6 = new ImageView(this);          img6.setBackgroundResource(R.drawable.view_add_6);          pageViews.add(img6);                  adapter = new AdPageAdapter(pageViews);}

2. 小圆点导航策略


圆点存放策略 : 所有的小圆点都放在一个ViewGroup中, 有两种圆点, 一种是当前显示的, 一种是没激活的, 这里我们将一组圆点分别放入ImageView中, 并且将这些ImageView组装起来放到ViewGroup中即可;


圆点导航初始化 : 最初默认显示第一个页面, 第一个圆点激活, 根据ViewPager个数初始化圆点的个数, 组装圆点的时候, 第一个圆点状态激活;

代码如下 :

private void initCirclePoint(){ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);         imageViews = new ImageView[pageViews.size()];          //广告栏的小圆点图标        for (int i = 0; i < pageViews.size(); i++) {          //创建一个ImageView, 并设置宽高. 将该对象放入到数组中        imageView = new ImageView(this);              imageView.setLayoutParams(new LayoutParams(20,20));              imageViews[i] = imageView;                          //初始值, 默认第0个选中            if (i == 0) {                  imageViews[i]                          .setBackgroundResource(R.drawable.point_focused);              } else {                  imageViews[i]                          .setBackgroundResource(R.drawable.point_unfocused);              }              //将小圆点放入到布局中            group.addView(imageViews[i]);          } }


ViewPager页面改变时圆点导航随之改变 : 获取ViewPager当前显示页面索引,重新组装ViewGroup中的圆点排列顺序, 这个方法在ViewPager页面改变监听器中实现;

代码如下 :

/** *ViewPager 页面改变监听器  */    private final class AdPageChangeListener implements OnPageChangeListener {          /**     * 页面滚动状态发生改变的时候触发     */        @Override          public void onPageScrollStateChanged(int arg0) {          }            /**         * 页面滚动的时候触发         */        @Override          public void onPageScrolled(int arg0, float arg1, int arg2) {          }            /**         * 页面选中的时候触发         */        @Override          public void onPageSelected(int arg0) {          //获取当前显示的页面是哪个页面            atomicInteger.getAndSet(arg0);              //重新设置原点布局集合            for (int i = 0; i < imageViews.length; i++) {                  imageViews[arg0]                          .setBackgroundResource(R.drawable.point_focused);                  if (arg0 != i) {                      imageViews[i]                              .setBackgroundResource(R.drawable.point_unfocused);                  }              }          }      } 


3. 自动翻页导航策略


线程中处理自动翻页 : 启动一个线程, 获取当前页面显示索引, 计算出下一个显示位置, 显示下一个页面;

.

相关代码 :

线程代码 :

    new Thread(new Runnable() {              @Override              public void run() {                  while (true) {                      if (isContinue) {                          viewHandler.sendEmptyMessage(atomicInteger.get());                          atomicOption();                      }                  }              }          }).start();  

handler代码 :

    private void atomicOption() {          atomicInteger.incrementAndGet();          if (atomicInteger.get() > imageViews.length - 1) {          atomicInteger.getAndAdd(-5);          }          try {              Thread.sleep(3000);          } catch (InterruptedException e) {                        }      }     /*     * 每隔固定时间切换广告栏图片     */    private final Handler viewHandler = new Handler() {            @Override          public void handleMessage(Message msg) {          adViewPager.setCurrentItem(msg.what);              super.handleMessage(msg);          }        };

.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.


三. 程序所有代码 和 资源文件


XML布局文件 :

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <RelativeLayout          android:layout_width="fill_parent"          android:layout_height="fill_parent"          android:layout_weight="5"        android:orientation="vertical" >                  <LinearLayout android:id="@+id/view_pager_content"            android:layout_height="wrap_content"            android:layout_width="wrap_content"            android:orientation="vertical"/>                 <LinearLayout              android:id="@+id/viewGroup"              android:layout_below="@id/view_pager_content"              android:layout_width="fill_parent"              android:layout_height="wrap_content"              android:layout_marginTop="-25px"              android:gravity="right"              android:orientation="horizontal" >          </LinearLayout>      </RelativeLayout>         <LinearLayout         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="2"        android:orientation="vertical"        android:background="#BBFFBB">    </LinearLayout>    </LinearLayout>


主Activity源码 :

package shuliang.han.myviewpager;import java.util.ArrayList;import java.util.List;import java.util.concurrent.atomic.AtomicInteger;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.widget.ImageView;import android.widget.LinearLayout;public class MainActivity extends Activity {private ViewPager adViewPager;private LinearLayout pagerLayout;private List<View> pageViews;private ImageView[] imageViews;private ImageView imageView;  private AdPageAdapter adapter;private AtomicInteger atomicInteger = new AtomicInteger(0);      private boolean isContinue = true; @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViewPager();}private void initViewPager() {//从布局文件中获取ViewPager父容器pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content);//创建ViewPager    adViewPager = new ViewPager(this);        //获取屏幕像素相关信息    DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);            //根据屏幕信息设置ViewPager广告容器的宽高        adViewPager.setLayoutParams(new LayoutParams(dm.widthPixels, dm.heightPixels * 2 / 5));                //将ViewPager容器设置到布局文件父容器中    pagerLayout.addView(adViewPager);        initPageAdapter();        initCirclePoint();        adViewPager.setAdapter(adapter);    adViewPager.setOnPageChangeListener(new AdPageChangeListener());        new Thread(new Runnable() {              @Override              public void run() {                  while (true) {                      if (isContinue) {                          viewHandler.sendEmptyMessage(atomicInteger.get());                          atomicOption();                      }                  }              }          }).start();  }    private void atomicOption() {          atomicInteger.incrementAndGet();          if (atomicInteger.get() > imageViews.length - 1) {          atomicInteger.getAndAdd(-5);          }          try {              Thread.sleep(3000);          } catch (InterruptedException e) {                        }      }     /*     * 每隔固定时间切换广告栏图片     */    private final Handler viewHandler = new Handler() {            @Override          public void handleMessage(Message msg) {          adViewPager.setCurrentItem(msg.what);              super.handleMessage(msg);          }        }; private void initPageAdapter() {pageViews = new ArrayList<View>();ImageView img1 = new ImageView(this);          img1.setBackgroundResource(R.drawable.view_add_1);          pageViews.add(img1);                  ImageView img2 = new ImageView(this);          img2.setBackgroundResource(R.drawable.view_add_2);          pageViews.add(img2);                 ImageView img3 = new ImageView(this);          img3.setBackgroundResource(R.drawable.view_add_3);          pageViews.add(img3);                 ImageView img4 = new ImageView(this);          img4.setBackgroundResource(R.drawable.view_add_4);          pageViews.add(img4);                 ImageView img5 = new ImageView(this);          img5.setBackgroundResource(R.drawable.view_add_5);          pageViews.add(img5);                 ImageView img6 = new ImageView(this);          img6.setBackgroundResource(R.drawable.view_add_6);          pageViews.add(img6);                  adapter = new AdPageAdapter(pageViews);}private void initCirclePoint(){ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);         imageViews = new ImageView[pageViews.size()];          //广告栏的小圆点图标        for (int i = 0; i < pageViews.size(); i++) {          //创建一个ImageView, 并设置宽高. 将该对象放入到数组中        imageView = new ImageView(this);              imageView.setLayoutParams(new LayoutParams(10,10));              imageViews[i] = imageView;                          //初始值, 默认第0个选中            if (i == 0) {                  imageViews[i]                          .setBackgroundResource(R.drawable.point_focused);              } else {                  imageViews[i]                          .setBackgroundResource(R.drawable.point_unfocused);              }              //将小圆点放入到布局中            group.addView(imageViews[i]);          } }/** *ViewPager 页面改变监听器  */    private final class AdPageChangeListener implements OnPageChangeListener {          /**     * 页面滚动状态发生改变的时候触发     */        @Override          public void onPageScrollStateChanged(int arg0) {          }            /**         * 页面滚动的时候触发         */        @Override          public void onPageScrolled(int arg0, float arg1, int arg2) {          }            /**         * 页面选中的时候触发         */        @Override          public void onPageSelected(int arg0) {          //获取当前显示的页面是哪个页面            atomicInteger.getAndSet(arg0);              //重新设置原点布局集合            for (int i = 0; i < imageViews.length; i++) {                  imageViews[arg0]                          .setBackgroundResource(R.drawable.point_focused);                  if (arg0 != i) {                      imageViews[i]                              .setBackgroundResource(R.drawable.point_unfocused);                  }              }          }      }     private final class AdPageAdapter extends PagerAdapter {          private List<View> views = null;            /**         * 初始化数据源, 即View数组         */        public AdPageAdapter(List<View> views) {              this.views = views;          }                  /**         * 从ViewPager中删除集合中对应索引的View对象         */        @Override          public void destroyItem(View container, int position, Object object) {              ((ViewPager) container).removeView(views.get(position));          }            /**         * 获取ViewPager的个数         */        @Override          public int getCount() {              return views.size();          }            /**         * 从View集合中获取对应索引的元素, 并添加到ViewPager中         */        @Override          public Object instantiateItem(View container, int position) {              ((ViewPager) container).addView(views.get(position), 0);              return views.get(position);          }            /**         * 是否将显示的ViewPager页面与instantiateItem返回的对象进行关联         * 这个方法是必须实现的         */        @Override          public boolean isViewFromObject(View view, Object object) {              return view == object;          }      }}

.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.


效果图 :



源码下载地址 :http://download.csdn.net/detail/han1202012/6835401

.

更多相关文章

  1. Android:指定某浏览器访问指定页面
  2. Android(安卓)studio 中与本地 html 页面交互
  3. Android数据储存——文件储存
  4. 修改Android镜像文件 ramdisk.img、system.img、userdata.img获
  5. Android实现任务管理器
  6. 让组件悬浮所有页面之上
  7. Phonegap获取imei (修改phonegap官方提供文件)
  8. Android获取外部和内部存储空间总大小
  9. Android(安卓)GPS定位实现

随机推荐

  1. android 使图片显示 圆角
  2. android 常用混淆
  3. android 根据Uri获取文件绝对路径
  4. 根据请求头跳转判断Android&iOS
  5. android 获取设备唯一标识:imei 通过Telep
  6. 重命名sd卡中的文件名
  7. 【Android】Spannable实现文字高亮
  8. IPPH-发送广播
  9. android手势滑动——左右滑动效果实现
  10. 任务栏一键删除 Recent APP