<Android 基础(八)> Palette
2016-06-26 15:52
465 查看
介绍
Palette, 英文翻译,调色板,意思比较接近,Google给它的定位应该是颜色萃取器。
看下Source Code
Palette , A helper class to extract prominent colors from an image.
A number of colors with different profiles are extracted from the image:
支持的颜色类型
颜色 | 类型 |
---|---|
Vibrant | 有活力 |
Vibrant Dark | 有活力 暗色 |
Vibrant Light | 有活力 亮色 |
Muted | 柔和 |
Muted Dark | 柔和 暗色 |
Muted Light | 柔和 亮色 |
// Synchronous 同步
Palette p = Palette.from(bitmap).generate();
// Asynchronous 异步
Palette.from(bitmap).generate(new PaletteAsyncListener() {
public void onGenerated(Palette p) {
// Use generated instance
}
});
Demo示例
布局设置
activity_main.xml<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="mraz.com.palettedemo.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimaryDark"></android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/rv_content" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v7.widget.RecyclerView> </LinearLayout>
RecyclerView中使用Item的布局设置:card_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="6dp"> <com.makeramen.roundedimageview.RoundedImageView android:id="@+id/riv_content" android:layout_width="match_parent" android:layout_height="match_parent" app:riv_border_color="@color/colorAccent" app:riv_border_width="1dp" app:riv_corner_radius="20dp" /> </LinearLayout>
ActionBar上使用的menu资源:main_menu.xml
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_add" android:icon="@drawable/ic_add_black_24dp" android:title="@string/add" app:showAsAction="ifRoom" /> <item android:id="@+id/action_del" android:icon="@drawable/ic_remove_black_24dp" android:title="@string/del" app:showAsAction="ifRoom" /> </menu>
代码使用
package mraz.com.palettedemo; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.support.v7.widget.DefaultItemAnimator; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private final int[] resIds = {R.drawable.p_1, R.drawable.p_2, R.drawable.p_3, R.drawable.p_4, R.drawable.p_5, R.drawable.p_6, R.drawable.p_7};//资源图片Id private final String[] titles = {"Vibrant", "DarkVibrant", "LightVibrant", "Muted", "DarkMuted", "LightMuted"};//6种萃取出来的颜色对应的英文翻译 private Toolbar toolbar;//toolbar private ArrayList<Integer> colorList;//存储从Palette中萃取出来的6中颜色 private int clickCount = 0;//点击数 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); colorList = new ArrayList<>(); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);//设置ActionBar RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_content); RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); MyRecyclerAdapter myRecyclerAdapter = new MyRecyclerAdapter();//初始化RecyclerView recyclerView.setAdapter(myRecyclerAdapter); recyclerView.setLayoutManager(layoutManager); recyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { int offset = recyclerView.computeHorizontalScrollOffset(); int width = recyclerView.getChildAt(0).getWidth(); int current = offset / width; int secondoffset = offset % width; if (secondoffset >= width / 2) { current = current + 1; } setActionBarColor(current); clickCount = 0; super.onScrolled(recyclerView, dx, dy); } });//设置recyclerView的滚动事件监听,以此来改变actionbar支持的颜色 setActionBarColor(0);//首次使用初始化 } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu);//初始化菜单资源 return super.onCreateOptionsMenu(menu); } private void setActionBarColor(int position) { Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resIds[position]); Palette.PaletteAsyncListener paletteAsyncListener = new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { colorList.clear(); colorList.add(palette.getVibrantColor(Color.WHITE)); colorList.add(palette.getDarkVibrantColor(Color.WHITE)); colorList.add(palette.getLightVibrantColor(Color.WHITE)); colorList.add(palette.getMutedColor(Color.WHITE)); colorList.add(palette.getDarkMutedColor(Color.WHITE)); colorList.add(palette.getLightMutedColor(Color.WHITE));//萃取出六种颜色 toolbar.setBackgroundColor(colorList.get(0)); toolbar.setTitle(titles[0]); } }; Palette.from(bitmap).generate(paletteAsyncListener); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_add: { clickCount++; int index = clickCount % (colorList.size()); toolbar.setBackgroundColor(colorList.get(index)); //通过点击事件切换ActionBar的背景色和标题 toolbar.setTitle(titles[index]); break; } case R.id.action_del: { if (clickCount > 0) clickCount--; int index = clickCount % (colorList.size()); toolbar.setBackgroundColor(colorList.get(index)); toolbar.setTitle(titles[index]); break; } } return super.onOptionsItemSelected(item); } }
关于Palette的使用分为两种:
1.同步使用
Palette p = Palette.from(bitmap).generate();
2.异步使用
Palette.from(bitmap).generate(new PaletteAsyncListener() {
public void onGenerated(Palette p) {
// Use generated instance
}
});
Demo效果
操作 | 效果图 |
---|---|
左右滑动ActionBar背景色改变 | |
切换ActionBar背景色 |
API简介
Palette相关API直接获取颜色的方法
通过创建的Palette直接获取其中的颜色,用来设置UI界面中的一些元素
获取Swatch的方法
这里获取的Swatch中的内容更丰富
通过Swatch可以获取更丰富的颜色内容,如
getTitleTextColor()
getBodyTextColor()
getRgb()
getHsl()
示例中只是使用了一部分的方法,具体的其他方法使用情况类似,根据Bitmap的颜色风格,设置对应的字体颜色,UI资源颜色,可以使界面看上去更加的和谐和美好。
相关文章推荐
- ADB WIFI,告别USB连接线
- DrawerLayout简单使用之实现侧滑菜单(来自于support V4包)
- Android 访问res目录下的资源
- Android系统的常用权限
- Android 更新UI的方法汇总
- Android TabLayout(选项卡布局)简单用法实例分析
- Android 监听锁屏、解锁、开屏 功能代码
- android键盘监听
- Fragment生命周期
- android开发实现微博正文效果、顶部悬浮、ScrollView嵌套ListView
- Android 自定义Dialog,文字动态加载效果。
- Android屏幕适配
- Android开源框架Universal-Image-Loader基本介绍及使用
- android内存优化系列之一基础篇
- 获取联系人
- TextView实现复制、滑动、行数限制多余部分...表示
- View抖动
- 自定义SlideBar
- Pinyin4j - utils
- 通用ListAdapter