zoukankan      html  css  js  c++  java
  • 高级UI-Palette

    Google推出的Palette是用来调色的,正如其汉语意思一样,可以用来显示颜色,在显示图片的时候,会配合图片的色调来显示,这样就显得很融合,其实Palette可以分析出图片中的很多特性,例如主色调、鲜艳度、柔和度等

    Palette获得的颜色

    其主要的获取颜色方法如下:
    获取主要颜色:getDominantColor()
    获取柔和颜色:getMutedColor()
    获取鲜艳颜色:getVibrantColor()
    获取亮、柔和颜色:getLightMutedColor()
    获取亮、鲜艳颜色:getLightVibrantColor()
    获取暗、柔和颜色:getDarkMutedColor()
    获取暗、鲜艳颜色:getDarkVibrantColor()

    Palette实例

    在一张图片中显示出获得的以上颜色,并以Google推荐的颜色显示在图片上
    在手机中找到一张以前做的拍黄瓜的图片,还有煎鸡蛋的图片,这里就是用这两张图片来演示,代码没有任何变化,只是改变了ImageView里面的src源
    在使用Palette要先导入依赖,25.4.0为版本号

    implementation 'com.android.support:palette-v7:25.4.0'
    

    贴出布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp">
            <ImageView
                android:id="@+id/image_view"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_centerInParent="true"
                android:src="@drawable/cuke" />
            <TextView
                android:id="@+id/text_view"
                android:layout_marginTop="5dp"
                android:layout_width="300dp"
                android:layout_height="120dp"
                android:layout_centerHorizontal="true"
                android:layout_alignBottom="@id/image_view"
                android:gravity="center"
                android:textSize="24sp"/>
        </RelativeLayout>
    
        <TextView
            android:id="@+id/text_view_1"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
        <TextView
            android:id="@+id/text_view_2"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
        <TextView
            android:id="@+id/text_view_3"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
        <TextView
            android:id="@+id/text_view_4"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
        <TextView
            android:id="@+id/text_view_5"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
        <TextView
            android:id="@+id/text_view_6"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp" />
        <TextView
            android:id="@+id/text_view_7"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="24sp"/>
    
    </LinearLayout>
    

    然后在活动中使用

    public class MainActivity extends AppCompatActivity {
    
        private ImageView imageView;
        private TextView textView1;
        private TextView textView2;
        private TextView textView3;
        private TextView textView4;
        private TextView textView5;
        private TextView textView6;
        private TextView textView7;
        private TextView textView;
    
        @Override
        protected void onCreate(final Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = (ImageView) findViewById(R.id.image_view);
            textView1 = (TextView) findViewById(R.id.text_view_1);
            textView2 = (TextView) findViewById(R.id.text_view_2);
            textView3 = (TextView) findViewById(R.id.text_view_3);
            textView4 = (TextView) findViewById(R.id.text_view_4);
            textView5 = (TextView) findViewById(R.id.text_view_5);
            textView6 = (TextView) findViewById(R.id.text_view_6);
            textView7 = (TextView) findViewById(R.id.text_view_7);
            textView = (TextView) findViewById(R.id.text_view);
    
            BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView.getDrawable();
            Bitmap bitmap = bitmapDrawable.getBitmap();
            //同步方法,已弃用,可能造成线程阻塞
            //Palette palette = Palette.generate(bitmap);
            //异步
            Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
                @Override
                public void onGenerated(Palette palette) {
                    int dominantColor = palette.getDominantColor(Color.GRAY);
                    textView1.setBackgroundColor(dominantColor);
                    textView1.setText("DominantColor");
                    int mutedColor = palette.getMutedColor(Color.GRAY);
                    textView2.setBackgroundColor(mutedColor);
                    textView2.setText("MutedColor");
                    int vibrantColor = palette.getVibrantColor(Color.GRAY);
                    textView3.setBackgroundColor(vibrantColor);
                    textView3.setText("VibrantColor");
                    int lightMutedColor = palette.getLightMutedColor(Color.GRAY);
                    textView4.setBackgroundColor(lightMutedColor);
                    textView4.setText("LightMutedColor");
                    int lightVibrantColor = palette.getLightVibrantColor(Color.GRAY);
                    textView5.setBackgroundColor(lightVibrantColor);
                    textView5.setText("LightVibrantColor");
                    int darkMutedColor = palette.getDarkMutedColor(Color.GRAY);
                    textView6.setBackgroundColor(darkMutedColor);
                    textView6.setText("DarkMutedColor");
                    int darkVibrantColor = palette.getDarkVibrantColor(Color.GRAY);
                    textView7.setBackgroundColor(darkVibrantColor);
                    textView7.setText("DarkVibrantColor");
                    //推荐颜色获取
                    Palette.Swatch swatch = palette.getLightVibrantSwatch();
                    //推荐的主色调
                    int rgb = swatch.getRgb();
                    //推荐的主体文字颜色
                    int bodyTextColor = swatch.getBodyTextColor();
                    //推荐的标题文字颜色
                    int titleTextColor = swatch.getTitleTextColor();
                    //颜色向量
                    float[] hsl = swatch.getHsl();
                    //得到该颜色在图片中的值
                    int population = swatch.getPopulation();
    
                    textView.setBackgroundColor(getTranslucentColor(0.7F, rgb));
                    textView.setTextColor(bodyTextColor);
                    textView.setText("这是一道我做的菜");
                }
            });
        }
    
        private int getTranslucentColor(float persent, int rgb) {
            //转化透明度
            int blue = rgb & 0xFF;
            int green = rgb >>> 8 & 0xFF;
            int red = rgb >>> 16 & 0xFF;
            int alpha = rgb >>> 24;
            alpha = Math.round(alpha * persent);
            return Color.argb(alpha, red, green, blue);
        }
    }
    

    运行结果如下
    Palette-煎鸡蛋图例
    Palette-拍黄瓜图例

  • 相关阅读:
    图像、视频等文件类型(拓展名)
    图像、视频等文件类型(拓展名)
    Mstar 编译器的搭建
    microsoft windows network 不允许一个用户使用一个以上用户名与服务器或共享资源的多重连接
    Ubuntu 14.04报“leaking memory”错误
    linux下创建与删除用户详细步骤 ***
    GX 编译器 的搭建
    VMware网络模式介绍
    ubuntu 源更新(sources.list)
    目录的执行权限
  • 原文地址:https://www.cnblogs.com/cj5785/p/10664596.html
Copyright © 2011-2022 走看看