android项目实战 --ListView 头部ViewPager广告轮询图效果
看开源框架：https://github.com/tianshaojie/AndroidFine，里面有如下效果，特记录学习下，以后项目中用也好能够立刻想起来。
如上面所示，是常见项目中的图片轮训和展示效果，技术主要涉及到viewpager+photoview,那下面主要讲解如何在android App中如何实现该效果：
- 导入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文件
-
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
-
<?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代码可参考：
loopviewpager包下代码可参考：
https://github.com/tianshaojie/AndroidFine/tree/master/app/src/main/java/com/yuzhi/fine/ui/loopviewpager
