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

最新推荐文章于 2023-12-11 17:05:17 发布
最新推荐文章于 2023-12-11 17:05:17 发布
阅读量1.5k 收藏 13
点赞数
分类专栏： android 文章标签： 轮播图 Palette 颜色提取
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35959554/article/details/115899877
版权

最终效果：

（最终效果录屏后转成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">

    <LinearLayout
        android:id="@+id/ll_bg"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:orientation="vertical">
            <com.youth.banner.Banner
                android: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;


    @Override
    protected 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;
    }

    @Override
    public 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);
    }

    @Override
    public 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（子线程中操作）

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

通过palette获取bitmap中颜色

                        Palette.from(myBitmap).generate(new Palette.PaletteAsyncListener() {
                            @Override
                            public 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() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                BannerBean data = mBannerBeans.get(position);
                showBgBitmap(data.id);
            }

            @Override
            public 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;


    @Override
    protected 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() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                BannerBean data = mBannerBeans.get(position);
                showBgBitmap(data.id);
            }

            @Override
            public 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 {
                        //把网络图片转成bitmap
                        myBitmap = Glide.with(MainActivity3.this)
                                .asBitmap()
                                .load(banner.thumb)
                                .submit(50, 50)
                                .get();
                        Palette.from(myBitmap).generate(new Palette.PaletteAsyncListener() {
                            @Override
                            public 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;
    }

    @Override
    public 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);
    }

    @Override
    public 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;
        }
    }
}

总结

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

