如何在android中的视图上方添加阴影

epfja78i  于 2023-01-28  发布在  Android
关注(0)|答案(5)|浏览(164)

我有一个视图是作为页脚标题服务的。它只是一个视图,你可能认为它是一个按钮或文本视图或布局(我真的对任何东西都持开放态度)。

<RelativeLayout>
   <ScrollView >… </ScrollView> //match parent width and height
   <MyBottomView/> // align parent bottom
 </RelativeLayout>

所以你可以看到ScrollView在MyBottomView下面滚动。我想给MyBottomView添加一个顶部阴影,这样看起来更像是材质设计。我该怎么做呢?

4ioopgfo

4ioopgfo1#

如果你需要阴影只在视图的一侧(例如顶部),你可以在它之前添加另一个视图,并使用渐变阴影作为它的背景。
下面是您必须存储在drawable文件夹中的渐变文件top_shadow_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="#30ffffff"
        android:startColor="#40000000" />
</shape>

下面是如何使用它的示例布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/top_shadow_gradient" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingTop="8dp">
        
        <!-- Put your content here-->
   
    </LinearLayout>

</LinearLayout>

**重要提示:**根布局必须透明(android:background="@android:color/transparent"),“内容”布局需要白色背景(android:background="#ffffff")。

这就是结果

ybzsozfc

ybzsozfc2#

以下是一些解决此问题的方法-选择最佳方法:

Android中没有显示阴影的属性,但可能的方法是:
1.添加一个灰色的普通LinearLayout,在其上添加您的实际布局,底部和右侧的边距等于1或2 dp。
1.有一个带阴影的9补丁图像,并将其设置为线性版面的背景。
以及
还有另一个解决方案,通过实现一个层列表,将作为背景的线性布局。
将background_with_shadow.xml文件添加到res/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="@android:color/darker_gray" />
        <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape 
            android:shape="rectangle">
        <solid android:color="@android:color/white"/>
        <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

然后添加图层列表作为LinearLayout的背景。

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/background_with_shadow"/>

您还可以阅读:http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>
  • 您还可以使用特定的可绘制形式Android资源来模拟阴影效果。Android View shadow或只是阅读下面的帖子:

我正在使用Android Studio 0.8.6,但找不到:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我找到了这个

android:background="@android:drawable/dialog_holo_light_frame"

它看起来是这样的:

如果您对干净的材质设计效果感兴趣,请阅读以下文档:

jdg4fx2g

jdg4fx2g3#

在hack上,我发现这是把你的视图 Package 在一个父视图中,然后使用rotate。例如,如果你有一个cardview,并且正在添加高程到它,你可以像这样放两个rotate来实现上面的阴影,而不是下面的:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="10dp"
    android:rotation="180">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rotation="180"
        app:cardElevation="8dp">
    <!--Card view content-->
    </android.support.v7.widget.CardView>
</RelativeLayout>

这给出了类似于所附截图的东西。

这仍然有一个问题--这需要在父布局上设置paddingBottom,这意味着很明显,布局上方的任何可滚动同级都不会在其下方。
因此,即使在今天的立面和轮廓提供程序时代,最好还是添加一个半透明视图。

6ojccjat

6ojccjat4#

我已经更新了Ivo's优秀的答案,包括使用约束布局。

可提取:shadow_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#40000000" android:endColor="#10ffffff" android:angle="90"/>
</shape>

布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/cl_topView"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      app:layout_constraintBottom_toTopOf="@id/cl_bottomView"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">
      
         ... nested views

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
      android:id="@+id/v_shadowTop"
      android:layout_width="match_parent"
      android:layout_height="3dp"
      android:background="@drawable/shadow_top"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintBottom_toTopOf="@id/cl_bottomView"/>

   <androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/cl_bottomView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/cl_topView">

         ... nested views

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

**结果:**按照上述步骤,我能够得到下图中箭头所示的顶部阴影。

对于Android开发的新用户:
**高度调整:**阴影的高度由视图的“v_shadowTop"高度(当前为3dp)控制。
**渐变调整:**渐变的颜色由“shadow_top.xml”可绘制对象中startColor(当前为000000)和endColor(当前为ffffff)的最后六个字符(十六进制代码)控制。

透明度由shadow_top. xml可绘制对象中startColor(当前为40)和endColor(当前为10)的前两个字符控制。

kcrjzv8t

kcrjzv8t5#

仅顶部阴影:

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

<item>
    <shape>
        <padding
            android:top="@dimen/_2sdp" />
        <solid android:color="@color/red" />
        <corners android:radius="@dimen/_8sdp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid android:color="@color/white" />
        <corners android:radius="@dimen/_8sdp" />
    </shape>
</item>

如果你想让阴影出现在其他区域,添加填充bottomrightleft
结果:

相关问题