如何在渐变上方放置一个向量?

3

I have the following activity xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/app_gradient_bg"
    tools:context="com.hlsystems.ericsonwillians.saltodepirapora.MainActivity">

    ...

</android.support.design.widget.CoordinatorLayout>

那个可绘制的渐变是:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#007786"
                android:endColor="#00292e"
                android:type="linear" />
        </shape>
    </item>
</selector>

这个渐变是我所有活动的背景。我还想在背景上使用矢量图,可以通过添加ImageView来实现:

<ImageView
        android:id="@+id/hlSystemsLogo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/hl_systems_logo"
        android:alpha="0.2"
        tools:layout_editor_absoluteY="61dp"/>

由于将ImageView与其他UI组件一起添加可能会变得非常笨重,而且渐变色是所有内容的背景,所以我想将它们合并在一起,就像这样:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#007786"
                android:endColor="#00292e"
                android:type="linear" />
        </shape>
    </item>
    <item>
        <ImageView
            android:id="@+id/hlSystemsLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/hl_systems_logo"
            android:alpha="0.2"
            tools:layout_editor_absoluteY="61dp"/>
    </item>
</selector>

但是这甚至会导致我的应用程序崩溃。
E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.hlsystems.ericsonwillians.saltodepirapora, PID: 25296
                  java.lang.RuntimeException: Unable to start activity ComponentInfo{com.hlsystems.ericsonwillians.saltodepirapora/com.hlsystems.ericsonwillians.saltodepirapora.MainActivity}: android.view.InflateException: Binary XML file line #0: Error inflating class android.support.design.widget.CoordinatorLayout
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2318)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396)
                      at android.app.ActivityThread.access$800(ActivityThread.java:139)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293)
                      at android.os.Handler.dispatchMessage(Handler.java:102)
                      at android.os.Looper.loop(Looper.java:149)
                      at android.app.ActivityThread.main(ActivityThread.java:5257)
                      at java.lang.reflect.Method.invokeNative(Native Method)
                      at java.lang.reflect.Method.invoke(Method.java:515)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
                      at dalvik.system.NativeStart.main(Native Method)
                   Caused by: android.view.InflateException: Binary XML file line #0: Error inflating class android.support.design.widget.CoordinatorLayout
                      at android.view.LayoutInflater.createView(LayoutInflater.java:620)
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286)
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20)
                      at android.app.Activity.performCreate(Activity.java:5411)
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: java.lang.reflect.InvocationTargetException
                      at java.lang.reflect.Constructor.constructNative(Native Method)
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594)
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: android.content.res.Resources$NotFoundException: File res/drawable/app_gradient_bg.xml from drawable resource ID #0x7f07005a
                      at android.content.res.Resources.loadDrawable(Resources.java:2156)
                      at android.content.res.Resources.loadDrawable(Resources.java:2075)
                      at android.content.res.TypedArray.getDrawable(TypedArray.java:602)
                      at android.view.View.<init>(View.java:3577)
                      at android.view.ViewGroup.<init>(ViewGroup.java:470)
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:202)
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:198)
                      at java.lang.reflect.Constructor.constructNative(Native Method) 
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423) 
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594) 
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #0: invalid drawable tag ImageView
                      at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:933)
                      at android.graphics.drawable.StateListDrawable.inflate(StateListDrawable.java:186)
                      at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:937)
                      at android.graphics.drawable.Drawable.createFromXml(Drawable.java:877)
                      at android.content.res.Resources.loadDrawable(Resources.java:2152)
                      at android.content.res.Resources.loadDrawable(Resources.java:2075) 
                      at android.content.res.TypedArray.getDrawable(TypedArray.java:602) 
                      at android.view.View.<init>(View.java:3577) 
                      at android.view.ViewGroup.<init>(ViewGroup.java:470) 
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:202) 
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:198) 
                      at java.lang.reflect.Constructor.constructNative(Native Method) 
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423) 
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594) 
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 

我如何将矢量和渐变结合在同一个可绘制对象中,以便我可以在所有我的活动中使用它?

3个回答

4

尝试为 1.渐变,2.矢量图像,3.组合制作单独的文件

1> your_gradient_file.xml:

<?xml version="1.0" encoding="utf-8"?>
 <shape>
   <gradient
      android:angle="90"
      android:startColor="#007786"
      android:endColor="#00292e"
      android:type="linear" />
 </shape>

2> your_vector_image.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#FFF" android:pathData="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
</vector>

3> 合并它们:shape_vector_gradient.xml // 根据需要设置填充

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/_5sdp"
        android:drawable="@drawable/your_gradient_file"
        android:left="@dimen/_5sdp"
        android:right="@dimen/_5sdp"
        android:top="@dimen/_5sdp" />
    <item
        android:bottom="@dimen/_5sdp"
        android:drawable="@drawable/your_vector_image"
        android:left="@dimen/_5sdp"
        android:right="@dimen/_5sdp"
        android:top="@dimen/_5sdp" />
</layer-list>

谢谢!我之前不知道有layer-list这个功能,以后会很有用的。 - Ericson Willians
1
欢迎,伙计!愉快编码! - Deep Patel

1
您可以使用 layer-list 可绘制对象。 @drawable/gradient 将保持不变。 创建组合可绘制对象如下。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/gradient" />
<item
    android:width="48dp"
    android:height="48dp"
    android:drawable="@drawable/ic_launcher_foreground"
    android:gravity="center" />
 </layer-list>

PS: 在 Android O 上进行了测试。


1

如果您想要渐变背景并在其上方使用矢量图像在图像视图中,可以按照以下步骤进行:

<FrameLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/gradient">
        </FrameLayout>
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="1dp"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/ic_sync_black_24dp"
            tools:ignore="VectorDrawableCompat"
            android:contentDescription="@string/todo" />
    </FrameLayout>

只需简单地将帧布局添加渐变效果,渐变代码如下。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#007786"
                android:endColor="#00292e"
                android:type="linear" />
        </shape>
    </item>
</selector>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接