2016-09-29 76 views
1

我试图创建一个可绘制的叠加形状控制,它基本上有一个坚实的白色框在顶部,然后屏幕的其余部分将具有从纯白色到半透明白色的渐变。我们使用它来放置背景图像,以在顶部创建一个纯色的白色区域,然后淡入底部的背景图像。Android可绘制叠加形状

使用此代码基本上得到了我想要的,除了我想要公司徽标区域下的真实纯白色区域(对不起,我必须在屏幕截图中清除公司徽标和应用程序名称)低于纯白色。

<?xml version="1.0" encoding="utf-8"?> 
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item> 
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle"> 
       <gradient 
        android:angle="270" 
        android:startColor="#ffffffff" 
        android:centerColor="#00ffffff" 
        android:endColor="#00ffffff" 
        android:centerY="0.6" 
        android:type="linear" /> 
      </shape> 
     </item> 
     <item> 
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle"> 
       <gradient 
        android:startColor="#ffffffff" 
        android:centerColor="#ffffffff" 
        android:endColor="#00ffffff" 
        android:centerY="-0.17" 
        android:gradientRadius="100%p" 
        android:type="radial" /> 
      </shape> 
     </item> 
    </layer-list> 

将会产生类似这样的显示:

enter image description here

但我真的希望有一个更坚实的白色区域,直接成为公司徽标区域下,然后用该点之后的梯度开始。但是你可以看到渐变从屏幕的顶部开始。

我试过做下面的事情,但它不工作。在列表中添加第一个项目确实为我提供了一个坚实的领域,但出于某种原因,我可能只是不了解,顶部项目会以纯白色填充整个屏幕。我尝试将第一个项目移动到底部,但仍然给了我全白色的屏幕。

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item > 
     <shape 
      android:shape="rectangle"> 
      <size android:height="100dp" /> 
      <solid android:color="#ffffffff"/> 
     </shape> 
    </item> 
    <item android:top="100dp" > 
     <shape 
      android:shape="rectangle"> 
      <gradient 
       android:angle="270" 
       android:startColor="#ffffffff" 
       android:centerColor="#00ffffff" 
       android:endColor="#00ffffff" 
       android:type="linear" /> 
     </shape> 
    </item> 
    <item android:top="100dp" > 
     <shape 
      android:shape="rectangle"> 
      <gradient 
       android:startColor="#ffffffff" 
       android:centerColor="#ffffffff" 
       android:endColor="#00ffffff" 
       android:centerY="-0.17" 
       android:gradientRadius="100%p" 
       android:type="radial" /> 
     </shape> 
    </item> 
</layer-list> 

任何人都可以告诉我我做错了什么或给我一个更好的方式来做到这一点。

仅供参考。实际图像正在应用于基本LinearLayout视图的背景。然后将另一个视图覆盖在基本视图的顶部,并使用该可绘制集作为LinearLayout的背景,因此它充当背景图像顶部的叠加蒙版。

我很感激任何帮助,我可以得到这一点。

+0

您可以将两个线性布局子项添加到一个相对布局父项:顶部的线性布局有白​​色的背景,最底部的是否是渐变?我不确定我是否正确遵守。 – ApolloSoftware

+0

感谢ApolloSoftware,我原本不想这样做,因为这个显示屏在我的应用程序中的两个不同的屏幕上使用,所以我希望能够像drawable一样在一个位置上完成。但是在采纳你的想法时,我能够在基本布局视图中找到我可以做到的地方,所以目前我认为我可以按照自己的需要进行工作。如果我没有得到任何更好的答复或信息,我会尝试将答案标记为已回答。 – Mike

+0

酷我会将它添加为答案。祝它好运。我明白你的意思。由于你有不同的portriat /风景取向,更高的dpis和更高的水库。布局,在所有设备上正确使用它是一件痛苦的事情,它将失去对所有类型设备的控制。关于android vs ios的东西,iOS中的AutoLayout对你来说确实有很大的帮助,它的定制化程度较低,但更容易考虑大量不同尺寸的diff设备!其中一个折衷。 – ApolloSoftware

回答

0

您可以将两个线性布局子项添加到一个相对布局父项。顶部的线性布局具有白色的背景,最底部的是渐变。