喜马拉雅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)
}
}
}
}
明天继续写…时间比较少…望谅解