喜马拉雅App

前言

喜马拉雅UI是目前我所看到的最优美简洁体验效果极佳的应用了，工作之余写写特效欢迎一起进步学习

---

一、喜马拉雅首页特效

1.banner图切换丝滑改变主题和View的颜色。

2.列表的滑动更改主题和View的颜色。

3.Fragment切换在不同的页面主题色都会根据当前所在碎片的banner图进行设置主题色。

4.细节部分:搜索框内的字体以及搜索红色圆弧的颜色都跟随改变和切换。以及背景部分有圆角图案很美。

二、我实现的效果如下：

1.banner图切换之间改变主题和View的颜色部分。

2.随着列表滑动切换主题和View的颜色部分。

3.随着碎片切换主题色丝滑改变且当前在顶层的碎片决定主题色。以及背景图案等的细节处理。

三、每个功能的实现思路和代码。

1.主题颜色根据banner图的颜色来显示的。我们会想到Palette(调色板)颜色分析帮助类。不明白的可以看我的博客Palette打造你炫酷统一色彩的界面,2年前写的比较简陋看看就行。

2.首先我们看看Palette如何获取banner颜色。

//1.初始化开始 Palette.from(bitmap).generate() //2.generate里面我们可以看到 scaleBitmapDown方法里面进行了位图缩放。默认112*112的。 //3.在ColorCutQuantizer里面进行位图像素的获取。 int[] getPixelsFromBitmap(Bitmap bitmap) //4.根据图像位图像素来进行获取量化颜色 for (int i = 0; i < pixels.length; i++) { final int quantizedColor = quantizeFromRgb888(pixels[i]); // Now update the pixel value to the quantized value pixels[i] = quantizedColor; // And update the histogram hist[quantizedColor]++; } //5.获取对应的颜色 if (distinctColorCount <= maxColors) { // The image has fewer colors than the maximum requested, so just return the colors mQuantizedColors = new ArrayList<>(); for (int color : colors) { mQuantizedColors.add(new Palette.Swatch(approximateToRgb888(color), hist[color])); } if (LOG_TIMINGS) { mTimingLogger.addSplit("Too few colors present. Copied to Swatches"); mTimingLogger.dumpToLog(); } } else { // We need use quantization to reduce the number of colors mQuantizedColors = quantizePixels(maxColors); if (LOG_TIMINGS) { mTimingLogger.addSplit("Quantized colors computed"); mTimingLogger.dumpToLog(); } } .....代码大家可以看源码就明白了

3.用过banner库的应该用过ImageLoaderInterface内置监听用来告知当前显示的图片。

//我们可以通过imageLoader进行监听，来获取当前所在banner图片的颜色 mbanner.setImageLoader(imageLoader) class BannerImageLoader(private val paletteColorList: List<PaletteColorInfo>) : ImageLoader() { private var context: Context? = null private var palette: Palette? = null override fun displayImage(context: Context, imgObj: Any?, imageView: ImageView) { this.context = context if (imgObj != null) { imageView.setPadding(30, 0, 30, 0) Glide.with(context).asBitmap().load(imgObj.toString()) .listener(object : RequestListener<Bitmap?> { override fun onLoadFailed( e: GlideException?, model: Any?, target: com.bumptech.glide.request.target.Target<Bitmap?>?, isFirstResource: Boolean ): Boolean { return false } override fun onResourceReady( resource: Bitmap?, model: Any?, target: com.bumptech.glide.request.target.Target<Bitmap?>?, dataSource: com.bumptech.glide.load.DataSource?, isFirstResource: Boolean ): Boolean { //当前banner出现时的bitmap以及url进行获取颜色。通过setColorList方法 setColorList(resource!!, imgObj.toString()) return false } }).apply(RequestOptions.bitmapTransform(RoundedCorners(20))).into(imageView) } } //获取颜色 private fun setColorList(bitmap: Bitmap, imgUrl: String) { palette = Palette.from(bitmap).generate() for (i in paletteColorList.indices) { if (paletteColorList[i].imgUrl.equals(imgUrl)) { // imgUrl作为识别标志 if (palette!!.vibrantSwatch != null) { paletteColorList[i].vibrantColor = palette!!.vibrantSwatch!!.rgb } if (palette!!.darkVibrantSwatch != null) { paletteColorList[i].vibrantDarkColor = (palette!!.darkVibrantSwatch!!.rgb) } if (palette!!.lightVibrantSwatch != null) { paletteColorList[i].vibrantLightColor = (palette!!.lightVibrantSwatch!!.rgb) } if (palette!!.mutedSwatch != null) { paletteColorList[i].mutedColor = (palette!!.mutedSwatch!!.rgb) } if (palette!!.darkMutedSwatch != null) { paletteColorList[i].mutedDarkColor = (palette!!.darkMutedSwatch!!.rgb) } if (palette!!.lightVibrantSwatch != null) { paletteColorList[i].mutedLightColor = (palette!!.lightVibrantSwatch!!.rgb) } if (palette!!.lightVibrantSwatch != null) { paletteColorList[i].mutedLightColor = (palette!!.lightVibrantSwatch!!.rgb) } if (palette!!.dominantSwatch != null) { paletteColorList[i].dominantColor = (palette!!.dominantSwatch!!.rgb) } } } }

明天继续写…时间比较少…望谅解

总结