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>