Android - เงาในข้อความ?


184

ฉันสงสัยว่าจะเพิ่มเงาบนข้อความใน Android ได้อย่างไร

ฉันมีรหัสต่อไปนี้ซึ่งใช้กับบิตแมปและฉันต้องการเงา ...

paint.setColor(Color.BLACK);
paint.setTextSize(55);
paint.setFakeBoldText(false);
paint.setShadowLayer(1, 0, 0, Color.BLACK); //This only shadows my whole view...

2
โปรดทราบว่าคุณต้องมี ShadowRadius

2
คุณควรทำเครื่องหมายคำตอบ @fhucho ทิ้งไว้เป็นคำตอบที่ถูกต้อง; ฉันพยายามทำสิ่งเดียวกันและพลาดมันในครั้งแรกที่ฉันเห็นโพสต์นี้เนื่องจากไม่มีคำตอบถูกทำเครื่องหมายว่าถูกต้อง คำตอบที่เพิ่มขึ้นหลายครั้งทำให้เข้าใจผิดเนื่องจากไม่เกี่ยวข้องกับการเพิ่มเงาโดยทางโปรแกรม
areyling

คำตอบ:


390

คุณควรจะเพิ่มสไตล์เช่นนี้ (นำมาจากซอร์สโค้ดสำหรับ Ringdroid):

  <style name="AudioFileInfoOverlayText">
    <item name="android:paddingLeft">4px</item>
    <item name="android:paddingBottom">4px</item>
    <item name="android:textColor">#ffffffff</item>
    <item name="android:textSize">12sp</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
  </style>

และในเลย์เอาต์ของคุณใช้สไตล์ดังนี้:

 <TextView android:id="@+id/info"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       style="@style/AudioFileInfoOverlayText"
       android:gravity="center" />

แก้ไข: ซอร์สโค้ดสามารถดูได้ที่นี่: https://github.com/google/ringdroid

แก้ไข 2: หากต้องการตั้งค่ารูปแบบนี้โดยทางโปรแกรมคุณต้องทำสิ่งนี้ (แก้ไขจากตัวอย่างนี้เพื่อจับคู่ทรัพยากรของ ringdroid จากด้านบน)

TextView infoTextView = (TextView) findViewById(R.id.info);
infoTextView.setTextAppearance(getApplicationContext(),  
       R.style.AudioFileInfoOverlayText);

ลายเซ็นต์สำหรับsetTextAppearanceคือ

โมฆะสาธารณะ setTextAppearance (บริบทบริบทส่วนที่เหลือ int)

ตั้งแต่: ระดับ API 1
ตั้งค่าสีข้อความขนาดสไตล์สีคำใบ้และสีไฮไลต์จากทรัพยากร TextAppearance ที่ระบุ


1
แต่ OP กำลังขอวิดเจ็ตที่กำหนดเอง!
HRJ

อาจเป็นได้ แต่ไม่มีอะไรที่จะแนะนำว่าเขาไม่สามารถใช้วิธีนี้กับ ImageView ได้ ฉันคิดว่าเขากำลังวาดภาพโดยตรงเพราะเขาไม่สามารถเข้าใจได้
Jim Schubert

ยอดเยี่ยม ... เพิ่มความลึกที่ต้องการลงในแบบอักษรมาตรฐานและทำให้ดูดีขึ้น 10 เท่าบนพื้นหลังที่มั่นคง
Matt K

@Farhan ดูที่นี่: stackoverflow.com/questions/4630440/…
Jim Schubert

2
ช่วยได้มากยกนิ้ว
Saad Bilal

72

คุณสามารถทำได้ทั้งในรหัสและ XML มีเพียง 4 สิ่งพื้นฐานที่จะตั้งค่า

  1. สีเงา
  2. Shadow Dx - มันระบุออฟเซ็ต X-axis ของเงา คุณสามารถให้ - / + ค่าที่ -Dx วาดเงาทางด้านซ้ายของข้อความและ + Dx ทางด้านขวา
  3. shadow Dy - มันระบุออฟเซ็ต Y แกนของเงา -Dy ระบุเงาเหนือข้อความและ + Dy ระบุด้านล่างข้อความ
  4. รัศมีเงา - ระบุว่าเงาควรจะเบลอที่ขอบเท่าใด ระบุค่าเล็กน้อยหากจำเป็นต้องมีเงา มิฉะนั้นเป็นอย่างอื่น

