android项目实战 --ListView 头部ViewPager广告轮询图效果

看开源框架：https://github.com/tianshaojie/AndroidFine，里面有如下效果，特记录学习下，以后项目中用也好能够立刻想起来。

 

如上面所示，是常见项目中的图片轮训和展示效果，技术主要涉及到viewpager+photoview,那下面主要讲解如何在android App中如何实现该效果：

1. 导入photoview相关代码：

    

    2.   头部轮训和展示的代码：

    

第1个页面的实现：

首先看布局：

activity_photoview.xml文件

<?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="160dp"
    android:background="@color/white" >
    <com.soyoungboy.widget.loopviewpager.AutoLoopViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    <com.soyoungboy.widget.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="5dp"
        android:padding="5dp" />
</RelativeLayout>

PhotoViewActivity.java文件

1. public class PhotoViewActivity extends BaseFragmentActivity {
       private com.soyoungboy.widget.loopviewpager.AutoLoopViewPager pager;
       private int[] imageViewIds;
       private com.soyoungboy.widget.viewpagerindicator.CirclePageIndicator indicator;
       private List<String> imageList = new ArrayList<String>(Arrays.asList(
               "http://pic.nipic.com/2008-07-11/20087119630716_2.jpg",
               "http://pic.nipic.com/2008-07-11/20087119630716_2.jpg",
               "http://pic.nipic.com/2008-07-11/20087119630716_2.jpg"));
       @Override
       protected void onCreate(Bundle arg0) {
           super.onCreate(arg0);
           setContentView(R.layout.activity_photoview);
           initView();
       }
       @Override
       protected void initView() {
           pager = (com.soyoungboy.widget.loopviewpager.AutoLoopViewPager) findViewById(R.id.pager);
           indicator = (com.soyoungboy.widget.viewpagerindicator.CirclePageIndicator) findViewById(R.id.indicator);
           //设置要显示的图片内容
           imageViewIds = new int[] { R.drawable.house_background, R.drawable.house_background_1, R.drawable.house_background_2};
           //适配器
           GalleryPagerAdapter galleryAdapter = new GalleryPagerAdapter();
           pager.setAdapter(galleryAdapter);
           indicator.setViewPager(pager);
           //控制距离左边，上边，右边，下边的px距离
           indicator.setPadding(5, 5, 10, 5);
       }
       @Override
       protected void initTitleView() {
       }
       @Override
       protected void click(View view) {
       }
       //轮播图适配器
       public class GalleryPagerAdapter extends PagerAdapter {
           @Override
           public int getCount() {
               return imageViewIds.length;
           }
           @Override
           public boolean isViewFromObject(View view, Object object) {
               return view == object;
           }
           @Override
           public Object instantiateItem(ViewGroup container, int position) {
               ImageView item = new ImageView(PhotoViewActivity.this);
               //Imageview上面显示图片
               item.setImageResource(imageViewIds[position]);
               ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(-1, -1);
               item.setLayoutParams(params);
               item.setScaleType(ImageView.ScaleType.FIT_XY);
               container.addView(item);
               final int pos = position;
               //Imageview单击事件处理
               item.setOnClickListener(new View.OnClickListener() {
                   @Override
                   public void onClick(View v) {
                       //进入ImageGalleryActivity代码里面去
                       Intent intent = new Intent(PhotoViewActivity.this, ImageGalleryActivity.class);
                       intent.putStringArrayListExtra("images", (ArrayList<String>) imageList);
                       intent.putExtra("position", pos);
                       startActivity(intent);
                   }
               });
               return item;
           }
           @Override
           public void destroyItem(ViewGroup collection, int position, Object view) {
               collection.removeView((View) view);
           }
       }
       @Override
       protected void onResume() {
           super.onResume();
           //开始自动左右切换图片
           pager.startAutoScroll();
       }
       @Override
       protected void onPause() {
           super.onPause();
           //结束自动左右切换图片
           pager.stopAutoScroll();
       }
   }

   


第2张图功能实现：

首先布局文件activity_touch_gallery.xml

1. <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:fitsSystemWindows="true"
       android:background="@color/black">
   
       <android.support.v4.view.ViewPager
           android:id="@+id/viewer"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_below="@+id/layoutHeader" />
   
   </RelativeLayout>

   


ImageGalleryActivity .java

public class ImageGalleryActivity extends BaseFragmentActivity {

    private int position;
    private List<String> imgUrls; //图片列表
    private TextView headTitle;
    private Button headBackBtn;

    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_touch_gallery);

        Intent intent = getIntent();
        position = intent.getIntExtra("position", 0);
        //获取图片的url List集合
        imgUrls = intent.getStringArrayListExtra("images");
        if(imgUrls == null) {
            imgUrls = new ArrayList<>();
        }
        initGalleryViewPager();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
    private void initGalleryViewPager() {
        PhotoViewAdapter pagerAdapter = new PhotoViewAdapter(this, imgUrls);
        pagerAdapter.setOnItemChangeListener(new PhotoViewAdapter.OnItemChangeListener() {
            int len = imgUrls.size();
            @Override
            public void onItemChange(int currentPosition) {
                //滑动到总图片数目的几分之几
//                headTitle.setText((currentPosition+1) + "/" + len);

            }
        });
        mViewPager = (ViewPager)findViewById(R.id.viewer);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(pagerAdapter);
        mViewPager.setCurrentItem(position);
    }

    @Override
    protected void initView() {

    }

    @Override
    protected void initTitleView() {

    }

    @Override
    protected void click(View view) {

    }

}

PhotoViewAdapter代码可参考：

https://github.com/tianshaojie/AndroidFine/blob/master/app/src/main/java/com/yuzhi/fine/ui/photoview/PhotoViewAdapter.java

 

loopviewpager包下代码可参考：

https://github.com/tianshaojie/AndroidFine/tree/master/app/src/main/java/com/yuzhi/fine/ui/loopviewpager