LinearLayout ของ Android: เพิ่มเส้นขอบด้วยเงารอบ ๆ LinearLayout

ฉันต้องการสร้างเส้นขอบเดียวกันของ LinearLayout นี้เป็นตัวอย่าง:

ในตัวอย่างนี้เราจะเห็นว่าเส้นขอบนั้นไม่เหมือนกันทั่ว linearLayout ฉันจะสร้างสิ่งนี้โดยใช้ไฟล์ XML ที่สามารถวาดได้ได้อย่างไร

สำหรับตอนนี้ฉันสามารถสร้างเส้นขอบอย่างง่าย ๆ ทั่ว LinearLayout ดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

  <solid android:color="@color/blanc" />

</shape>

ลองนี้ ..

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

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

นั่นเป็นเหตุผลที่ CardView มีอยู่จริง CardView | นักพัฒนา Android
เป็นเพียง FrameLayout ที่รองรับการยกระดับในอุปกรณ์ก่อนอมยิ้ม

<android.support.v7.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardUseCompatPadding="true"
    app:cardElevation="4dp"
    app:cardCornerRadius="3dp" >

    <!-- put whatever you want -->

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

ในการใช้สิ่งนี้คุณต้องเพิ่มการพึ่งพาbuild.gradle:

compile 'com.android.support:cardview-v7:23.+'

ฉันได้รับผลลัพธ์ที่ดูดีที่สุดโดยใช้กราฟิกปะ 9

คุณสามารถสร้างกราฟฟิคแพทช์ 9 ตัวโดยใช้โปรแกรมแก้ไขต่อไปนี้: http://inloop.github.io/shadow4android/

ตัวอย่าง:

กราฟิกแพทช์ 9:

ผลลัพธ์:

แหล่งที่มา:

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

โอเคฉันรู้ว่ามันสายเกินไปแล้ว แต่ฉันมีความต้องการเดียวกัน ฉันแก้ไขแบบนี้

1. ขั้นแรกสร้างไฟล์ xml (ตัวอย่าง: border_shadow.xml) ในโฟลเดอร์ "drawable" และคัดลอกรหัสด้านล่างลงไป

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

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="-1dp"
            android:top="-1dp" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

2. ทราบเกี่ยวกับเค้าโครงที่คุณต้องการเงา (ตัวอย่าง: LinearLayout) เพิ่มสิ่งนี้ใน android: พื้นหลัง

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

และนั่นก็ใช้ได้กับฉัน

มันง่ายมาก:

สร้างไฟล์ drawable ที่มีการไล่ระดับสีดังนี้:

สำหรับเงาใต้มุมมอง below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

สำหรับเงาเหนือมุมมอง above_shadow.xml

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

และอื่น ๆ สำหรับเงาด้านซ้ายและขวาเพียงแค่เปลี่ยนมุมของการไล่ระดับสี :)

คุณอาจใช้อิมเมจแพทช์ 9 อันเป็นพื้นหลังสำหรับเลย์เอาต์ของคุณซึ่งจะทำให้มีเงา "เป็นธรรมชาติ" มากขึ้น:

ผลลัพธ์:

ใส่ภาพใน/res/drawableโฟลเดอร์ของคุณ
ตรวจสอบให้แน่ใจว่านามสกุลไฟล์.9.pngไม่ใช่.png

นี่คือการแก้ไข (ลดขนาดเป็นสี่เหลี่ยมจัตุรัสต่ำสุด) ของทรัพยากรที่มีอยู่ที่พบในโฟลเดอร์ทรัพยากร API 19 sdk
ฉันออกจากเครื่องหมายสีแดงเนื่องจากพวกเขาดูเหมือนจะไม่เป็นอันตรายดังที่แสดงในเครื่องมือ draw9patch

[แก้ไข]

ประมาณ 9 แพตช์ในกรณีที่คุณไม่เคยทำอะไรกับมัน

เพียงเพิ่มเป็นพื้นหลังของมุมมองของคุณ

พื้นที่ที่มีเครื่องหมายสีดำ (ซ้ายและด้านบน) จะยืดออก (แนวตั้งแนวนอน)
พื้นที่ที่มีเครื่องหมายสีดำ (ขวา, ด้านล่าง) กำหนด "พื้นที่เนื้อหา" (ซึ่งเป็นไปได้ที่จะเพิ่มข้อความหรือมุมมอง - คุณสามารถเรียก "ช่องว่างภายใน" ที่ไม่ได้ทำเครื่องหมายไว้ในพื้นที่ได้หากคุณต้องการ)

บทช่วยสอน: http://radleymarx.com/blog/simple-guide-to-9-patch/

คุณสร้างไฟล์. xml โดยวาดได้ด้วยชื่อ drop_shadow.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

แล้ว:

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

ใช้บรรทัดเดียวนี้และหวังว่าคุณจะได้ผลลัพธ์ที่ดีที่สุด

การใช้งาน: android:elevation="3dp" ปรับขนาดมากที่สุดเท่าที่คุณต้องการและนี่คือวิธีที่ดีที่สุดและง่ายที่สุดในการทำให้เกิดเงาเช่นปุ่มและเงาหุ่นยนต์เริ่มต้นอื่น ๆ แจ้งให้เราทราบหากใช้งานได้!

หากคุณมีเส้นขอบจากรูปร่างแล้วให้เพิ่มระดับความสูง:

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

1. ขั้นแรกสร้างชื่อไฟล์ xml shadow.xml ในโฟลเดอร์ "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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

        <item
            android:bottom="6dp"
            android:left="0dp"
            android:right="6dp"
            android:top="0dp">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    </layer-list>

จากนั้นเพิ่มเลเยอร์รายการเป็นพื้นหลังใน LinearLayout ของคุณ

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

Ya Mahdi aj --- สำหรับญาติเลย์เอาต์

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="3dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="40dp"
                android:top="40dp"
                android:right="10dp"
                android:left="10dp"
                >
            </padding>
            <solid android:color="@color/Whitetransparent"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

ฉันรู้ว่ามันสายไปแล้ว แต่มันก็ช่วยใครซักคนได้

คุณสามารถใช้ constraintLayout และเพิ่มคุณสมบัติต่อไปนี้ใน xml

        android:elevation="4dp"

ฉันพบวิธีที่ดีที่สุดในการแก้ไขปัญหานี้

1. คุณต้องตั้งค่าพื้นหลังสี่เหลี่ยมผืนผ้าทึบบนเค้าโครง

2. ใช้รหัสนี้ - ViewCompat.setElevation(view , value)

3. ในชุดรูปแบบผู้ปกครอง android:clipToPadding="false"