[英]Change fill color on vector asset in Android Studio
Android Studio 現在支持 21+ 上的矢量資產,並將在編譯時為較低版本生成 png。 我有一個矢量資產(來自 Material Icons),我想更改填充顏色。 這適用於 21+,但生成的 png 不會改變顏色。 有沒有辦法做到這一點?
<vector android:height="48dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/primary" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
不要直接編輯矢量資源。 如果您在 ImageButton 中使用矢量可繪制,只需在android:tint
選擇您的顏色。
<ImageButton
android:layout_width="48dp"
android:layout_height="48dp"
android:id="@+id/button"
android:src="@drawable/ic_more_vert_24dp"
android:tint="@color/primary" />
你能行的。
但是你不能對顏色使用@color 引用(..lame),否則它只適用於 L+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFAABB"
android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>
正如其他答案中所說,不要直接編輯矢量可繪制對象,而是可以在 Java 代碼中進行着色,如下所示:
mWrappedDrawable = mDrawable.mutate();
mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable);
DrawableCompat.setTint(mWrappedDrawable, mColor);
DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN);
為簡單起見,我創建了一個輔助類:
import android.content.Context;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.ColorRes;
import android.support.annotation.DrawableRes;
import android.support.annotation.NonNull;
import android.support.v4.content.ContextCompat;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
/**
* {@link Drawable} helper class.
*
* @author Filipe Bezerra
* @version 18/01/2016
* @since 18/01/2016
*/
public class DrawableHelper {
@NonNull Context mContext;
@ColorRes private int mColor;
private Drawable mDrawable;
private Drawable mWrappedDrawable;
public DrawableHelper(@NonNull Context context) {
mContext = context;
}
public static DrawableHelper withContext(@NonNull Context context) {
return new DrawableHelper(context);
}
public DrawableHelper withDrawable(@DrawableRes int drawableRes) {
mDrawable = ContextCompat.getDrawable(mContext, drawableRes);
return this;
}
public DrawableHelper withDrawable(@NonNull Drawable drawable) {
mDrawable = drawable;
return this;
}
public DrawableHelper withColor(@ColorRes int colorRes) {
mColor = ContextCompat.getColor(mContext, colorRes);
return this;
}
public DrawableHelper tint() {
if (mDrawable == null) {
throw new NullPointerException("É preciso informar o recurso drawable pelo método withDrawable()");
}
if (mColor == 0) {
throw new IllegalStateException("É necessário informar a cor a ser definida pelo método withColor()");
}
mWrappedDrawable = mDrawable.mutate();
mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable);
DrawableCompat.setTint(mWrappedDrawable, mColor);
DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN);
return this;
}
@SuppressWarnings("deprecation")
public void applyToBackground(@NonNull View view) {
if (mWrappedDrawable == null) {
throw new NullPointerException("É preciso chamar o método tint()");
}
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
view.setBackground(mWrappedDrawable);
} else {
view.setBackgroundDrawable(mWrappedDrawable);
}
}
public void applyTo(@NonNull ImageView imageView) {
if (mWrappedDrawable == null) {
throw new NullPointerException("É preciso chamar o método tint()");
}
imageView.setImageDrawable(mWrappedDrawable);
}
public void applyTo(@NonNull MenuItem menuItem) {
if (mWrappedDrawable == null) {
throw new NullPointerException("É preciso chamar o método tint()");
}
menuItem.setIcon(mWrappedDrawable);
}
public Drawable get() {
if (mWrappedDrawable == null) {
throw new NullPointerException("É preciso chamar o método tint()");
}
return mWrappedDrawable;
}
}
要使用只需執行以下操作:
DrawableHelper
.withContext(this)
.withColor(R.color.white)
.withDrawable(R.drawable.ic_search_24dp)
.tint()
.applyTo(mSearchItem);
或者:
final Drawable drawable = DrawableHelper
.withContext(this)
.withColor(R.color.white)
.withDrawable(R.drawable.ic_search_24dp)
.tint()
.get();
actionBar.setHomeAsUpIndicator(drawable);
要更改矢量圖像顏色,您可以直接使用android:tint="@color/colorAccent"
<ImageView
android:id="@+id/ivVectorImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_account_circle_black_24dp"
android:tint="@color/colorAccent" />
以編程方式更改顏色
ImageView ivVectorImage = (ImageView) findViewById(R.id.ivVectorImage);
ivVectorImage.setColorFilter(getResources().getColor(R.color.colorPrimary));
目前的工作解決方案是 android:fillColor="#FFFFFF"
除了向量中的硬編碼外,沒有什么對我有用
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:fillColor="#FFFFFF"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>
但是,fillcolor 和 tint 可能很快就會起作用。 請參閱此討論以獲取更多信息:
https://code.google.com/p/android/issues/detail?id=186431
此外,顏色可能會留在緩存中,因此為所有用戶刪除應用程序可能會有所幫助。
AppCompat
支持懷疑android:tint
是否僅適用於 21+ 設備的其他答案, AppCompat( v23.2.0 及更高版本)現在提供向后兼容的 tint 屬性處理。
因此,操作過程是使用AppCompatImageView
和app:srcCompat
(在 AppCompat 命名空間中)而不是android:src
(Android 命名空間)。
這是一個示例(AndroidX:這是androidx.appcompat.widget.AppCompatImageView ;)):
<android.support.v7.widget.AppCompatImageView
android:id="@+id/credits_material_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:scaleType="fitCenter"
android:tint="#ffd2ee"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="@drawable/ic_dollar_coin_stack" />
並且不要忘記在 gradle 中啟用矢量可繪制支持:
vectorDrawables.useSupportLibrary = true
Android Studio 現在支持矢量預棒棒糖。 沒有PNG轉換。 您仍然可以更改填充顏色,它會起作用。
在你的 ImageView,使用
app:srcCompat="@drawable/ic_more_vert_24dp"
在你的 gradle 文件中,
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
compile 'com.android.support:design:23.4.0'
如果矢量未使用 fillColor 顯示單獨設置的顏色,則它們可能被設置為默認小部件參數。
嘗試將app:itemIconTint="@color/lime"
到 activity_main.xml 以設置小部件圖標的默認顏色類型。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:itemIconTint="@color/lime"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
將此庫添加到 Gradle 以啟用可在舊 android 設備中繪制的顏色矢量。
compile 'com.android.support:palette-v7:26.0.0-alpha1'
並重新同步gradle。 我認為它會解決問題。
如果您希望支持舊版本的棒棒糖
使用相同的 xml 代碼並進行一些更改
而不是普通的ImageView --> AppCompatImageView
而不是android:src --> app:srcCompat
這是例子
<android.support.v7.widget.AppCompatImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="@+id/button"
app:srcCompat="@drawable/ic_more_vert_24dp"
android:tint="@color/primary" />
不要忘記像@ Sayooj Valsan提到的那樣更新你的 gradle
// Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } } compile 'com.android.support:design:23.4.0'
注意對於任何使用 vector 的人,永遠不要像這樣一個android:fillColor="@color/primary"
給它的十六進制值給你的矢量引用顏色。
對於那些不使用ImageView
,以下內容在普通View
上對我ImageView
(因此該行為應該在任何類型的視圖上復制)
<View
android:background="@drawable/ic_reset"
android:backgroundTint="@color/colorLightText" />
轉到你的 MainActivity.java 和下面的代碼
-> NavigationView navigationView = findViewById(R.id.nav_view);
添加單行代碼 -> navigationView.setItemIconTintList(null);
即我的代碼的最后一行
我希望這可以解決您的問題。
public class MainActivity extends AppCompatActivity {
private AppBarConfiguration mAppBarConfiguration;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setItemIconTintList(null);
如果要更改項目矢量圖標的顏色,可以使用以下命令:
android:iconTint="@color/color"
如果矢量資產在 CardView 中,請在 ImageView 中嘗試card_view:tint="@color/secondary"
。 注意:將@color/secondary
替換為您想要的顏色。
對於我的 ImageButton,我使用app:tint="@color/green"
而不是android:tint
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="//Your Color Code//">
<path
android:fillColor="@android:color/white"
android:pathData="M11,9.16V2c-5,0.5 -9,4.79 -9,10s4,9.5 9"/>
</vector>
這是Filipe
的 Kotlin 版本的 Drawable Helper
class DrawableHelper(var mContext: Context) {
@ColorRes
private var mColor = 0
private lateinit var mDrawable: Drawable
private lateinit var mWrappedDrawable: Drawable
fun withDrawable(@DrawableRes drawableRes: Int): DrawableHelper {
mDrawable = getDrawable(mContext, drawableRes)!!
return this
}
fun withDrawable(drawable: Drawable): DrawableHelper {
mDrawable = drawable
return this
}
@SuppressLint("ResourceType")
fun withColor(@ColorRes colorRes: Int): DrawableHelper {
mColor = ContextCompat.getColor(mContext, colorRes)
return this
}
@SuppressLint("ResourceAsColor")
fun tint(): DrawableHelper {
mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable)
DrawableCompat.setTint(mWrappedDrawable, mColor)
DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN)
return this
}
fun applyToBackground(view: View) {
view.background = mWrappedDrawable
}
fun applyTo(imageView: ImageView) {
imageView.setImageDrawable(mWrappedDrawable)
}
fun applyTo(menuItem: MenuItem) {
menuItem.icon = mWrappedDrawable
}
fun get(): Drawable {
return mWrappedDrawable
}
companion object {
fun withContext(context: Context): DrawableHelper {
return DrawableHelper(context)
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.