【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么在Android中自定義一個(gè)圖片輪播Banner控件

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么在Android中自定義一個(gè)圖片輪播Banner控件

這篇文章給大家介紹怎么在Android中自定義一個(gè)圖片輪播Banner控件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。功能特點(diǎn)支持自定義寬高比例支持自定義圖片切換時(shí)間支持自定義指示點(diǎn)的顏色支持自定義指示點(diǎn)的背景色支持自定義指示點(diǎn)的高度支持是否顯示指示點(diǎn)支持每個(gè)圖片設(shè)置不同的點(diǎn)擊事件使用簡(jiǎn)單

<com.xiaomai.bannerview.BannerView

android:id="@+id/bannerView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:aspectRatio="1.5"

app:defaultSrc="@mipmap/ic_launcher"

app:indicatorBackground="@color/white"

app:indicatorHeight="50dp"

app:indicatorPositionSize="8dp"

app:updateTime="3000"

/>實(shí)現(xiàn)步驟聲明自定義的屬性創(chuàng)建一個(gè)類繼承RelativeLayout解析屬性聲明自定義的屬性在values/attrs文件中創(chuàng)建自定義的屬性<resources>

<declare-styleable

name="BannerView">

<attr

name="aspectRatio"

format="float"

/>

<!--

寬高比

-->

<attr

name="defaultSrc"

format="integer|reference"

/>

<!--

占位圖

-->

<attr

name="updateTime"

format="integer"

/>

<!--

圖片切換時(shí)間

-->

<attr

name="indicatorVisible"

format="boolean"

/>

<!--

是否顯示指示器

-->

<attr

name="indicatorHeight"

format="dimension"

/>

<!--

指示器的高度

-->

<attr

name="indicatorBackground"

format="color|reference"

/>

<!--

指示器的背景顏色

-->

<attr

name="indicatorPositionSize"

format="dimension"

/>

<!--

指示點(diǎn)的大小

-->

</declare-styleable>

</resources>創(chuàng)建BannerView類public

class

BannerView

extends

RelativeLayout

{

public

BannerView(Context

context)

{

this(context,

null);

}

public

BannerView(Context

context,

AttributeSet

attrs)

{

this(context,

attrs,

0);

}

public

BannerView(Context

context,

AttributeSet

attrs,

int

defStyleAttr)

{

super(context,

attrs,

defStyleAttr);}在BannerView中聲明變量屬性private

Context

context;

private

Handler

handler;

private

ImageLoader

imageLoader;

private

DisplayImageOptions

options;

private

boolean

isHaveHandler

=

true;//

當(dāng)用戶點(diǎn)擊輪播圖時(shí)，取消handler隊(duì)列，也就是取消滾動(dòng)

//

控件Start

private

ViewPager

viewPager;

private

LinearLayout

indicator;//

指示器

private

onItemClickListener

listener;

//

控件End

//

自定義屬性Start

private

float

mAspectRatio;

//

寬高比

private

int

defaultImageResource;

//

默認(rèn)占位圖

private

int

updateTime;

//

圖片切換的時(shí)間間隔,默認(rèn)3秒

private

boolean

showIndicator;

//

是否顯示指示器,默認(rèn)顯示

private

int

indicatorHeight;//

指示器的高度,默認(rèn)35dp

private

int

indicatorPositionSize;

//

指示器的大小

private

int

indicatorBackground;

//

指示器的背景顏色

//

自定義屬性End

//

數(shù)據(jù)Start

private

int

imageCount;

private

int

lastPosition;

private

List<Integer>

imageResources;

private

List<Image>

imageUrls;

//

數(shù)據(jù)End解析自定義屬性的值接下來(lái)為自定義的屬性賦值，在3個(gè)參數(shù)的構(gòu)造方法中初始化變量。public

BannerView(Context

context,

AttributeSet

attrs,

int

defStyleAttr)

{

super(context,

attrs,

defStyleAttr);

parseCustomAttributes(context,

attrs);

this.context

=

context;

handler

=

new

Handler();

imageLoader

=

ImageLoader.getInstance();

options

=

HSApplication.getDisplayOptions().build();

initViews();

}

/**

*

解析自定義屬性

*

*

@param

context

*

@param

attrs

*/

private

void

parseCustomAttributes(Context

context,

AttributeSet

attrs)

{

TypedArray

typedArray

=

context.obtainStyledAttributes(attrs,

R.styleable.BannerView);

mAspectRatio

=

typedArray.getFloat(R.styleable.BannerView_aspectRatio,

0f);

defaultImageResource

=

typedArray.getResourceId(R.styleable.BannerView_defaultSrc,

R.drawable.about_us);

updateTime

=

typedArray.getInt(R.styleable.BannerView_updateTime,

3000);

showIndicator

=

typedArray.getBoolean(R.styleable.BannerView_indicatorVisible,

true);

indicatorHeight

=

(int)

(typedArray.getDimension(R.styleable.BannerView_indicatorHeight,

Utils.dip2px(context,

35)));

indicatorBackground

=

typedArray.getResourceId(R.styleable.BannerView_indicatorBackground,

R.color.white_alpha00);

indicatorPositionSize

=

(int)

typedArray.getDimension(

R.styleable.BannerView_indicatorPositionSize,

Utils.dip2px(context,

5));

typedArray.recycle();

}

private

void

initViews()

{

viewPager

=

new

ViewPager(context);

viewPager.addOnPageChangeListener(new

ViewPager.OnPageChangeListener()

{

@Override

public

void

onPageScrolled(int

position,

float

positionOffset,

int

positionOffsetPixels)

{

}

@Override

public

void

onPageSelected(int

position)

{

if

(showIndicator)

{

for

(int

i

=

0;

i

<

indicator.getChildCount();

i++)

{

indicator.getChildAt(i).setSelected(false);

}

indicator.getChildAt(position

%

imageCount).setSelected(true);

}

lastPosition

=

position;

}

@Override

public

void

onPageScrollStateChanged(int

state)

{

switch

(state)

{

case

ViewPager.SCROLL_STATE_IDLE://

空閑狀態(tài)

if

(!isHaveHandler)

{

isHaveHandler

=

true;

handler.postDelayed(updateRunnable,

updateTime);

}

break;

case

ViewPager.SCROLL_STATE_DRAGGING://

用戶滑動(dòng)狀態(tài)

handler.removeCallbacks(updateRunnable);

isHaveHandler

=

false;

break;

}

}

});

addView(viewPager,

new

LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT));

if

(showIndicator)

{

indicator

=

new

LinearLayout(context);

indicator.setOrientation(LinearLayout.HORIZONTAL);

indicator.setGravity(Gravity.CENTER);

indicator.setBackgroundResource(indicatorBackground);

RelativeLayout.LayoutParams

layoutParams

=

new

LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT,

indicatorHeight);

layoutParams.addRule(ALIGN_PARENT_BOTTOM);

addView(indicator,

layoutParams);

}

}控件和自定義的屬性都經(jīng)過(guò)賦值和初始化了，接下來(lái)，該為設(shè)置圖片資源了。

