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

android項目實戰 --ListView 頭部ViewPager廣告輪詢圖效果