- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
Google 设计了一个 color palette .给定一种颜色,我想在 Android 中动态创建调色板。
Graphic Design site 中也有类似的问题和 an open source javascript solution生成类似的调色板。找到每种颜色的因子 here用于创建颜色的函数可在 this stackoverflow answer 中找到.
我使用该答案和项目生成了一个类似于 Google 的调色板。但是,我想要一种能够返回 Google 生成的准确值的算法(请参阅第一个链接)。
问题:Google 如何计算 Material 设计的调色板颜色?
根据以上信息,我创建了这个示例来展示我如何生成类似的调色板。同样,我想要确切的值。
import android.app.Activity;
import android.app.AlertDialog;
import android.graphics.Color;
import android.os.AsyncTask;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;
import java.lang.ref.WeakReference;
import java.util.LinkedList;
import java.util.List;
/**
* @author Jared Rummler <jared.rummler@gmail.com>
*/
public class PaletteTask extends AsyncTask<Integer, Void, List<PaletteTask.Shade>> {
private static int shadeColor(int color, double percent) {
return shadeColor(String.format("#%06X", (0xFFFFFF & color)), percent);
}
private static int shadeColor(String color, double percent) {
long f = Long.parseLong(color.substring(1), 16);
double t = percent < 0 ? 0 : 255;
double p = percent < 0 ? percent * -1 : percent;
long R = f >> 16;
long G = f >> 8 & 0x00FF;
long B = f & 0x0000FF;
int red = (int) (Math.round((t - R) * p) + R);
int green = (int) (Math.round((t - G) * p) + G);
int blue = (int) (Math.round((t - B) * p) + B);
return Color.rgb(red, green, blue);
}
private final WeakReference<Activity> activityWeakReference;
private final List<Shade> shades = new LinkedList<>();
{
shades.add(new Shade(0.9, "50"));
shades.add(new Shade(0.7, "100"));
shades.add(new Shade(0.5, "200"));
shades.add(new Shade(0.333, "300"));
shades.add(new Shade(0.166, "400"));
shades.add(new Shade(0, "500"));
shades.add(new Shade(-0.125, "600"));
shades.add(new Shade(-0.25, "700"));
shades.add(new Shade(-0.375, "800"));
shades.add(new Shade(-0.5, "900"));
shades.add(new Shade(0.7, "A100"));
shades.add(new Shade(0.5, "A200"));
shades.add(new Shade(0.166, "A400"));
shades.add(new Shade(-0.25, "A700"));
}
public PaletteTask(Activity activity) {
activityWeakReference = new WeakReference<>(activity);
}
@Override protected List<Shade> doInBackground(Integer... colors) {
for (Shade shade : shades) {
shade.color = shadeColor(colors[0], shade.percent);
}
return shades;
}
@Override protected void onPostExecute(List<Shade> shades) {
Activity activity = activityWeakReference.get();
if (activity == null || activity.isFinishing()) {
return;
}
// Create a dialog that shows our generated colors:
ScrollView scrollView = new ScrollView(activity);
LinearLayout linearLayout = new LinearLayout(activity);
linearLayout.setOrientation(LinearLayout.VERTICAL);
int width, height;
width = LinearLayout.LayoutParams.MATCH_PARENT;
height = (int) (30/*dp*/ * (activity.getResources().getDisplayMetrics().densityDpi / 160f));
// add each color
for (Shade shade : shades) {
LinearLayout layoutColor = new LinearLayout(activity);
TextView textView = new TextView(activity);
layoutColor.setLayoutParams(new LinearLayout.LayoutParams(width, height));
layoutColor.setBackgroundColor(shade.color);
layoutColor.setGravity(Gravity.CENTER);
textView.setText(shade.name + " " + String.format("#%06X", (0xFFFFFF & shade.color)));
layoutColor.addView(textView);
linearLayout.addView(layoutColor);
}
scrollView.addView(linearLayout);
new AlertDialog.Builder(activity).setView(scrollView).show();
}
public static class Shade {
final double percent;
final String name;
int color;
public Shade(double percent, String name) {
this.percent = percent;
this.name = name;
}
}
}
调用AsynTask
:
int materialRed500 = 0xFFF44336;
new PaletteTask(this).executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, materialRed500);
根据上述代码创建的对话框:
最佳答案
最重要的是,您无法使用始终与相应的 Google Material Design 调色板完全匹配的单一颜色生成调色板。
这是因为调色板都遵循不同的颜色渐变。例如,红色调色板是使用以下进程生成的(JS 代码使用 TinyColor.js,但您仍然可以看到 HSL 修改):
return [
{ hex : tinycolor( hex ).lighten( 37.7 ).saturate( 10.4 ).spin( -13 ).toHexString(), name : '50' },
{ hex : tinycolor( hex ).lighten( 31.8 ).saturate( 10.4 ).spin( -9.5 ).toHexString(), name : '100' },
{ hex : tinycolor( hex ).lighten( 18.7 ).desaturate( 17 ).spin( -3.9 ).toHexString(), name : '200' },
{ hex : tinycolor( hex ).lighten( 9.1 ).desaturate( 20.9 ).spin( -4 ).toHexString(), name : '300' },
{ hex : tinycolor( hex ).lighten( 4.1 ).desaturate( 6.6 ).spin( -3 ).toHexString(), name : '400' },
{ hex : hex, name : '500' },
{ hex : tinycolor( hex ).darken( 3.1 ).desaturate( 12.4 ).spin( -2.7 ).toHexString(), name: '600' },
{ hex : tinycolor( hex ).darken( 7.8 ).desaturate( 24.5 ).spin( -4 ).toHexString(), name: '700' },
{ hex : tinycolor( hex ).darken( 11.7 ).desaturate( 23.2 ).spin( -4 ).toHexString(), name: '800' },
{ hex : tinycolor( hex ).darken( 17 ).desaturate( 16.1 ).spin( -4 ).toHexString(), name: '900' },
{ hex : tinycolor( hex ).lighten( 16.7 ).saturate( 10.4 ).spin( 0.6 ).toHexString(), name: 'A100' },
{ hex : tinycolor( hex ).lighten( 7.7 ).saturate( 10.4 ).spin( -4 ).toHexString(), name: 'A200' },
{ hex : tinycolor( hex ).darken( 3.9 ).saturate( 10.4 ).spin( -15.5 ).toHexString(), name: 'A400' },
{ hex : tinycolor( hex ).darken( 16.6 ).saturate( 10.4 ).spin( -4 ).toHexString(), name: 'A700' }
];
但是,当您将相同的渐变应用于靛蓝基色 (500) 时,您会发现调色板根本不匹配。在下图中,最左边的调色板是默认的 MD 调色板,左边第二个是按上述顺序生成的调色板。这两个调色板完全匹配。当我加载 MD Indigo 调色板(第三个调色板),然后使用 Indigo 500 值和红色调色板渐进代码生成一个调色板时,它会创建第 4 个调色板。正如您所看到的,虽然这种进展对于红色来说是准确的,但对于其他颜色来说却相去甚远:
可以找到有关此主题的更多信息 here . Google 选择的颜色很可能是由设计师手工挑选的,而不是以编程方式生成的。
编辑:此外,该 MCG 的代码已完全修改。可以找到颜色的新逻辑 here , 它使用 tinycolor.js用于修改函数。
关于android - Material 设计调色板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32942503/
我是 angular 的新手,想动态地更改 angular Material 主题,我知道如何通过制作 scss 文件来制作不同的主题,定义 3 种颜色,包括 mat 属性和功能,但后来我在 angu
我猜,是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗? 有人可以确认我的假设吗? (我正在使用 Angular Material 6。) l
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我一直在 material-ui react 库中看到对名为“LeftNav ”的组件的引用(例如: Material UI - Open LeftNav / Drawer on AppBar cli
我正在使用 mat-list而且我无法在移动设备上滚动它。 它是一个 mat-nav-list,里面有一些 mat-list-item,我的列表结构类似于: dashboard
我是网络开发的新手,正在尝试使用 material-ui。我看到一些演示代码使用 withStyle,还有一些使用 withTheme。它们之间有什么区别吗?非常感谢! 最佳答案 我认为接受的答案没有
我正在研究 Material 设计和 Material 设计中描述的一些指南。 我似乎遗漏了一个部分(不确定是否应该涵盖),即 Google 如何处理 Fieldsets。该文档确实涵盖了各个输入,但
我正在根据到目前为止所学的知识使用 Material 设计创建一个示例应用程序,但我注意到 Material 设计的开箱即用字体对于不同的组件是不同的。对于 Material 对话框中的 Materi
我确实有角度 6,尽管 ng generate @angular/material:material-nav --name home不工作 得到类似的错误 Collection "@angular/m
我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的表上
如何在 Angular Material Design 中设置工具栏下方的侧导航?这样 sidenav 就不会越过工具栏.. 最佳答案 这是一个布局问题。只需使用此页面结构:
我使用的是角 Material 2,但我认为这也适用于角 Material 1。 假设我想使用角度 Material 选项卡,但我想隐藏选项卡或向其添加一些特定样式。 所以我有以下 html/angu
我安装了 material-ui“^1.0.0-beta.36”。文档说有日期选择器。 但我在 node_modules\material-ui 和任何子文件夹中都找不到它。 更改日志表明计划在未来版
从一小时前开始,我在 Material 设计图标 cdn 上不断收到网络错误,因为错误名称未解析。 http://cdn.materialdesignicons.com/5.4.55/css/mate
如何在不失去波纹效果的情况下更改角 Material 开关按钮的颜色? 请在此处查看代码笔:http://codepen.io/shyambhiogade/pen/LpNGBP 我已将颜色更改为 #0
对于textfield并选择,我看到我们具有以下选项来添加variant =“ outlined”。 但是,我看不到material-ui / DatePicker。有人可以建议如何使用实质性UI将v
在 3.1.0 版本中使用“@material-ui/core” 全局覆盖步进器图标的颜色非常容易全局 createMuiTheme({ overrides: { MuiStepIco
我在我的应用程序脚本插件中使用 materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新。我尝试了几种变体,甚至仔细检查了小费是否正在改变,确实如此。问题是它似乎没有用更新的文
有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的 . 但我想要这样 最佳答案 这可以做到,但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 di
我今天发现了这个很棒的 UI 框架,并花了很多时间浏览文档,我必须说,我已经爱上了它。现在我想将它用于一个中等规模的项目,但我有两个顾虑: 我找不到任何网格系统,我该如何进行布局? 如何让它响应? 我
我是一名优秀的程序员,十分优秀!