Himalaya App
Preface
Himalaya UI is the most beautiful and concise application that I have seen so far. It is very effective. Write special effects after work. Welcome to make progress and learn together.
1. Himalayan homepage special effects
1. The banner image is switched and silky to change the color of the theme and View.
2. Slide the list to change the theme and the color of the View.
3. The theme color of the fragment switch on different pages will be set according to the banner image of the fragment currently located.
4. Details: The font in the search box and the color of the search red arc are changed and switched accordingly. And the rounded corner pattern in the background part is very beautiful.
2. The effects I achieved are as follows:
1. Change the color part of the theme and View between the banner image switching.
2. As the list slides to switch the theme and the color part of the View.
3. As the fragments switch, the theme color changes smoothly and the current fragments at the top determine the theme color. And the details of the background pattern and so on.
Three, the realization idea and code of each function.
1. The theme color is displayed according to the color of the banner image. We will think of the Palette (palette) color analysis help class. If you don’t understand, you can look at my blog Palette to create your cool and uniform interface . I wrote it 2 years ago and just look at it crudely.
2. First, let's see how Palette gets the banner color.
//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. Those who have used the banner library should have used the ImageLoaderInterface built-in monitor to inform the currently displayed picture.
//我们可以通过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)
}
}
}
}
Continue to write tomorrow... less time... hope for understanding