android安卓开发之图片轮播器demo

来源：互联网发布：约瑟夫环数据编辑：程序博客网时间：2024/05/16 16:59

安卓开发中，图片轮播器在app里是很常见的，下面通过一个demo来展示一下是如何实现一个图片轮播器的。
1.先来看一下图片轮播器demo的layout布局文件

activity_main.xml 图片轮播器实现主界面的activity的布局layout文件

<!---activity_main.xml实现图片轮播的Activity的layout--><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <TextView        android:layout_width="match_parent"        android:layout_height="50dp"        android:text="图片轮播器"        android:textSize="24sp"        android:gravity="center"/>    <!--这里留一个linearlayout来放置图片轮播器的view-->    <LinearLayout        android:id="@+id/ll_board_viewpager"        android:layout_width="match_parent"        android:layout_height="160dp"        android:tag="board_viewpager"        android:orientation="vertical"        /></LinearLayout>

viewpager_board.xml 图片轮播器的view的layout布局,底部的用于放置圆点指示器，用来指示现在显示的是第几张图片

<?xml version="1.0" encoding="utf-8"?><!--viewpager_board.xml 图片轮播器的view布局--><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:gravity="center_horizontal"    >    <android.support.v4.view.ViewPager        android:id="@+id/vp_board"        android:layout_width="match_parent"        android:layout_height="150dip" /><!--这里放置的是图片圆点指示器的view-->    <LinearLayout        android:id="@+id/ll_board_dot"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="10dp"        >    </LinearLayout></RelativeLayout>

viewpager_board_dot.xml 图片轮播器中底部的一个圆点，其中布局src写的是一个selector

<?xml version="1.0" encoding="utf-8"?><!--一个图片的圆点指示器view--><ImageView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center_vertical"    android:clickable="true"    android:padding="10dp"    android:src="@drawable/point_yellow"    ></ImageView>

viewpager_item_picture.xml 显示一张图片的布局

<?xml version="1.0" encoding="utf-8"?><!--一个图片的圆点指示器view--><ImageView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center_vertical"    android:clickable="true"    android:padding="10dp"    android:src="@drawable/point_yellow"    ></ImageView>

2.下一步来看一下，Activity的编码
activity源码
为了实现网络图片的加载这里选用了volley作为网络图片的加载框架，ImagerLoaderUtil为volley里面一个图片的加载类。如果不用volley也可以用其他的如ImagerLoader之类的，是为了实现网络图片的缓存与加载。
MainActivity 主activity的编码实现如下：

