ヒマラヤアプリ
序文
Himalaya UIは、これまでに見た中で最も美しく簡潔なアプリケーションです。非常に効果的です。仕事の後に特殊効果を作成します。進歩を遂げ、一緒に学ぶことを歓迎します。
1.ヒマラヤのホームページの特殊効果
1.バナー画像を切り替えてシルキーにし、テーマとビューの色を変更します。
2.リストをスライドして、ビューのテーマと色を変更します。
3.異なるページのフラグメントスイッチのテーマカラーは、現在配置されているフラグメントのバナー画像に従って設定されます。
4.詳細：検索ボックスのフォントと検索の赤い弧の色が変更され、それに応じて切り替えられます。そして、背景部分の丸みを帯びた角模様がとても綺麗です。
2.私が達成した効果は次のとおりです。
1.バナー画像の切り替えの間に、テーマとビューの色の部分を変更します。
2.リストをスライドさせて、ビューのテーマと色の部分を切り替えます。
3.フラグメントが切り替わると、テーマの色がスムーズに変化し、上部の現在のフラグメントがテーマの色を決定します。そして、背景パターンの詳細など。
3つ目は、各機能の実現アイデアとコードです。
1.バナー画像の色に合わせてテーマカラーを表示します。パレット（パレット）カラー分析ヘルプクラスについて考えます。わからない場合は、私のブログパレットを見て、クールで統一されたインターフェイスを作成できます。2年前に書いたので、大雑把に見てください。
2.まず、パレットがバナーの色を取得する方法を見てみましょう。
//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.バナーライブラリを使用したことがある人は、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)
}
}
}
}
明日も書き続けてください...時間は短くなります...理解を願っています