与轮播图结合的ViewPagerIndicatorView

首先看看长啥样吧



没错，这种Indication和我们在百度上一搜一大把的还是有点不一样的，这个完全就是用作为展示用的，用来提示用户当前是第几页了。

首先来看一下主要的控件，

IndicatorView.java

import android.content.Context;
[code]import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

import java.lang.ref.WeakReference;

import cn.mifengkong.loan.R;

/**

* user guide, viewpager indicator

*

*/

public class IndicatorView extends RelativeLayout {

/**

    * anchor container

   */

private LinearLayout indicateLayout;

private Handler refreshHandler;

/**

    * page total count

   */

private int totelCount = 0;

/**

    * current page

   */

private int currentIndex = 0;

public IndicatorView(Context context, AttributeSet attrs) {

super(context, attrs);

this.init(context);

}

public IndicatorView(Context context) {

super(context);

this.init(context);

}

/**

    * @param context

   */

private void init(Context context) {

LayoutInflater.from(context).inflate(R.layout.viewpager_indicator_layout, this);

this.indicateLayout = (LinearLayout) findViewById(R.id.image_indicater_layout);

this.refreshHandler = new ScrollIndicateHandler(IndicatorView.this);

}

/**

    * get current index

   */

public int getCurrentIndex() {

return this.currentIndex;

}

public void setTotalCount(int size) {

this.totelCount = size;

}

/**

    * git view count

   */

public int getTotalCount() {

return this.totelCount;

}

/**

    * set show item current

    *

    * @param index postion

   */

public void setCurrentItem(int index) {

this.currentIndex = index;

}

/**

    * show

   */

public void show() {

for (int index = 0; index < this.totelCount; index++) {

final View indicater = new ImageView(getContext());

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

params.leftMargin = 10;

indicater.setLayoutParams(params);

this.indicateLayout.addView(indicater, index);

}

this.refreshHandler.sendEmptyMessage(currentIndex);

}

/**

    * refresh indicate anchor

   */

protected void refreshIndicateView() {

for (int index = 0; index < totelCount; index++) {

    final ImageView imageView = (ImageView) this.indicateLayout.getChildAt(index);

    if (this.currentIndex == index) {

imageView.setBackgroundResource(R.drawable.dot_focus);

} else {

imageView.setBackgroundResource(R.drawable.dot_normal);

}

}

}

/**

    * ScrollIndicateHandler

   */

private static class ScrollIndicateHandler extends Handler {

private final WeakReference<IndicatorView> scrollIndicateViewRef;

public ScrollIndicateHandler(IndicatorView scrollIndicateView) {

    this.scrollIndicateViewRef = new WeakReference<IndicatorView>(

    scrollIndicateView);

}

@Override

public void handleMessage(Message msg) {

    super.handleMessage(msg);

    IndicatorView scrollIndicateView = scrollIndicateViewRef.get();

    if (scrollIndicateView != null) {

scrollIndicateView.refreshIndicateView();

}

}

}

}

[/code]

贴完代码，现在来看一下代码：

public IndicatorView(Context context, AttributeSet attrs) {

super(context, attrs);

this.init(context);

}

public IndicatorView(Context context) {

super(context);

this.init(context);

}

[/code]

两个构造方法都调用了init()方法来初始化布局以及控件。

在初始化完控件以后，调用getTotalCount()给控件设置点的个数,以及调用setCurrentItem()方法来设置默认选中的点

show()方法:

public void show() {

for (int index = 0; index < this.totelCount; index++) {

final View indicater = new ImageView(getContext());

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(

    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

params.leftMargin = 10;

indicater.setLayoutParams(params);

this.indicateLayout.addView(indicater, index);

}

this.refreshHandler.sendEmptyMessage(currentIndex);

}

[/code]

就是将我们的一个一个的点添加到我们的线性布局中,并且我们还利用LinearLayout.LayoutParams来给点进行布局，这里的话，我让点距离右边10PX。添加完以后

调用了Handler的sendEmptyMessage方法发送了一个消息，我们的Handler还做了防止内存泄漏的操作。

在Handler的SendMessage方法中调用了refreshIndicateView()方法,

/**

    * refresh indicate anchor

   */

protected void refreshIndicateView() {

for (int index = 0; index < totelCount; index++) {

    final ImageView imageView = (ImageView) this.indicateLayout.getChildAt(index);

    if (this.currentIndex == index) {

imageView.setBackgroundResource(R.drawable.dot_focus);

} else {

imageView.setBackgroundResource(R.drawable.dot_normal);

}

}

}

[/code]

再该方法中，就只是分别对选中的点和没有选中的点设置了不同的背景图片，当然你也可以自己设置背景图片的样式。

viewpager_indicator_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

>

<LinearLayout

android:id="@+id/image_indicater_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_alignParentBottom="true"

android:layout_marginBottom="10dp"

android:gravity="center"

android:minHeight="10dp"

android:minWidth="60dp"

android:orientation="horizontal" >

</LinearLayout>

</RelativeLayout>

[/code]

两个背景图片的样式也贴一下吧

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="#ffffff" />

<size

android:width="6dp"

android:height="6dp"/>

<corners

android:radius="6dp"/>

</shape>

[/code]

dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="#ffffff" />

<size

android:width="18dp"

android:height="6dp"/>

<corners

android:radius="5dp"/>

</shape>

[/code]

然后接下来的看一下如何使用吧

IndicatorView indicatorView = new IndicatorView(getActivity());

    indicatorView.setTotalCount(mImageViewUrl.size());//设置点的个数

    indicatorView.setCurrentItem(0);//设置默认选中的点

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(

    RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);

    params.addRule(RelativeLayout.CENTER_HORIZONTAL);//设置我们的View水平居中

    params.addRule(RelativeLayout.ALIGN_BOTTOM);//设置IndicatorView居于底部

    params.bottomMargin = CommonUtil.dip2px(UiUtils.getContext(), 10);//距离底部10DP

    mTopView.addView(indicatorView,params);//将IndicatorView添加到布局中

    indicatorView.show();//将IndicatorView显示粗来

[/code]

mImageViewUrl这个参数是用来存放轮播图图片的地址集合

这样还不够，轮播图肯定是挥动的，所以我们要在ViewPager的OnPageChangeListener监听器中onPageSelected方法对选中的点进行改变

private class MyOnPageChangeListener implements OnPageChangeListener {

/**

* 界面选中的时候调用,初始化点的滚动

*/

@Override

public void onPageSelected(final int position) {

	if (null != indicatorView && indicatorView.getTotalCount() > 0) {

indicatorView.setCurrentItem(position % mImageUrl.size());//  

% mImageUrl.size() 这个是因为我的轮播图是无限滚动的，所以加上这个，如果你的轮播图不是这样的，可以去掉

indicatorView.refreshIndicateView();

}

}

@Override

public void onPageScrollStateChanged(int arg0) {

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

}

[/code]