1. 程式人生 > >android開發之仿商城首頁Banner圖的實現

android開發之仿商城首頁Banner圖的實現

list()方法 into nal 滾動 商城 專業 bili pub 縮放

實現效果:當banner滾動的時候 首先會縮放當前以及上一個或下一個banner圖,當banner滾動時會,背景會隨滾動系數變化縮放(自動滾動),下面相關技術人員來分享一下源碼:
//0無狀態,1縮放,2放大,3不能再播放動畫

private int status = 0;

private void fada() {

if (status == 0 || status == 1) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//組合動畫

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 0.9f, 1f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 0.9f, 1f);

animatorSetsuofang.setDuration(500);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//兩個動畫同時開始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

stopAutoPlay();

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

Log.e("as", "sa");

startAutoPlay();

status = 2;

}

});

animatorSetsuofang.start();

}

}

private void suoxia() {

if (status == 0 || status == 2) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//組合動畫

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 1f, 0.9f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 1f, 0.9f);

animatorSetsuofang.setDuration(200);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//兩個動畫同時開始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

stopAutoPlay();

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

// startAutoPlay();

status = 1;

}

});

animatorSetsuofang.start();

}

}

動畫聯動效果實現:

private final Runnable task = new Runnable() {

@Override

public void run() {

if (status == 0 || status == 2) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//組合動畫

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 1f, 0.9f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 1f, 0.9f);

animatorSetsuofang.setDuration(300);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//兩個動畫同時開始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

if (count > 1 && isAutoPlay) {

currentItem = currentItem % (count + 1) + 1;

// Log.i(tag, "curr:" + currentItem + " count:" + count);

if (currentItem == 1) {

viewPager.setCurrentItem(currentItem, false);

handler.post(task);

} else {

viewPager.setCurrentItem(currentItem);

handler.postDelayed(task, delayTime);

}

}

status = 1;

}

});

animatorSetsuofang.start();

}

}

};

縮放(拖動)效果實現:

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

int num = 0;

if (mOnPageChangeListener != null) {

// Log.e("as", "position" + position + " ----positionOffset " + positionOffset + " positionOffsetPixels" + positionOffsetPixels);

// Log.e(scale);

Log.e("as", imageUrls.size() + "" + " currentItem" + currentItem);

if (positionOffset > 0) {

Log.e("as", "position" + position + " currentItem" + currentItem + "mViewPagerIndex" + mViewPagerIndex);

// Log.e("as", mViewPagerIndex + "");

if (touch) {

if (currentItem == imageUrls.size() + 1) {

Glide.with(context).load(imageUrls.get(0)).into(roundImageView);

Glide.with(context).load(imageUrls.get(0)).into(roundImagetwo);

} else {

if (currentItem == 0) {

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImagetwo);

} else {

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImagetwo);

}

}

if (position == mViewPagerIndex) {

Log.e("tt", "左");

if (position == imageUrls.size()) {

num = 0;

} else {

num = position;

}

Glide.with(context).load(imageUrls.get(num)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImageView.setVisibility(VISIBLE);

roundImagetwo.setVisibility(INVISIBLE);

} else {

Log.e("tt", "右");

if (position == 0) {

num = imageUrls.size();

} else {

num = position;

}

Glide.with(context).load(imageUrls.get(num - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImagetwo.setVisibility(VISIBLE);

roundImageView.setVisibility(INVISIBLE);

}

} else {

if (!touchover) {

if (position < currentItem) {

roundImageView.setVisibility(VISIBLE);

roundImagetwo.setVisibility(INVISIBLE);

}

}

if (position == imageUrls.size()) {

Glide.with(context).load(imageUrls.get(0)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else if (position == 0) {

num = imageUrls.size();

Glide.with(context).load(imageUrls.get(num - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

if (position == mViewPagerIndex) {

Glide.with(context).load(imageUrls.get(position)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

if (!touchover) {

Glide.with(context).load(imageUrls.get(position)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

Glide.with(context).load(imageUrls.get(position - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImageView.setVisibility(INVISIBLE);

roundImagetwo.setVisibility(VISIBLE);

}

//

}

}

}

//

} else {

roundImagetwo.setVisibility(VISIBLE);

roundImageView.setVisibility(VISIBLE);

if (currentItem == imageUrls.size() + 1) {

Glide.with(context).load(imageUrls.get(0)).into(roundImageView);

Glide.with(context).load(imageUrls.get(0)).into(roundImagetwo);

} else {

if (currentItem == 0) {

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImagetwo);

} else {

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImagetwo);

}

}

}

roundImagetwo.setRound(1f - positionOffset);

roundImageView.setRound(positionOffset);

if ((positionOffset == 0) && touch == false) {

fada();

}

mOnPageChangeListener.onPageScrolled(toRealPosition(position), positionOffset, positionOffsetPixels);

}

}

輪播圖數據綁定

banner.setImages(imagebgUrls)

.setImageLoader(new GlideImageLoader())

.setImageList(images)

.start();

  好了,到這裏就算是完後才能了,如果大家需要改banner依賴包的setImageList()方法,不然無法在主線程中添加數據,還存在不理解的地方也是可以留言咨詢。

  本文由專業的鄭州app開發公司燚軒科技整理發布,原創不易,如需轉載請註明出處!

android開發之仿商城首頁Banner圖的實現