Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีเพิ่มเงา (Shadow) ให้ข้อความใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการเพิ่มเงา (Shadow) ให้ข้อความใน TextView โดยใช้เมธอด setShadowLayer() ซึ่งรองรับการกำหนดรัศมีความเบลอ ตำแหน่ง Offset และสีของเงา

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: ออกแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Hello World!"
        android:layout_centerInParent="true"
        android:textSize="128sp"
        android:textStyle="bold|italic" />

</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity (src/MainActivity.java)

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = findViewById(R.id.textView);
        textView.setTextColor(Color.MAGENTA);
        
        // 🔑 setShadowLayer(radius, dx, dy, shadowColor)
        // radius: รัศมีความเบลอของเงา (px)
        // dx: ระยะเลื่อนแนวนอน (+ = ขวา, - = ซ้าย)
        // dy: ระยะเลื่อนแนวตั้ง (+ = ล่าง, - = บน)
        // shadowColor: สีของเงา
        textView.setShadowLayer(16, 8, 8, Color.BLUE);
    }
}

ขั้นตอนที่ 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

การกำหนด Shadow ผ่าน XML (Alternative)

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Shadow"
    android:textSize="48sp"
    android:textColor="#FFFFFF"
    android:shadowColor="#000000"
    android:shadowDx="4"
    android:shadowDy="4"
    android:shadowRadius="8" />

ตัวอย่าง Shadow Styles ต่างๆ

StyleCodeผลลัพธ์
Drop Shadow แบบคลาสสิกsetShadowLayer(4, 2, 2, Color.BLACK)เงาเล็กน้อยมุมขวาล่าง
Glow EffectsetShadowLayer(20, 0, 0, Color.CYAN)แสงส่องรอบตัวอักษร
Long ShadowsetShadowLayer(2, 10, 10, Color.GRAY)เงายาวโค้ง
Inner Shadow (ปลอม)setShadowLayer(4, -2, -2, Color.WHITE) + textColor Darkดูเหมือนกดเข้าไป
Multi-layer Shadowใช้ SpannableString หลาย Layerเงาหลายชั้น

Multi-Shadow ด้วย SpannableString (ขั้นสูง)

TextView textView = findViewById(R.id.textView);
textView.setTextColor(Color.WHITE);

// Layer 1: Outer glow
textView.setShadowLayer(20, 0, 0, Color.parseColor("#FF6B6B"));

// สำหรับ Multi-shadow จริง ต้องใช้ Custom View หรือ Canvas
// หรือใช้ TextView หลายตัวทับกัน (Layer List)

การทดสอบ

รันแอป จะเห็นข้อความ "Hello World!" สีมัเจนต้า พร้อมเงาสีน้ำเงิน รัศมี 16px เลื่อน 8px ทั้ง X และ Y

วิธีเพิ่มเงา (Shadow) ให้ข้อความใน Android