Android 轮播焦点图简单实现

最近项目需要做一个轮播焦点图,觉得不算太难,就没有找网上的demo自己写了一个,注释写得比较详细,另外有什么不明白的地方或者建议与改进的地方也希望大家可以留言一起交流交流.

此轮播图的原理采用的是ViewPager和一个timer计时来定时滚动轮播的.

源码免积分下载地址:http://download.csdn.net/detail/qq_21806653/9376038

下面贴出相关代码:

轮播的主java代码:

相关的代码加过颜色了

package com.learn.fei.tiangou.fragment;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.learn.fei.tiangou.R;
import com.learn.fei.tiangou.adapter.MyViewPagerAdapter;
import com.learn.fei.tiangou.fragment.homeBannerFragment.Banner1;
import com.learn.fei.tiangou.fragment.homeBannerFragment.Banner2;
import com.learn.fei.tiangou.fragment.homeBannerFragment.Banner3;
import com.learn.fei.tiangou.fragment.homeFragmentPages.HomeCitys;
import com.learn.fei.tiangou.fragment.homeFragmentPages.HomeCookBook;
import com.learn.fei.tiangou.fragment.homeFragmentPages.HomeFood;
import com.learn.fei.tiangou.fragment.homeFragmentPages.HomeImages;

import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

/**
 * 首页fragment
 * Created by fei on 2015/12/15.
 */
public class HomeFragment extends Fragment implements View.OnClickListener, DrawerLayout.DrawerListener {

    private View parent;
    private Button btnFood;
    private Button btnCookBook;
    private Button btnImages;
    private Button btnCity;
    private DrawerLayout drawleft;
    private Button btnGoLeft;
    private LinearLayout leftMenu;
    private int[] mImgIds;
    private LayoutInflater mInflater;
    private LinearLayout btnScroll;
    private ArrayList<Fragment> arryList;
    private Banner1 banner1;
    private Banner2 banner2;
    private Banner3 banner3;
    private FragmentManager manager;
    private ViewPager bannerPager;
    private Timer timer;
    private TimerTask task;
    private int bannerCount = 0;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        parent = LayoutInflater.from(getActivity()).inflate(R.layout.frag_home, container, false);

