需求：每張輪播圖都帶有一個背景色，輪播圖滑動（自動輪播和手勢拖動）的同時，輪播圖背後的背景色也隨之漸變到對應的背景色；
下面是實現效果
1.首先分析分析需求，每張輪播圖都有一個對應的背景色，我們只需要得到在輪播的過程中，輪播圖滑動的距離比例，
然後根據當前的背景色和要轉到的下一個背景色，計算差值，就得到滑動過程中要顯示的背景色
2.滑動監聽當然是在onPageScrolled方法裏，這裏我們通過比較當前輪播圖的position和onPageScrolled參數的position是否相同，來判斷是向左滑動還是向右滑動，以便我們知道要滑動到的背景是哪一張（需要判斷一下第一張和最後一張的情況）
int currentBannerPosition=0;
banner.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if(positionOffset==0f){
return;
}
//滑向前一個（positionOffset從1-0）position變化 滑向後一個position不變（從0-1）
if(position!=currentBannerPosition){
if(currentBannerPosition==0){
currentColor= ColorConvertUtil.culculateColor(imageList.get(currentBannerPosition).getBgColor(),imageList.get(imageList.size()-1).getBgColor(),1-positionOffset);
}else{
currentColor= ColorConvertUtil.culculateColor(imageList.get(currentBannerPosition).getBgColor(),imageList.get(currentBannerPosition-1).getBgColor(),1-positionOffset);
}
}else{
if(currentBannerPosition==imageList.size()-1){
currentColor= ColorConvertUtil.culculateColor(imageList.get(currentBannerPosition).getBgColor(),imageList.get(0).getBgColor(),positionOffset);
}else{
currentColor= ColorConvertUtil.culculateColor(imageList.get(currentBannerPosition).getBgColor(),imageList.get(currentBannerPosition+1).getBgColor(),positionOffset);
}
}
//這裏設置背景色
refreshBg();
}
@Override
public void onPageSelected(int position) {
//在滑到下一張之後，我們變更一下當前position
currentBannerPosition=position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
這裏我在記錄一下計算顏色的方法，方法傳入的三個參數，起始顏色（當前position的背景色），目標顏色（要切換到的下一張輪播圖的背景色），rate（當前變化的比例，也就是positionOffset的值，注意要轉換成從0到1的變化形式）
public static int culculateColor(int startColor,int endColor,float rate){
int startRed = (startColor & 0xff0000) >> 16;
int startGreen = (startColor & 0x00ff00) >> 8;
int startBlue = (startColor & 0x0000ff);
int endRed = (endColor & 0xff0000) >> 16;
int endGreen = (endColor & 0x00ff00) >> 8;
int endBlue = (endColor & 0x0000ff);
int resultRed= (int) (startRed+(float)(endRed-startRed)*rate);
int resultGreen= (int) (startGreen+(float)(endGreen-startGreen)*rate);
int resultBlue= (int) (startBlue+(float)(endBlue-startBlue)*rate);
return Color.rgb(resultRed, resultGreen, resultBlue);
}
這裏的計算方式，是將十進制的顏色拆分成RGB的三種色值，然後分別做比例計算，最後再轉成十進制的顏色，就得到漸變的顏色啦