Android - bóng trên văn bản?


184

Tôi đang tự hỏi làm thế nào để thêm bóng trên văn bản trong Android?

Tôi có đoạn mã sau được áp dụng trên bitmap và tôi muốn bị che khuất ...

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

2
Hãy nhớ rằng bạn phải có ShadowRadius.

2
Bạn nên đánh dấu câu trả lời @fhucho bên trái là câu trả lời đúng; Tôi đã cố gắng làm điều tương tự và bỏ lỡ nó lần đầu tiên tôi thấy bài đăng này, vì không có câu trả lời nào được đánh dấu là chính xác. Câu trả lời được đưa ra nhiều lần là sai lệch, vì nó không liên quan đến việc thêm bóng theo chương trình.
nói chuyện

Câu trả lời:


390

Bạn sẽ có thể thêm kiểu, như thế này (lấy từ mã nguồn cho 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>

Và trong cách bố trí của bạn, hãy sử dụng kiểu như thế này:

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

Chỉnh sửa: mã nguồn có thể được xem tại đây: https://github.com/google/ringdroid

Chỉnh sửa2 : Để đặt kiểu này theo lập trình, bạn sẽ làm một cái gì đó như thế này (được sửa đổi từ ví dụ này để phù hợp với tài nguyên của ringdroid từ trên)

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

Chữ ký cho setTextAppearance

công khai void setTextAppparent (Bối cảnh bối cảnh, int Resid)

Vì: API Cấp 1
Đặt màu văn bản, kích thước, kiểu, màu gợi ý và màu tô sáng từ tài nguyên TextAppparent đã chỉ định.


1
Nhưng OP đang yêu cầu các widget tùy chỉnh!
HRJ

Điều đó có thể, nhưng không có gì cho thấy anh ta không thể sử dụng phương pháp này trên ImageView. Tôi cho rằng anh ta đang vẽ trực tiếp vì anh ta không thể tìm ra cách khác.
Jim Schubert

tuyệt vời ... thêm độ sâu cần thiết cho phông chữ tiêu chuẩn và làm cho nó trông đẹp hơn gấp 10 lần trên một nền tảng vững chắc.
Matt K


2
Thực sự có ích, giơ ngón tay cái lên
Saad Bilal

72

Bạn có thể làm cả mã và XML. Chỉ có 4 điều cơ bản được thiết lập.

  1. màu bóng
  2. Shadow Dx - nó chỉ định bù trục X của bóng. Bạn có thể đưa ra các giá trị - / +, trong đó -Dx vẽ bóng ở bên trái văn bản và + Dx ở bên phải
  3. Shadow Dy - nó chỉ định độ lệch trục Y của bóng. -Dy chỉ định một bóng phía trên văn bản và + Dy chỉ định bên dưới văn bản.
  4. bán kính bóng - chỉ định mức độ bóng sẽ bị mờ ở các cạnh. Cung cấp một giá trị nhỏ nếu bóng cần phải nổi bật. Khác đi.

ví dụ

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

Điều này vẽ một bóng nổi bật ở phía dưới bên trái của văn bản. Trong mã, bạn có thể thêm một cái gì đó như thế này;

    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>

Trong mã bố cục XML ở trên, textview1 được cung cấp với hiệu ứng Shadow trong bố cục. Dưới đây là các mục cấu hình là

android: ShadowDx - chỉ định bù trục X của bóng. Bạn có thể đưa ra các giá trị - / +, trong đó -Dx vẽ bóng ở bên trái văn bản và + Dx ở bên phải

android: ShadowDy - nó chỉ định độ lệch trục Y của bóng. -Dy chỉ định một bóng phía trên văn bản và + Dy chỉ định bên dưới văn bản.

android: ShadowRadius - chỉ định bao nhiêu bóng sẽ bị mờ ở các cạnh. Cung cấp một giá trị nhỏ nếu bóng cần phải nổi bật. android: ShadowColor - chỉ định màu bóng


Hiệu ứng bóng trên Android TextView một cách thực tế

Sử dụng đoạn mã dưới đây để có được hiệu ứng đổ bóng trên TextView thứ hai một cách thực tế.

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

Đầu ra:

nhập mô tả hình ảnh ở đây


3

Nếu bạn muốn đạt được một cái bóng giống như cái mà Android thực hiện trong Trình khởi chạy, chúng tôi đang quản lý các giá trị này. Chúng rất hữu ích nếu bạn muốn tạo TextViews sẽ xuất hiện dưới dạng Widget, không có nền.

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

2

Vẽ 2 văn bản: một màu xám (nó sẽ là bóng) và trên đầu nó vẽ văn bản thứ hai (y phối hợp thêm 1px sau đó đổ bóng văn bản).


1
Cảm ơn các bạn cho bài viết của bạn. Tôi đã giải quyết nó bằng cách sử dụng hai đối tượng vẽ và sử dụng setShadaowLayer trên một trong các đối tượng vẽ.
Grendizer

2
Điều này có thể trông ổn nếu bạn sử dụng alpha, nhưng sẽ không giống như cái bóng được thiết lập khai báo đẹp, mềm mại.
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>

sau đó sử dụng như

 <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"/>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.