        initUI();
        initListener();
        initBanner();
        return parent;
    }

    <span style="background-color: rgb(153, 255, 153);">/**
     * 实例化各个pager页面和轮播动画
     */
    private void initBanner() {
        //实例化一个arrylist存放fragment
        arryList = new ArrayList<Fragment>();
        //实例化fragment页面
        banner1 = new Banner1();
        banner2 = new Banner2();
        banner3 = new Banner3();
        //fragment添加进arryList
        arryList.add(banner1);
        arryList.add(banner2);
        arryList.add(banner3);

        manager = getChildFragmentManager();
        //调用viewpager适配器
        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(manager, getActivity(), arryList);
        bannerPager.setAdapter(myViewPagerAdapter);

        bannerPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                initFocus(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
    /**
     * 停止时
     */
    @Override
    public void onStop() {
        timer.cancel();
        super.onStop();
    }

    /**
     * 开始是开始一个线程
     */
    @Override
    public void onStart() {
        super.onStart();
        timer = new Timer();
        task = new TimerTask() {
            @Override
            public void run() {
                if (bannerCount<2){
                    bannerCount++;
                }else {
                    bannerCount=0;
                }
                Message message =mHandler.obtainMessage();
                message.what = 1001;
                message.obj = bannerCount;
                mHandler.sendMessage(message);
            }

        };
        timer.schedule(task, 0, 3000);
    }


    /**
     * handler
     */
    private Handler mHandler = new Handler(){
        public void handleMessage(Message msg) {
            if (msg.what == 1001){
               int count = (int) msg.obj;
                initFocus(count);
            }
        }
    };

    private void initFocus(int count) {
        ImageView focusImg0 = (ImageView) parent.findViewById(R.id.focus_img_1);
        ImageView focusImg1 = (ImageView) parent.findViewById(R.id.focus_img_2);
        ImageView focusImg2 = (ImageView) parent.findViewById(R.id.focus_img_3);
        focusImg0.setImageResource(R.drawable.off);
        focusImg1.setImageResource(R.drawable.off);
        focusImg2.setImageResource(R.drawable.off);
        if (count==0){
            focusImg0.setImageResource(R.drawable.on);
        }if (count==1){
            focusImg1.setImageResource(R.drawable.on);
        }if (count==2){
            focusImg2.setImageResource(R.drawable.on);
        }
        bannerPager.setCurrentItem(count);
    }</span>

    /**
     * 初始化UI
     */
    private void initUI() {
        btnFood = (Button) parent.findViewById(R.id.btn_home_food);
        btnCookBook = (Button) parent.findViewById(R.id.btn_home_cook_book);
        btnImages = (Button) parent.findViewById(R.id.btn_home_images);
        btnCity = (Button) parent.findViewById(R.id.byn_home_city);

        btnScroll = (LinearLayout) parent.findViewById(R.id.scroll_go);
        bannerPager = (ViewPager) parent.findViewById(R.id.banner_pager);


        leftMenu = (LinearLayout) parent.findViewById(R.id.left_menu_layout);


    }

    private void initListener() {
        btnFood.setOnClickListener(this);
        btnCookBook.setOnClickListener(this);
        btnImages.setOnClickListener(this);
        btnCity.setOnClickListener(this);
        btnScroll.setOnClickListener(this);


    }

    @Override
    public void onClick(View v) {

        Intent mIntent = new Intent();
        int what = v.getId();
        switch (what) {
            case R.id.btn_home_food:
                mIntent.setClass(HomeFragment.this.getActivity(), HomeFood.class);
                startActivity(mIntent);
                break;
            case R.id.btn_home_cook_book:
                mIntent.setClass(HomeFragment.this.getActivity(), HomeCookBook.class);
                startActivity(mIntent);
                break;
            case R.id.btn_home_images:
                mIntent.setClass(HomeFragment.this.getActivity(), HomeImages.class);
                startActivity(mIntent);
                break;
            case R.id.byn_home_city:
                mIntent.setClass(HomeFragment.this.getActivity(), HomeCitys.class);
                startActivity(mIntent);
                break;


        }
    }

    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
    }

    @Override
    public void onDrawerOpened(View drawerView) {

    }

    @Override
    public void onDrawerClosed(View drawerView) {

    }

    @Override
    public void onDrawerStateChanged(int newState) {

    }
}

</pre></div><div><h4>轮播的适配器MyViewPagerAdapter.java代码:</h4><div><pre name="code" class="java">package com.learn.fei.tiangou.adapter;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.ArrayList;

/**
 * 注:  FragmentStatePagerAdapter与FragmentPagerAdapter区别
 *      FragmentPagerAdapter        --该类内的每一个生成的 Fragment 都将保存在内存之中，适用于相对静态,数量少的
 *      FragmentStatePagerAdapter:  --该类将只保留当前页面，当页面离开视线后，就会被消除，释放其资源;
 *      Created by fei on 2015/12/15.
 */
public class MyViewPagerAdapter extends FragmentStatePagerAdapter{
    private Context mContext;
    private ArrayList<Fragment> arrayList;

    public MyViewPagerAdapter(FragmentManager fm,Context context,ArrayList<Fragment> arrayList) {
        super(fm);
        this.mContext=context;
        this.arrayList=arrayList;
    }

    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }

    @Override
    public int getCount() {
        return arrayList.size();
    }
}
<pre name="code" class="java">private View parent;
        private ArrayList<Fragment> arryList;
        private Banner1 banner1;
        private Banner2 banner2;
        private Banner3 banner3;
        private FragmentManager manager;
        private ViewPager bannerPager;
        private Timer timer;
        private TimerTask task;
        private int bannerCount = 0;


        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            //父fragment的布局文件
            parent = LayoutInflater.from(getActivity()).inflate(R.layout.frag_home, container, false);
            //实例化子fragment的viewpager控件
            bannerPager = (ViewPager) parent.findViewById(R.id.banner_pager);
            //初始化banner的viewpager
            initBanner();
            return parent;
        }

        /**
         * 实例化各个pager页面和轮播动画
         */
        private void initBanner() {
            //实例化一个arrylist存放fragment
            arryList = new ArrayList<Fragment>();
            //实例化fragment页面 
            banner1 = new Banner1();
            banner2 = new Banner2();
            banner3 = new Banner3();
            //fragment添加进arryList arryList.add(banner1); 
            arryList.add(banner2);
            arryList.add(banner3);
            //由于是在fragment内嵌套fragment 所以用的是getChildFragmentManager,如不是双层嵌套可以去掉Child 
            manager = getChildFragmentManager();
            //调用viewpager适配器,后面有适配器的代码 
            MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(manager, getActivity(), arryList);
            bannerPager.setAdapter(myViewPagerAdapter);
            //pager的滑动监听 用于用户手滑时后获取焦点 
            bannerPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position,
                                           float positionOffset, int positionOffsetPixels) {
                }

                @Override
                public void onPageSelected(int position) {
                    //调用小焦点图切换焦点方法 
                    initFocus(position);
                }

                @Override
                public void onPageScrollStateChanged(int state) {
                }
            });
        }

        /**
         * 暂停时
         */
        @Override
        public void onPause() {
            //程序处于暂停状态时终止这个轮播线程 
            timer.cancel();
            super.onPause();
        }

        /**
         * 获取焦点时
         */
        @Override
        public void onResume() {
            super.onResume();
            //程序获取焦点时开始一个轮播线程
            timer = new Timer();
            task = new TimerTask() {
                @Override
                public void run() {
                    //这里是轮播的逻辑
                    if (bannerCount < 2) {
                        bannerCount++;
                    } else {
                        bannerCount = 0;
                    }
                    //发送一条口令是1001的message给handler,并把当前轮播页面的下标传给handler 
                    Message message = mHandler.obtainMessage();
                    message.what = 1001;
                    message.obj = bannerCount;
                    mHandler.sendMessage(message);
                }
            };
            //第一个参数是task,第二个是启动延时的时间,第三个是多久执行一次(都是毫秒级) 
            timer.schedule(task, 0, 2000);
        }

        /**
         * handler
         */
        private Handler mHandler = new Handler() {
            public void handleMessage(Message msg) {
                //接收口令是1001的message然后接收当前轮播页的下标兵调用initFoucs方法
                if (msg.what == 1001) {
                    int count = (int) msg.obj;
                    initFocus(count);
                }
            }
        };

        /**
         * 这个方法用于轮播图下面小焦点的变化
         */
        private void initFocus(int count) {
        //实例化控件 ImageView focusImg0 = (ImageView) parent.findViewById(R.id.focus_img_1); ImageView focusImg1 = (ImageView) parent.findViewById(R.id.focus_img_2); ImageView focusImg2 = (ImageView) parent.findViewById(R.id.focus_img_3);
        }
            
            //每次轮播后初始化所有焦点图为灰色
                    focusImg0.setImageResource(R.drawable.off);
            focusImg1.setImageResource(R.drawable.off);
            focusImg2.setImageResource(R.drawable.off);
            //根据传入的count决定哪个小焦点变成彩色 if (count==0){ focusImg0.setImageResource(R.drawable.on); }if (count==1){ focusImg1.setImageResource(R.drawable.on); }if (count==2){ focusImg2.setImageResource(R.drawable.on); }//根据count变化当前显示的viewpager bannerPager.setCurrentItem(count); }}
        }

轮播的xml代码:

<span style="white-space:pre">	</span><span style="color:#009900;"><strong><!-- 以下是轮播xml布局--></strong></span>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                >
	<strong><span style="color:#009900;"><!-- 轮播的viewpager载体,这里注意要用v4包--></span></strong>
            <android.support.v4.view.ViewPager
                android:id="@+id/banner_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
	<span style="color:#009900;"><strong><!-- 轮播下方的3个小焦点--></strong></span>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginBottom="13dp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true">

                    <ImageView
                        android:id="@+id/focus_img_1"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:src="@drawable/off"
                         />
                    <ImageView
                        android:id="@+id/focus_img_2"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:src="@drawable/off"
                        android:layout_marginLeft="5dp"
                         />
                    <ImageView
                        android:id="@+id/focus_img_3"
                        android:layout_width="10dp"
                        android:layout_height="10dp"
                        android:src="@drawable/off"
                        android:layout_marginLeft="5dp"
                         />
                </LinearLayout>
            </RelativeLayout>