浪克oo
关注
专栏目录
vue引入Swiper，背景颜色与轮播图片一致，更改前进后退按钮以及分页器样式，
document_write的博客
08-12 2170
一. 安装swiper(我的swiper版本是"^4.5.0",) npm install swiper --save 二.局部引入 import Swiper from “swiper”; import ‘swiper/dist/css/swiper.min.css’; 三.具体代码如下 <template> <div class="content" ref="bgColo...
android viewpager滑动图片轮播,使用ViewPager实现图片轮播
weixin_39631295的博客
05-31 850
前言首先我们来看一下运行的效果，如下所示：这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。它要求主要实现以下功能：1)自动播放；2)无限滑动；3)手指拖拽图片时暂停自动轮播，松开后继续自动轮播；4)含动画效果的小圆点指示器。本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。正文1、实现自动播放思路：没隔...
让对应背景随着轮播的图片变化而改变
m0_53912016的博客
03-21 2153
使用swiper cnpm i swiper@5.4.5 --save 然后在main.js里面引入样式 import 'swiper/css/swiper.css' 在需要的页面当中调取import Swiper from "swiper"; 然后就可以开始写轮播图了 效果 !<template> <div> <div class="swiper"> <div class="swiper-wrapper"> &
Android轮播换背景,Android实现背景图片轮播
weixin_32861907的博客
05-26 441
本文实例为大家分享了Android实现背景图片轮播的具体代码，供大家参考，具体内容如下点击按钮实现图片轮播效果实践案例：xmlxmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"andro...
微信小程序—轮播图+背景变化
gardenia的博客
05-09 3099
先上效果： 1.轮播图效果 2.背景颜色会随着轮播图变化 代码实现： HTML: <view class="tab-list-movie" style="background:{{bgColor[swiperIndex]}}"> <swiper class="movie-swiper" autoplay interval="3000" circular indicator-dots indicator-active-color="white" bindchang
android线性布局实现轮播,实现图片轮播，并且带圆点 ，轮播时 圆点改变颜色；...
weixin_39797686的博客
05-26 201
package com.example.day14;import java.util.ArrayList;import java.util.Timer;import java.util.TimerTask;import com.lidroid.xutils.BitmapUtils;import android.os.Bundle;import android.os.Handler;import a...
swiper轮播图变背景也改变（渐变色）
最新发布
m0_58980887的博客
12-11 638
第一步：拿到swiper轮播图的index，官方文档给我们提供了一个方法，这个方法是轮播图已经改变之后，才给出值，所以会慢一点，像一模一样的话只能原生写轮播图，再进行操作index。因为轮播图和背景色不在一个页面，加上localStorage的原因页面打开第一时间是获取不到值得，需要设置初始值。注意：这里面的 this.activeindex 的值是拿不出去的，所以值想页面传递只能使用定时器和。思路：主要的思路就是拿到轮播图的index ，然后和对应的颜色进行匹配。2.自己写值：index判断部分。
Android开发之滑动图片轮播标题焦点
09-02
这些小圆点可以通过在代码中动态添加`ImageView`来实现，并且每个ImageView的背景应该是一个Selector，这样可以根据选中状态改变颜色。 为了填充ViewPager，我们需要创建一个自定义的PagerAdapter。继承`...
android 沉浸式轮播,沉浸式图片轮播器--DDGBannerScrollView
weixin_36179469的博客
05-31 499
写在前面几乎每个app都会用到图片轮播器，而且图片轮播器也越来越高大上，沉浸式等拉高了APP的档次，没有一个高大上的图片轮播器，都不好意思上架。像一些知名的app都采用了图片轮播的背景渐变色，举几个栗子：优酷的首页，喜马拉雅，蜻蜓fm，哔哩哔哩漫画等，page索引也是玩的很高大上，系统的早已满足不了了需求。鉴于此和项目的需要，在前人的基础上，整理了一个这个库，志在简单的几句代码，就能让应用看上去高...
Android 轮播图实现（新手易懂）
热门推荐
weixin_44241851的博客
05-01 1万+
Android 轮播图效果展示设计思路与代码讲解注意事项 源码 效果展示 可以自动播放，也可以手动滑动 设计思路与代码讲解 首先使用ViewPager实现滑动的效果，然后在适配器里面设置图片，接着写下面的point，如过展示的时当前的图片，point变颜色表示被选中 写界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLa...
背景跟随banner 动态改变
04-20
android 背景颜色跟随Banner，取banner 的颜色赋给你想给的背景。
Android ViewPager加载图片效果
08-31
在这些方法中，我们可以更新底部指示器的状态，比如当页面切换时，改变选中圆点的背景颜色，同时也可以处理其他与页面切换相关的逻辑。 为了实现图片的加载，我们可以使用各种图片加载库，如Glide、Picasso或...
Android 背景图片轮播
liweicai137的博客
10-30 697
package com.example.test; import android.animation.ValueAnimator; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.
前端，CSS，背景颜色跟随轮播图片改变而改变（附源码）
weixin_47127690的博客
10-25 1399
通过css，js实现 背景颜色跟随轮播图改变而改变
微信小程序轮播图滚动带动背景图变换及滚动对应图片下标
nan961136007的博客
08-27 3621
今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。 一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。 首先呢，先放图片吧 这个是实现的状态，由于懒得弄gif图，就将就看一下吧 首先是wxml代码 <view class="swiper-all"> <swiper class=...
跟随图片变化的背景—颜色聚合算法
xiaobai_qxjn的博客
05-24 237
跟随图片变化的背景—颜色聚合算法
uniapp背景色跟随轮播图改变 vue
Summer_JK的博客
06-24 1230
背景色跟随轮播图改变 在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码： 最终效果：录屏
uni-app+uView如何轮播图滑动时改变背景颜色和导航栏颜色
xybhua的博客
03-22 1727
通过获取到的轮播的index，取出来后端传来的背景色，再分别赋值给导航栏和轮播图的背景。上边实际就是一个自定义的导航u-navbar，一个包裹着轮播图的背景和轮播图自己；实际上如果你没用uView，甚至也不是uni-app，只要你是vue开发的。这也是在群里看到的，群友问如何在滑动（或者自动滑动）的时候背景颜色能跟着变。这逻辑都适用，主要就是一个css的传值，解决这个就都好办。当轮播图change的时候，触发changeSwiper。正好之前做过这个需求，也分享一下。对应的，我们需要初始化一下。
Android改变图片颜色
qq_38619138的博客
06-09 566
有时候会遇到同一张图片不同颜色的设计，比如说返回键，有深色有浅色，最早的时候都是切两张图，后来知道是可以动态改变颜色的，一直没记录。 其实就是一个函数的事 leftBtn.setColorFilter(getResources().getColor(R.color.title_text_bg)); ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值