Android网络图片实现图片轮播

今天看到洪洋也就是翔哥大神的视频和博客之后，深的体会，翔哥的地址：http://blog.csdn.net/lmj623565791/article/details/42160391

看了他的博客之后就会很清晰实现一个图片轮播如何实现，首先得自定义一个指示器ViewPagerIndicator继承LinearLayout，然后自定义View的两个构造方法

public ViewPagerIndicator(Context context) {
    this(context,null);
}

public ViewPagerIndicator(Context context, AttributeSet attrs) {
    super(context, attrs);
   
}

之后activity_main布局如下：

<?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="180dp"
    android:background="@android:color/holo_blue_bright"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></android.support.v4.view.ViewPager>

<com.confress.customimageslider.ViewPagerIndicator
    android:id="@+id/indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="5dp"
    android:orientation="horizontal">
</com.confress.customimageslider.ViewPagerIndicator>


</RelativeLayout>
预期实现效果如下：
首先实现的就是Viewpager和指示器的滑动显示效果，那么第一步就是建立ViewPager的Fragment，Fragment代码如下：
package com.confress.customimageslider;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

/**
 * Created by admin on 2016/3/22.
 */
public class VpSimpleFragment extends Fragment {
    private String mImagePath;
    public  static final  String BUNDLE_IMAGEPATH="image_path";


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       Bundle bundle=getArguments();
        if (bundle!=null){
            mImagePath=bundle.getString(BUNDLE_IMAGEPATH);
        }
        View root=inflater.inflate(R.layout.fragment_image,container,false);
        ImageView image= (ImageView) root.findViewById(R.id.image);
        Glide.with(getActivity()).load(mImagePath).into(image);
        return root;
    }

    public  static  VpSimpleFragment newInstance(String path){
        Bundle bundle=new Bundle();
        bundle.putString(BUNDLE_IMAGEPATH, path);
        VpSimpleFragment fragment=new VpSimpleFragment();
        fragment.setArguments(bundle);
        return  fragment;
    }
}
其中fragment_image代码更加简单：
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:scaleType="fitXY">
    </ImageView>
上面代码很简单没什么好说的，MainActivity首先需要图片的地址，VpSimpleFragment的List集合，如下
private List<String> mImagePath= Arrays.asList(
        "http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg",
        "http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg",
        "http://pic18.nipic.com/20111215/577405_080531548148_2.jpg",
        "http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg",
        "http://pic.58pic.com/58pic/12/64/27/55U58PICrdX.jpg");
private  List<VpSimpleFragment> mContents=new ArrayList<>();
private FragmentPagerAdapter mAdpter;
然后初始化数据，也就是mAdpter和mContents的List集合
private void initDatas() {
    for (String imagepath:mImagePath){
        VpSimpleFragment fragment = VpSimpleFragment.newInstance(imagepath);
        mContents.add(fragment);
    }
    mAdpter=new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return mContents.get(position);
        }

        @Override
        public int getCount() {
            return mContents.size();
        }
    };
}
最后就viewpager.setAdapter(mAdpter);可以实现一个很简单的类型与微信滑动页面切换功能。但是这与我们预想得到的还是有很大出入，这时候就需要自定义和mViewpager与ViewPagerIndicator实现绑定功能。
首先是数据源ImageUrl的绑定，通过设置一个setTabItemImagecator方法实现动态添加ImageUrl与点击事件响应
public  void setTabItemImagecator(List<String> datas){
    if (datas!=null&&datas.size()>0){
        this.removeAllViews();
        this.mTabsImagePath=datas;
        for (String path:mTabsImagePath){
            addView(generateImageView());
        }
        // 设置item的click事件
        setItemClickEvent();
    }
}
private View generateImageView() {
    ImageView imageView=new ImageView(getContext());
    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
            25,25);
    lp.setMargins(5,5,5,5);
    imageView.setImageResource(R.drawable.ic_focus_select);
    imageView.setLayoutParams(lp);
    return imageView;
}
/**
 * 设置点击事件
 */
public void setItemClickEvent()
{
    int cCount = getChildCount();
    for (int i = 0; i < cCount; i++)
    {
        final int j = i;
        View view = getChildAt(i);
        view.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                mViewPager.setCurrentItem(j);
            }
        });
    }
}
之后设置一个mViewPager与指示器图片切换绑定方法：
/**
     * 对外的ViewPager的回调接口
     *
     * @author zhy
     *
     */
    public interface PageChangeListener
    {
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);
    }

    // 对外的ViewPager的回调接口
    private PageChangeListener onPageChangeListener;

    // 对外的ViewPager的回调接口的设置
    public void setOnPageChangeListener(PageChangeListener pageChangeListener)
    {
        this.onPageChangeListener = pageChangeListener;
    }

    // 设置关联的ViewPager
    public void setViewPager(final ViewPager mViewPager, final int pos)
    {
        this.mViewPager = mViewPager;

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // 设置字体颜色高亮
                resetImageViewColor();
                highLightImageView(position);

                // 回调
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageSelected(position);
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                                       int positionOffsetPixels) {
//                if (position==mTabsImagePath.size()-1){
//                    SystemClock.sleep(1000);
//                    mViewPager.setCurrentItem(0);
//                }
                mPosition = position;
                // 回调
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrolled(position,
                            positionOffset, positionOffsetPixels);
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // 回调
                if (onPageChangeListener != null) {
                    onPageChangeListener.onPageScrollStateChanged(state);
                }

            }
        });
        // 设置当前页
        mViewPager.setCurrentItem(pos);
        // 高亮
        highLightImageView(pos);
    }

    /**
     * 高亮文本
     *
     * @param position
     */
    protected void highLightImageView(int position)
    {
        View view = getChildAt(position);
        if (view instanceof ImageView)
        {
            ((ImageView) view).setImageResource(R.drawable.ic_focus);
        }

    }

    /**
     * 重置文本颜色
     */
    private void resetImageViewColor()
    {
        for (int i = 0; i < getChildCount(); i++)
        {
            View view = getChildAt(i);
            if (view instanceof ImageView)
            {
                ((ImageView) view).setImageResource(R.drawable.ic_focus_select);
            }
        }
    }
最后在设置一个定时器功能实现每2秒自动切换图片：
Timer timer = new Timer();
TimerTask task = new TimerTask() {

    @Override
    public void run() {
        // 需要做的事:发送消息
        Message message = new Message();
        message.what = mPosition+1;
        handler.sendMessage(message);
    }
};

Handler handler = new Handler() {
    public void handleMessage(Message msg) {
        mViewPager.setCurrentItem(msg.what%mTabsImagePath.size());
        super.handleMessage(msg);
    };
};
timer.schedule(task, 1000, 2000); // 1s后执行task,经过1s再次执行

可能我说的不够好，也不够精彩，毕竟我是仿造翔哥的，看翔哥的视频地址说的很清楚：http://www.imooc.com/video/11312
最后附上代码下载地址：https://github.com/1036711153/CustomImagerSilder