android根据轮播图片颜色改变背景颜色

最终效果：

（最终效果录屏后转成gif时色彩有些误差还在闪烁，直接在手机上运行是没有这种情况的。）

思路：获取轮播图当前图片的主题色并且设置给背景

首先简单写一个轮播图

因为会用到网络图片先申请权限

  <uses-permission android:name="android.permission.INTERNET" /> <!-- 访问网络权限 -->

引入轮播图和图片显示依赖

    implementation 'com.github.bumptech.glide:glide:4.9.0'implementation 'com.youth.banner:banner:2.0.10'

编写轮播布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><LinearLayoutandroid:id="@+id/ll_bg"android:layout_width="fill_parent"android:layout_height="200dp"android:orientation="vertical"><com.youth.banner.Bannerandroid:id="@+id/banner"android:layout_width="match_parent"android:layout_height="150dp"android:layout_margin="15dp" /></LinearLayout></LinearLayout>

加载显示轮播图

  private LinearLayout mLlBg;private Banner mBanner;private List<BannerBean> mBannerBeans;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main3);mLlBg = findViewById(R.id.ll_bg);mBanner = findViewById(R.id.banner);initBanner();}private void initBanner() {//模拟数据mBannerBeans = new ArrayList<>();mBannerBeans.add(new BannerBean(1, "http://p1.music.126.net/yG5m3OK4ZBBeOIkSftmjcQ==/109951165905030496.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(2, "http://p1.music.126.net/ETIySI2MCkINdRWDFK_QQQ==/109951165905559297.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(3, "http://p1.music.126.net/zzAHDSg9nWA90dJL0U6rRQ==/109951165906140657.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(4, "http://p1.music.126.net/Ly3Qh10IMv5_yjDwQTlxvA==/109951165905725276.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(5, "http://p1.music.126.net/bOg67Q_MhDgMK3xK9BRTPA==/109951165905708968.jpg?imageView&quality=89"));//自定义适配器MyBannerAdapter myBannerAdapter = new MyBannerAdapter(mBannerBeans, this);mBanner.setAdapter(myBannerAdapter).isAutoLoop(true)//自动切换.setDelayTime(2000)//轮播时间.setBannerRound(10)//圆角.setIndicator(new RectangleIndicator(this));//设置指示器;}class MyBannerAdapter extends BannerAdapter<BannerBean, MyBannerAdapter.BannerViewHolder> {private Context mContext;public MyBannerAdapter(List<BannerBean> data, Context context) {super(data);this.mContext = context;}@Overridepublic BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {ImageView imageView = new ImageView(parent.getContext());//设置为match_parent 这个是viewpager2要求imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);return new BannerViewHolder(imageView);}@Overridepublic void onBindView(BannerViewHolder holder, BannerBean data, int position, int size) {Glide.with(mContext).load(data.thumb).centerCrop().into(holder.imageView);}class BannerViewHolder extends RecyclerView.ViewHolder {ImageView imageView;public BannerViewHolder(@NonNull ImageView view) {super(view);this.imageView = view;}}
}

到这第一步测试的轮播图就显示完成了。

获取轮播图片的颜色并生成线性背景

为了获取颜色我们使用android的palette，它能获取图片中的多种颜色，在实际情况中根据需求使用特定颜色

vibrant(鲜艳色)
dark vibrant(鲜艳色中的暗色)
light vibrant(鲜艳色中的亮色)
muted(柔和色)
dark muted(柔和色中的暗色)
light muted(柔和色中的亮色)

使用palette首先加入依赖：

  implementation 'androidx.palette:palette:1.0.0'

因为palette需要图片为bitmap，所以首先通过glide把网络图片转为bitmap（子线程中操作）

 //把网络图片转成bitmapmyBitmap = Glide.with(MainActivity3.this).asBitmap().load(banner.thumb)//图片链接.submit(50, 50).get();