public

void

setImageResources(List<Integer>

imageResources)

{

if

(imageResources

==

null

||

imageResources.size()

==

0)

{

throw

new

RuntimeException("圖片資源為空");

}

this.imageResources

=

imageResources;

imageCount

=

imageResources.size();

}

public

void

setImageUrls(List<Image>

imageUrls)

{

if

(imageUrls

==

null

||

imageUrls.size()

==

0)

{

throw

new

RuntimeException("圖片地址資源為空");

}

this.imageUrls

=

imageUrls;

imageCount

=

imageUrls.size();

loadImages();

}

private

void

loadImages()

{

if

(showIndicator)

{

addIndicationPoint();

}

viewPager.setAdapter(new

MyViewPageAdapter());

viewPager.setCurrentItem(200

-

(200

%

imageCount));

handler.removeCallbacks(updateRunnable);

handler.postDelayed(updateRunnable,

updateTime);

}

/**

*

添加指示點(diǎn)到指示器中

*/

private

void

addIndicationPoint()

{

//

防止刷新重復(fù)添加

if

(indicator.getChildCount()

>

0)

{

indicator.removeAllViews();

}

View

pointView;

int

margin

=

Utils.dip2px(context,

5f);

LinearLayout.LayoutParams

layoutParams

=

new

LinearLayout.LayoutParams(

indicatorPositionSize,

indicatorPositionSize);

layoutParams.setMargins(margin,

margin,

margin,

margin);

for

(int

i

=

0;

i

<

imageCount;

i++)

{

pointView

=

new

View(context);

pointView.setBackgroundResource(R.drawable.indicator_selector);

if

(i

==

lastPosition)

{

pointView.setSelected(true);

}

else

{

pointView.setSelected(false);

}

indicator.addView(pointView,

layoutParams);

}

}

private

class

MyViewPageAdapter

extends

PagerAdapter

{

@Override

public

int

getCount()

{

return

Integer.MAX_VALUE;

}

@Override

public

boolean

isViewFromObject(View

view,

Object

object)

{

return

view

==

object;

}

@Override

public

Object

instantiateItem(ViewGroup

container,

final

int

position)

{

final

ImageView

imageView

=

new

ImageView(container.getContext());

imageView.setImageResource(defaultImageResource);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

final

Image

image

=

imageUrls.get(position

%

imageCount);

imageLoader.displayImage(image.getImageUrl(),

imageView,

options);

imageView.setOnClickListener(new

OnClickListener()

{

@Override

public

void

onClick(View

v)

{

if

(listener

!=

null)

{

listener.onClick(v,

position

%

imageCount,

image.getAction(),