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

简介: 看开源框架:https://github.com/tianshaojie/AndroidFine,里面有如下效果,特记录学习下,以后项目中用也好能够立刻想起来。   如上面所示,是常见项目中的图片轮训和展示效果,技术主要涉及到viewpager+photoview,那下面主要讲解如何在and...
看开源框架: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代码可参考:
 
loopviewpager包下代码可参考:
https://github.com/tianshaojie/AndroidFine/tree/master/app/src/main/java/com/yuzhi/fine/ui/loopviewpager
相关文章
|
1月前
|
API Android开发 开发者
Android UI设计: 什么是RecyclerView?为什么它比ListView更好?
Android UI设计: 什么是RecyclerView?为什么它比ListView更好?
19 2
|
2月前
|
XML Java Android开发
Android Studio App开发之翻页视图ViewPager的讲解及实战(附源码 包括翻页视图和翻页标签栏)
Android Studio App开发之翻页视图ViewPager的讲解及实战(附源码 包括翻页视图和翻页标签栏)
42 0
|
2月前
|
XML Java Android开发
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
38 0
|
2月前
|
XML Java Android开发
Android Studio App开发实战项目之广告轮播(附源码 可用于大作业)
Android Studio App开发实战项目之广告轮播(附源码 可用于大作业)
37 1
|
2月前
|
XML Java Android开发
Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)
Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)
40 1
|
2月前
|
XML Android开发 数据格式
安卓-无敌解决ListView添加标题头无法正常显示的问题(歪门邪道)
安卓-无敌解决ListView添加标题头无法正常显示的问题(歪门邪道)
28 0
|
4月前
|
Java Android开发
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
|
5月前
|
数据处理 Android开发
关于安卓viewpager实现堆叠卡片交互
关于安卓viewpager实现堆叠卡片交互
129 1
|
1月前
|
存储 Java 开发工具
Android开发的技术与开发流程
Android开发的技术与开发流程
74 1
|
1月前
|
安全 Android开发 开发者
【Android开发小技巧】扔掉这坑人的 Handler
【Android开发小技巧】扔掉这坑人的 Handler
25 0

相关产品

  • 云迁移中心