package com.sjcao.picturerotator;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.LinearLayout;import com.sjcao.picturerotator.volley.RequestManager;import java.util.ArrayList;import java.util.List;public class MainActivity extends Activity {    private LayoutInflater inflater;    private LinearLayout ll_board_viewpager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        inflater=LayoutInflater.from(this);        RequestManager.init(this);  //volley框架的初始化        initView();    }    private void initView() {            ll_board_viewpager= (LinearLayout) findViewById(R.id.ll_board_viewpager);        List<String> datas=new ArrayList<String>(); //模拟加载网络的图片地址        datas.add("http://h.hiphotos.baidu.com/image/pic/item/71cf3bc79f3df8dc668cb219ce11728b46102880.jpg");        datas.add("http://g.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31cb966705984d6277f9f2ff8fe.jpg");        datas.add("http://b.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec85dd9ae02d2eb9389b506ba8.jpg");        datas.add("http://b.hiphotos.baidu.com/image/pic/item/3c6d55fbb2fb4316e463e37b22a4462309f7d3b7.jpg");            ll_board_viewpager.addView(new PictureRotator(this,inflater,3000).initView(datas)); //这里是添加图片轮播器    }}

PictureRotator 图片轮播器的核心代码，代码比较多需要耐心的看完。

package com.sjcao.picturerotator;import android.content.Context;import android.os.Handler;import android.os.Message;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;import java.util.Timer;import java.util.TimerTask;/** * Created by senjucao on 2015/8/5. */public class PictureRotator implements ViewPager.OnPageChangeListener {    private ViewPager vp_board;    private Context context;    private LayoutInflater inflater;    private int timeout;  //多长时间切换一次pager    List<View> views; //装载图片的View列表    private ImageView[] dots; //圆点指示器    private int currentIndex; //当前索引    Timer timer;    TimerTask task;    int count = 0;    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            switch (msg.what) {                case 0:                    int currentPage = (Integer) msg.obj;                    setCurrentDot(currentPage);                    vp_board.setCurrentItem(currentPage);                    break;            }        }    };    public PictureRotator(Context context, LayoutInflater inflater, int timeout) {        this.context = context;        this.inflater = inflater;        this.timeout = timeout;    }    public View initView(final List<String> datas){        View view= inflater.inflate(R.layout.viewpager_board,null);        vp_board= (ViewPager) view.findViewById(R.id.vp_board);        vp_board.setOnPageChangeListener(this);        views=new ArrayList<View>();        LinearLayout ll_board_dot= (LinearLayout) view.findViewById(R.id.ll_board_dot);        for(int i=0;i<datas.size();i++){            views.add(inflater.inflate(R.layout.viewpager_item_picture,null));            ll_board_dot.addView(inflater.inflate(R.layout.viewpager_board_dot,null));        }        initDots(view, ll_board_dot); //初始化点指示器        ViewPagerAdapter adapter=new ViewPagerAdapter(context,views,datas);        vp_board.setOffscreenPageLimit(3); //设置viewpager保留多少个显示界面        vp_board.setAdapter(adapter);        timer=new Timer();        task=new TimerTask() {            @Override            public void run() {                int currentPage=count%datas.size();                count++;                Message msg=Message.obtain();                msg.what=0;                msg.obj=currentPage;                handler.sendMessage(msg);            }        };        timer.schedule(task,0,timeout); //定时切换页面        return  view;    }//初始化圆点    private void initDots(View view, LinearLayout ll_board_dot) {        dots=new ImageView[views.size()];        //循环获取小圆点指示器        for(int i=0;i<views.size();i++){            dots[i]=(ImageView)ll_board_dot.getChildAt(i);            dots[i].setEnabled(true); //都为灰色        }        currentIndex=0;        dots[currentIndex].setEnabled(false); //设置为false 黄色    }//当页面切换时，圆点也切换    private void setCurrentDot(int currentPage) {        if(currentPage<0||currentPage>views.size()-1||currentIndex==currentPage)            return;        dots[currentPage].setEnabled(false);        dots[currentIndex].setEnabled(true);        currentIndex=currentPage;    }    @Override    public void onPageScrolled(int i, float v, int i1) {    }    @Override    public void onPageSelected(int i) {        count=i;        setCurrentDot(i);    }    @Override    public void onPageScrollStateChanged(int i) {    }}

ViewPagerAdapter
图片轮播器viewPager的适配器

package com.sjcao.picturerotator;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.Toast;import java.util.List;/** * Created by senjucao on 2015/8/4. */public class ViewPagerAdapter extends PagerAdapter{    private Context context; //上下文对象    private List<String> datas;// 数据源    private List<View> views;    public ViewPagerAdapter(Context context, List<View> views, List<String> datas) {        this.context=context;        this.views=views;        this.datas=datas;    }    @Override    public int getCount() {        return datas.size();    }    @Override    public boolean isViewFromObject(View view, Object o) {        return view==o;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        ((ViewPager)container).removeView(views.get(position));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        ((ViewPager)container).addView(views.get(position));        final int index=position;        View view=views.get(position);        try {            String url=datas.get(position);            ImageView iv_item_picture= (ImageView) view.findViewById(R.id.iv_item_picture);            ImageLoaderUtil.getImage(context,iv_item_picture,url,R.mipmap.ic_launcher,R.mipmap.ic_launcher);            iv_item_picture.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(context,"第"+index+"张图片",Toast.LENGTH_SHORT).show();                }            });        }catch (Exception e){         e.printStackTrace();        }        return  view;    }}

3.demo 的实现效果如下
这里写图片描述
demo用的是android studio进行开发
下载地址：https://github.com/sjcao/PictureRotator.git

0 0