通过palette获取bitmap中颜色

                        Palette.from(myBitmap).generate(new Palette.PaletteAsyncListener() {@Overridepublic void onGenerated(Palette palette) {if (palette == null) return;//不一定取得到某些特定的颜色，这里通过取多种颜色来避免取不到颜色的情况if (palette.getDarkVibrantColor(Color.TRANSPARENT) != Color.TRANSPARENT) {//使用鲜艳色中的暗色和鲜艳色生成线性背景createLinearGradientBitmap(banner.id, palette.getDarkVibrantColor(Color.TRANSPARENT), palette.getVibrantColor(Color.TRANSPARENT));} else if (palette.getDarkMutedColor(Color.TRANSPARENT) != Color.TRANSPARENT) {//使用柔和色中的暗色和柔和色生成线性背景createLinearGradientBitmap(banner.id, palette.getDarkMutedColor(Color.TRANSPARENT), palette.getMutedColor(Color.TRANSPARENT));} else {//使用柔和色中的亮色和鲜艳色中的亮色生成线性背景createLinearGradientBitmap(banner.id, palette.getLightMutedColor(Color.TRANSPARENT), palette.getLightVibrantColor(Color.TRANSPARENT));}}});

通过获取的两种颜色创建线性背景，为了以后轮播图播放图和背景对应，用map保存生成的bitmap

 Bitmap bgBitmap = null;Canvas mCanvas = null;Paint mPaint = null;//创建线性渐变背景色private void createLinearGradientBitmap(int id, int color1, int color2) {try {//通过这三个基础色进行渐变int bgColors[] = new int[3];bgColors[0] = color1;bgColors[1] = color2;bgColors[2] = Color.WHITE;bgBitmap = Bitmap.createBitmap(mLlBg.getWidth(), mLlBg.getHeight(), Bitmap.Config.ARGB_4444);mCanvas = new Canvas();mPaint = new Paint();mCanvas.setBitmap(bgBitmap);mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);//纵向的线性渐变LinearGradient gradient = new LinearGradient(0, 0, 0, bgBitmap.getHeight(), bgColors, null, Shader.TileMode.CLAMP);mPaint.setShader(gradient);//绘制矩形RectF rectF = new RectF(0, 0, bgBitmap.getWidth(), bgBitmap.getHeight());mCanvas.drawRect(rectF, mPaint);mBgBitmaps.put(id, bgBitmap);bgBitmap = null;} catch (Exception e) {}}

到这我们已经把渐变背景根据id对应起来存储到了map中。

根据当前轮播显示的图片改变背景

首先监听banner的切换

   //轮播图切换监听mBanner.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {BannerBean data = mBannerBeans.get(position);showBgBitmap(data.id);}@Overridepublic void onPageScrollStateChanged(int state) {}});

展示相应的背景

    //根据当前轮播图id设置背景private void showBgBitmap(int id) {if (mBgBitmaps != null && mBgBitmaps.size() > 0) {BitmapDrawable bitmapDrawable = new BitmapDrawable(mBgBitmaps.get(id));mLlBg.setBackground(bitmapDrawable);}}

完整代码

public class MainActivity3 extends AppCompatActivity {private LinearLayout mLlBg;private Banner mBanner;private List<BannerBean> mBannerBeans;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main3);mLlBg = findViewById(R.id.ll_bg);mBanner = findViewById(R.id.banner);initBanner();}private void initBanner() {//模拟数据mBannerBeans = new ArrayList<>();mBannerBeans.add(new BannerBean(1, "http://p1.music.126.net/yG5m3OK4ZBBeOIkSftmjcQ==/109951165905030496.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(2, "http://p1.music.126.net/ETIySI2MCkINdRWDFK_QQQ==/109951165905559297.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(3, "http://p1.music.126.net/zzAHDSg9nWA90dJL0U6rRQ==/109951165906140657.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(4, "http://p1.music.126.net/Ly3Qh10IMv5_yjDwQTlxvA==/109951165905725276.jpg?imageView&quality=89"));mBannerBeans.add(new BannerBean(5, "http://p1.music.126.net/bOg67Q_MhDgMK3xK9BRTPA==/109951165905708968.jpg?imageView&quality=89"));//采集每个图片的颜色setBgBitmap(mBannerBeans);//自定义适配器MyBannerAdapter myBannerAdapter = new MyBannerAdapter(mBannerBeans, this);mBanner.setAdapter(myBannerAdapter).isAutoLoop(true)//自动切换.setDelayTime(2000)//轮播时间.setBannerRound(10)//圆角.setIndicator(new RectangleIndicator(this));//设置指示器;//轮播图切换监听mBanner.addOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {BannerBean data = mBannerBeans.get(position);showBgBitmap(data.id);}@Overridepublic void onPageScrollStateChanged(int state) {}});}//根据当前轮播图id设置背景private void showBgBitmap(int id) {if (mBgBitmaps != null && mBgBitmaps.size() > 0) {BitmapDrawable bitmapDrawable = new BitmapDrawable(mBgBitmaps.get(id));mLlBg.setBackground(bitmapDrawable);}}//存放各个轮播图对应的背景颜色HashMap<Integer, Bitmap> mBgBitmaps;private void setBgBitmap(List<BannerBean> banners) {mBgBitmaps = new HashMap<>();//子线程中操作new Thread() {public void run() {Bitmap myBitmap;for (BannerBean banner : banners) {try {//把网络图片转成bitmapmyBitmap = Glide.with(MainActivity3.this).asBitmap().load(banner.thumb).submit(50, 50).get();Palette.from(myBitmap).generate(new Palette.PaletteAsyncListener() {@Overridepublic void onGenerated(Palette palette) {if (palette == null) return;//不一定取得到某些特定的颜色，这里通过取多种颜色来避免取不到颜色的情况if (palette.getDarkVibrantColor(Color.TRANSPARENT) != Color.TRANSPARENT) {//使用鲜艳色中的暗色和鲜艳色生成线性背景createLinearGradientBitmap(banner.id, palette.getDarkVibrantColor(Color.TRANSPARENT), palette.getVibrantColor(Color.TRANSPARENT));} else if (palette.getDarkMutedColor(Color.TRANSPARENT) != Color.TRANSPARENT) {//使用柔和色中的暗色和柔和色生成线性背景createLinearGradientBitmap(banner.id, palette.getDarkMutedColor(Color.TRANSPARENT), palette.getMutedColor(Color.TRANSPARENT));} else {//使用柔和色中的亮色和鲜艳色中的亮色生成线性背景createLinearGradientBitmap(banner.id, palette.getLightMutedColor(Color.TRANSPARENT), palette.getLightVibrantColor(Color.TRANSPARENT));}}});} catch (Exception e) {e.printStackTrace();}}}}.start();}Bitmap bgBitmap = null;Canvas mCanvas = null;Paint mPaint = null;//创建线性渐变背景色private void createLinearGradientBitmap(int id, int color1, int color2) {try {//通过这三个基础色进行渐变int bgColors[] = new int[3];bgColors[0] = color1;bgColors[1] = color2;bgColors[2] = Color.WHITE;bgBitmap = Bitmap.createBitmap(mLlBg.getWidth(), mLlBg.getHeight(), Bitmap.Config.ARGB_4444);mCanvas = new Canvas();mPaint = new Paint();mCanvas.setBitmap(bgBitmap);mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);//纵向的线性渐变LinearGradient gradient = new LinearGradient(0, 0, 0, bgBitmap.getHeight(), bgColors, null, Shader.TileMode.CLAMP);mPaint.setShader(gradient);//绘制矩形RectF rectF = new RectF(0, 0, bgBitmap.getWidth(), bgBitmap.getHeight());mCanvas.drawRect(rectF, mPaint);mBgBitmaps.put(id, bgBitmap);//首先显示第一个图片的背景if (1 == id)mLlBg.setBackground(new BitmapDrawable(bgBitmap));bgBitmap = null;} catch (Exception e) {}}}class MyBannerAdapter extends BannerAdapter<BannerBean, MyBannerAdapter.BannerViewHolder> {private Context mContext;public MyBannerAdapter(List<BannerBean> data, Context context) {super(data);this.mContext = context;}@Overridepublic BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {ImageView imageView = new ImageView(parent.getContext());//设置为match_parent 这个是viewpager2要求imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);return new BannerViewHolder(imageView);}@Overridepublic void onBindView(BannerViewHolder holder, BannerBean data, int position, int size) {Glide.with(mContext).load(data.thumb).centerCrop().into(holder.imageView);}class BannerViewHolder extends RecyclerView.ViewHolder {ImageView imageView;public BannerViewHolder(@NonNull ImageView view) {super(view);this.imageView = view;}}
}

总结

到这里功能已经全部实现了，轮播图的背景可以根据轮播图当前图片的改变而改变，为了美观你也可以获取到的不同颜色来生成线性背景看哪一个好看……。如果需求不是轮播图，只是根据单张图片来改变背景颜色或者主题颜色也可以修改下使用。

android根据轮播图片颜色改变背景颜色相关推荐

android 广告轮播图片+视频+音频
一.近期有一个需求要实现一款定制化开发的一款广告轮播视频+图片+音频的结合,来吧接下来操作起来.因为发现Viewpager 轮播的监听总会频繁调用导致体验不太好这边是使用RecyclerView+H ...
改变Android的hello world程序字体颜色和背景颜色
1.使用Color类的常量,如: int color = Color.BLUE; // 创建一个蓝色是使用Android提供的颜色 2.通过ARGB构建,如: int color = Color.a ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
【Android】轮播图图片的本地保存及读取
#一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide ...
Android的轮播图Banner之本地加载和网络加载图片(含demo)
前言关于轮播图我个人是比较喜欢闲来无事的时候可以整理自己的照片做一个demo 看看动态的效果挺不错的! 每个App也基本都有一些广告位置只要打开这个页面就会无限轮播广告图片看多了我们也 ...
android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...
有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
android广告轮播图之匀速规律播放
之前在电商项目中用到广告轮播的效果,在app端实现广告图片的上传,然后轮播图片,使用handler发送消息然后在handlemessage中在发消息的循环发送可以实现广告轮播效果,但是当添加图片以后, ...
swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...