เช่น

    android:shadowColor="@color/text_shadow_color"
    android:shadowDx="-2"
    android:shadowDy="2"
    android:shadowRadius="0.01"

นี่จะทำให้เกิดเงาที่เด่นชัดที่ด้านซ้ายล่างของข้อความ ในรหัสคุณสามารถเพิ่มสิ่งนี้

    TextView item = new TextView(getApplicationContext());
    item.setText(R.string.text);
    item.setTextColor(getResources().getColor(R.color.general_text_color));
    item.setShadowLayer(0.01f, -2, 2,   getResources().getColor(R.color.text_shadow_color));

7
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="20dp" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:shadowColor="#000"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="50"
        android:text="Text Shadow Example1"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Text Shadow Example2"
        android:textColor="#FBFBFB"
        android:textSize="28dp"
        android:textStyle="bold" />

</LinearLayout>

ในโค้ดเลย์เอาต์ XML ข้างต้น textview1 จะถูกกำหนดด้วยเอฟเฟกต์ Shadow ในโครงร่าง ด้านล่างเป็นรายการการกำหนดค่าคือ

android: shadowDx - ระบุออฟเซ็ต X-axis ของ shadow คุณสามารถให้ - / + ค่าที่ -Dx วาดเงาทางด้านซ้ายของข้อความและ + Dx ทางด้านขวา

android: shadowDy - มันระบุอ็อฟเซ็ตแกน Y ของเงา -Dy ระบุเงาเหนือข้อความและ + Dy ระบุด้านล่างข้อความ

android: shadowRadius - ระบุจำนวนเงาที่ควรเบลอที่ขอบ ระบุค่าเล็กน้อยหากจำเป็นต้องมีเงา android: shadowColor - ระบุสีเงา


Shadow Effect บน Android TextView ในทางปฏิบัติ

ใช้โค้ดขนาดด้านล่างเพื่อรับเอฟเฟกต์เงาใน TextView อันที่สองในทางปฏิบัติ

TextView textv = (TextView) findViewById(R.id.textview2);
textv.setShadowLayer(30, 0, 0, Color.RED);        

ผลผลิต:

ป้อนคำอธิบายรูปภาพที่นี่


3

หากคุณต้องการให้เกิดเงาเช่นเดียวกับที่ Android ทำใน Launcher เราจะจัดการค่าเหล่านี้ มีประโยชน์หากคุณต้องการสร้าง TextViews ที่จะปรากฏเป็น Widget โดยไม่มีพื้นหลัง

android:shadowColor="#94000000"
android:shadowDy="2"
android:shadowRadius="4"

2

วาดข้อความ 2: สีเทาหนึ่ง (มันจะเป็นเงา) และด้านบนของมันวาดข้อความที่สอง (พิกัด y มากกว่า 1px แล้วเงาข้อความ)


1
ขอบคุณมากสำหรับโพสต์ของคุณ ฉันแก้มันโดยใช้วัตถุสองสีและใช้ setShadaowLayer ในหนึ่งในวัตถุสี
Grendizer

2
สิ่งนี้อาจดูโอเคถ้าคุณใช้อัลฟ่า แต่จะไม่ดูเหมือนเงาที่นุ่มนวลและชัดเจน
ShibbyUK

2
 <style name="WhiteTextWithShadow" parent="@android:style/TextAppearance">
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
    <item name="android:shadowColor">@android:color/black</item>
    <item name="android:textColor">@android:color/white</item>
</style>

จากนั้นใช้เป็น

 <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            tools:text="Today, May 21"
            style="@style/WhiteTextWithShadow"/>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.