programing

Android View shadow

nasanasas 2020. 9. 6. 10:08
반응형

Android View shadow


주변을 수색했지만 적절한 방법을 찾지 못했습니다. 내 뷰에 다음과 같은 그림자 효과를 적용하고 싶습니다.여기에 이미지 설명 입력

여기에 이미지 설명 입력

솔직히이 두 번째는 그림자 효과를 적용한 것인지 모르겠습니다. 어떤 아이디어?


이 질문에 이미 대답했습니다 알고하지만 난 당신이 내가 발견 알고 싶어요 drawableAndroid Studio그건 당신이 질문에 가지고있는 사진과 매우 유사합니다 : 이것 좀 봐 :

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

다음과 같이 보입니다.

여기에 이미지 설명 입력

도움이 되길 바랍니다

편집하다

위의 옵션은의 이전 버전 용 Android Studio이므로 찾지 못할 수 있습니다. 최신 버전 :

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

또한 나만의 모양을 만들고 싶다면 같은 그리기 소프트웨어를 사용하여 그리는 것이 좋습니다 Photoshop.

여기에 이미지 설명 입력

로 저장하는 것을 잊지 마세요 .9.png파일 (예 : my_background.9.png)

문서 읽기 : Draw 9-patch

편집 2

더 좋고 덜 열심히 일하는 솔루션은 보기가 테두리와 겹치지 않도록 CardView및 설정 app:cardPreventCornerOverlap="false"사용하는 것입니다 .

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

또한 최신 버전을 포함 시켰해야합니다 build.gradle, 전류를

compile 'com.android.support:cardview-v7:26.0.0'

Android Studio 0.8.6을 사용하고 있는데 다음을 찾을 수 없습니다.

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

그래서 대신 이것을 찾았습니다.

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

그리고 다음과 같이 보입니다 :

여기에 이미지 설명 입력


res / drawable 폴더에 다음 코드를 사용하여 card_background.xml을 만듭니다.

<?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="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

그런 다음 카드 레이아웃을 원하는 요소에 다음 코드를 추가하십시오.

android:background="@drawable/card_background"

다음 줄은 카드의 그림자 색상을 정의합니다.

<solid android:color="#BDBDBD"/>

배경을 넣는 것은 @android:drawable/dialog_holo_light_frame그림자를 제공하지만 배경색이나 테두리 스타일을 변경할 수 없으므로 레이어 목록을 통해 배경을 넣을 수 있지만 그림자를 활용하는 것이 좋습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

아래의 drawable 폴더에 저장하십시오. shadow.xml

뷰에 할당하려면 xml 레이아웃 파일에서 배경을 설정하십시오.

android:background="@drawable/shadow"

CardViewAndroid 5 이상에서 진정한 그림자를 제공 하며 지원 라이브러리가 있습니다. 보기를 감싸면 끝입니다.

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

다음 종속성이 필요합니다.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

고도 속성을 사용하여 그림자 효과를 얻으십시오.

<View ...
    android:elevation="2dp"/>

이것은 v21 이후에만 사용됩니다. http://developer.android.com/training/material/shadows-clipping.html 링크를 확인 하십시오.


이것은 늦었을지 모르지만 여전히 이것에 대한 답을 찾고있는 사람들을 위해 git hub에서 프로젝트를 찾았으며 이것이 실제로 내 요구에 맞는 유일한 프로젝트입니다. android-materialshadowninepatch

build.gradle 종속성에이 줄을 추가하면됩니다.

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

건배. 제작자에게 좋아요! 행복한 코딩


섀도우를 제대로 적용하려면 다음을 수행해야합니다.

배경 드로어 블로 정의 된 다음 뷰를 고려하십시오.

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

배경 드로어 블은 모서리가 둥근 직사각형으로 정의됩니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

이것은 그림자를 적용하는 권장 방법입니다. https://developer.android.com/training/material/shadows-clipping.html#Shadows를 확인 하십시오.


그림자 효과에 고도 속성을 사용합니다.

<YourView
    ...
    android:elevation="3dp"/>

나는 이것이 어리석은 짓이라는 것을 알고
있지만 v21에서 지원하고 싶다면 여기에 내 성과가 있습니다.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

결과는 다음과 같습니다.

v21 미만 (xml로 만든 것)여기에 이미지 설명 입력

v21 이상 (실제 고도 렌더링)여기에 이미지 설명 입력

  • 한 가지 중요한 차이점은보기에서 내부 공간을 차지하므로 실제 콘텐츠 영역이 > = 롤리팝 장치 보다 작을 수 있다는 것 입니다.

이 모양을 배경으로 사용 :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>

둥근 그림자를 표시하려면 이와 같이 배경 드로어 블을 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

이 질문은 오래되었을 수 있지만 복잡한 그림자 효과를 얻는 간단한 방법을 원하는 사람은 여기 https://github.com/BluRe-CN/ComplexView 에서 내 라이브러리를 확인 하십시오.

라이브러리를 사용하여 그림자 색상을 변경하고 가장자리를 조정할 수 있습니다. 여기에 당신이 원하는 것을 성취하기위한 예가 있습니다.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

그림자 색상을 변경하려면 app : shadowColor = "your color code"를 사용하십시오.

참고 URL : https://stackoverflow.com/questions/21211870/android-view-shadow

반응형