繁体   English   中英

查看具有纯色背景和顶部+底部内部阴影

[英]View with Solid Background and Top+Bottom Inner Shadows

基本上,我试图创建以下背景: 在此输入图像描述

我用于背景的drawable中使用的传统渐变仅支持开始颜色,中间颜色和结束颜色。

但是,正如您从模型中看到的那样,我试图在形状的顶部和底部仅创建一个轻微的叠加/阴影,使用#50000000颜色(黑色,50%不透明度)。

如果您在布局视图中使用它,那么您只需创建一个具有渐变背景的View ,并将其放置在布局的开头和结尾。

例如:

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/parent">

            <View 
                android:layout_width="fill_parent"
                android:layout_height="5dp"
                android:background="@drawable/gradient" />

<!-- Your other child views -->


            <View 
                android:layout_width="fill_parent"
                android:layout_height="5dp"
                android:background="@drawable/gradient" />

</LinearLayout>

您的gradient.xml文件将具有以下内容:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <gradient android:startColor="#FFFFFF" android:endColor="#000000" android:angle="90"/>
 </shape>

您可以为父布局指定蓝色背景颜色。

你基本上会得到这样的东西:

在此输入图像描述

[编辑]

您可以创建两个drawable - gradient_top.xmlgradient_bottom.xml来获得正确的角度

我更喜欢这样做而不是乱七八糟。 虽然,尽管如此,我希望谷歌继续提供内置的投影支持,因为它们非常普遍。

只是以更完整的例子为基础构建JoelFernandez解决方案:

容器:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="[your_container_height]"
            android:background="@drawable/container_bg_color">

    <View
    android:layout_width="match_parent"
    android:layout_height="12dp"
    android:layout_alignParentTop="true"
    android:background="@drawable/container_gradient_top"/>

<View
    android:layout_width="match_parent"
    android:layout_height="12dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/container_gradient_bottom" />

<!-- Insert your content here -->

</RelativeLayout>

背景颜色(container_bg_color.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient android:startColor="#4a6fb4"
        android:endColor="@color/deepBlue"
        android:angle="135"/>

</shape>

Top Gradient(container_gradient_top.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient
        android:startColor="#00222222"
        android:centerColor="#11111111"
        android:endColor="#44000000"
        android:angle="90"/>

</shape>

底部渐变(container_gradient_bottom.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient
        android:startColor="#44000000"
        android:centerColor="#11111111"
        android:endColor="#00222222"
        android:angle="90"/>

</shape>

结果:

Android XML Gradient

阐述@ ramaral的答案,构建这个drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF408DAA"/>
        </shape>
    </item>
    <item android:top="0dip" android:bottom="32dip">
        <shape android:shape="rectangle">
            <gradient android:startColor="#00000000" android:endColor="#50000000" android:angle="90"/>
        </shape>
    </item>
    <item android:top="32dip" android:bottom="0dip">
        <shape android:shape="rectangle">
            <gradient android:startColor="#50000000" android:endColor="#00000000" android:angle="90"/>
        </shape>
    </item>
</layer-list>

您需要在视图中设置固定高度,以获得最佳效果。 在我的情况下,我将高度设置为“36dip”。 请注意,“32dip”是渐变结束到drawable末尾的空间量,因此会给我留下“4dip”的顶部和底部渐变(36-32 = 4:p)

从这开始:

创建一个drawable:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="rectangle">
            <solid android:color="#408DAA"/>
        </shape>
    </item>

    <item >
        <shape android:shape="rectangle">
            <solid android:color="#50000000"/>
        </shape>
    </item>

    <item android:top="10dip" android:bottom="10dip">
        <shape android:shape="rectangle">
            <solid android:color="#408DAA"/>
        </shape>
    </item>

</layer-list>  

使用它作为任何视图的背景。
根据您的需要调整顶部,底部和颜色=“#408DAA”

在此输入图像描述

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM