Cách đặt Opacity (Alpha) cho Chế độ xem trong Android


211

Tôi có một nút như sau:

<Button 
     android:text="Submit" 
     android:id="@+id/Button01" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content">
</Button>

Trong onCreate()sự kiện của tôi , tôi đang gọi Nút01 như thế này:

setContentView(R.layout.main);

View Button01 = this.findViewById(R.id.Button01);
Button01.setOnClickListener(this);

Có một nền tảng trong ứng dụng và tôi muốn đặt độ mờ cho nút gửi này. Làm cách nào tôi có thể đặt độ mờ cho chế độ xem này? Đây có phải là thứ mà tôi có thể đặt ở phía java hay tôi có thể đặt trong tệp main.xml?

Về phía java tôi đã thử Button01.mutate().SetAlpha(100), nhưng nó đã cho tôi một lỗi.

Câu trả lời:


64

Tôi vừa tìm thấy câu hỏi của bạn trong khi gặp vấn đề tương tự với TextView. Tôi đã có thể giải quyết nó, bằng cách mở rộng TextView và ghi đè onSetAlpha. Có lẽ bạn có thể thử một cái gì đó tương tự với nút của bạn:

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

public class AlphaTextView extends TextView {

  public AlphaTextView(Context context) {
    super(context);
  }

  public AlphaTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public AlphaTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  public boolean onSetAlpha(int alpha) {
    setTextColor(getTextColors().withAlpha(alpha));
    setHintTextColor(getHintTextColors().withAlpha(alpha));
    setLinkTextColor(getLinkTextColors().withAlpha(alpha));
    return true;
  }
}

12
Cảm ơn, điều này cũng giúp tôi. Tuy nhiên, thật nực cười khi TextView và ImageView có các cách khác nhau để đặt alpha.
Geraldo Nascimento

Điều này cũng giúp tôi trong việc áp dụng hiệu ứng nhấp chuột vào chế độ xem hình ảnh mà không cần tài nguyên thứ hai. Thanx !!
skygeek

568

Tôi ngạc nhiên bởi những câu trả lời phức tạp hơn RẤT NHIỀU người khác .

XML

Bạn có thể chỉ cần định nghĩa alpha trong định nghĩa màu của nút (hoặc bất kỳ chế độ xem nào khác) trong xml của bạn:

android:color="#66FF0000"    // Partially transparent red

Trong ví dụ trên, màu sẽ là màu đỏ trong suốt một phần.

Khi xác định màu của chế độ xem, định dạng có thể là #RRGGBBhoặc #AARRGGBB, ở đâu AAlà giá trị hex alpha. FFsẽ hoàn toàn mờ đục và 00sẽ được minh bạch đầy đủ.

Tự động

Nếu bạn cần thay đổi linh hoạt độ mờ trong mã của mình, hãy sử dụng

myButton.getBackground().setAlpha(128);  // 50% transparent

Trong đó INT dao động từ 0(hoàn toàn trong suốt) đến 255(hoàn toàn mờ đục).


18
Đây vẫn không phải là giải pháp nếu bạn có một hợp chất có thể rút ra
Michał K

6
Đặt một nửa màu xanh lục trong suốt của chế độ xem: <RelativeLayout android: background = "# 8700FF00" />
Jonny

2
Xem không có android:colorthuộc tính.
Ronnie

6
@moshersan Bạn có thể đặt màu trong Android: thuộc tính nền!
Dheeraj Bhaskar

1
Đó là backgroundđộ mờ không chính xác không phải là viewđộ mờ. Không tương đương trong nhiều trường hợp sử dụng
Jocky Doe

215

Tôi đoán bạn có thể đã tìm thấy câu trả lời, nhưng nếu không (và đối với các nhà phát triển khác), bạn có thể làm điều đó như thế này:

btnMybutton.getBackground().setAlpha(45);

Ở đây tôi đã đặt độ mờ thành 45. Về cơ bản, bạn có thể đặt nó từ bất kỳ thứ gì trong khoảng từ 0 (hoàn toàn trong suốt) thành 255 (hoàn toàn mờ đục)


5
Điều này chỉ khả dụng trên API 11+ developer.android.com/reference/android/view/NH
Graeme

8
@Graeme bạn đã liên kết với phương thức setAlpha trên lớp View, nhưng bài đăng đang sử dụng setAlpha trên lớp Drawable. Phương thức getBackground trả về một Drawable. Phương pháp này được lấy từ API Cấp 1. developer.android.com/reference/android/graphics/drawable/,
Geekygecko

Oh! thật thú vị! Tôi đã không nhìn thấy điều đó. Điều này có nghĩa là văn bản có thể nhìn thấy đầy đủ ngay cả khi nền được đặt thành trong suốt.
Graeme

-1 điều này không hoạt động trong trường hợp của tôi trong đó nền có thể vẽ của tôi là một bộ chọn.
Mike S

3
Điều này hoạt động rất tốt nhưng với một hiệu ứng phụ: tôi có nhiều nút chia sẻ cùng một nền và chúng trở nên trong suốt! :(
Đánh dấu

66

Những gì tôi muốn đề nghị bạn làm là tạo một màu ARGB tùy chỉnh trong tệp colors.xml của bạn, chẳng hạn như:

<resources>
<color name="translucent_black">#80000000</color>
</resources>

sau đó đặt nền nút của bạn thành màu đó:

android:background="@android:color/translucent_black"

Một điều khác bạn có thể làm nếu bạn muốn chơi xung quanh với hình dạng của nút là tạo tài nguyên có thể vẽ Hình dạng nơi bạn thiết lập các thuộc tính mà nút sẽ trông như thế nào:

tệp: res / drawable / round_corner_box.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#80000000"
        android:endColor="#80FFFFFF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

Sau đó sử dụng nó làm nền nút:

    android:background="@drawable/rounded_corner_box"

6
Nếu bạn đang vật lộn để chuyển đổi từ độ mờ 40% thành giá trị hex, bạn có thể sử dụng tìm kiếm google "40% của 255 thành hex", cung cấp giá trị hex cho 40%
scottyab

54

Theo tài liệu android xem alpha là một giá trị trong khoảng từ 0 đến 1. Vì vậy, để thiết lập nó sử dụng một cái gì đó như thế này:

View v;
v.setAlpha(.5f);

Đó là những gì chỉ làm việc cho tôi cho toàn bộ chế độ xem ... Tôi đã thử trên mục listview, trong đó có nhiều bài xem. dòng duy nhất này đã giúp thiết lập alpha trên view và con của nó. Cảm ơn @ cange1
Alyas

Chỉ có điều đó làm việc cho tôi là tốt. Tôi biết điều này đã cũ, nhưng cảm ơn @ cange1
masoftheund

50

Dễ dàng hơn nhiều từ những điều trên. Thuộc tính alpha mặc định là có cho nút

android:alpha="0.5"

Phạm vi nằm trong khoảng từ 0 cho độ trong suốt hoàn toàn và 1 cho độ mờ hoàn toàn.


Đây chính xác là những gì tôi đang tìm kiếm, tuyệt vời, đã được thử nghiệm trên api 21
Fernando Torres

Câu trả lời hoàn hảo!!
Harry .Naeem

18
android:background="@android:color/transparent"

Trên đây là những điều mà tôi biết ... Tôi nghĩ rằng việc tạo một lớp nút tùy chỉnh là ý tưởng tốt nhất

API cấp 11
Gần đây tôi đã bắt gặp thuộc tính android: alpha xml này có giá trị từ 0 đến 1. Phương thức tương ứng là setAlpha (float) .


Xin chào Josnidhin. Cảm ơn bạn đã trả lời của bạn. Nhưng nó làm cho toàn bộ nút hoàn toàn trong suốt. Những gì tôi đang tìm kiếm là đặt một số độ mờ (có thể thông qua giá trị alpha) trên nút.
ncakmak

Đó là một số float, vì vậy bạn có thể sử dụng các giá trị GIỮA 0 và 1, 0,5 chẳng hạn.
StackOverflow

@StackOverflowed - tôi tin rằng ncakmak có nghĩa là giải pháp đầu tiên. thiết lập @android:color/transparentlàm Nền thực sự sẽ làm cho chế độ xem hoàn toàn trong suốt. Phần @android:alpha- dường như là một phụ lục.
katzenhut

17

Mặc dù btnMybutton.getBackground().setAlpha(45);là ý tưởng hay, nó chỉ áp dụng alpha cho nền chứ không phải toàn bộ khung nhìn.

Nếu bạn muốn áp dụng alpha để xem sử dụng btnMybutton.setAlpha(0.30f);thay thế. Điều này áp dụng độ mờ cho View. Nó chấp nhận một giá trị từ 0 đến 1.

Bác sĩ nói:

Đặt độ mờ của khung nhìn. Đây là giá trị từ 0 đến 1, trong đó 0 có nghĩa là chế độ xem hoàn toàn trong suốt và 1 có nghĩa là chế độ xem hoàn toàn mờ. Nếu chế độ xem này ghi đè trên SetAlpha (int) để trả về giá trị true, thì chế độ xem này chịu trách nhiệm áp dụng chính độ mờ. Mặt khác, gọi phương thức này tương đương với việc gọi setLayerType (int, android.graphics.Paint) và thiết lập một lớp phần cứng. Lưu ý rằng việc đặt alpha thành giá trị mờ (0 <alpha <1) có thể có ý nghĩa về hiệu suất. Nói chung, tốt nhất là sử dụng thuộc tính alpha một cách tiết kiệm và tạm thời, như trong trường hợp hình ảnh động mờ dần.


7

Tôi đã gặp phải vấn đề này với ICS / JB vì các nút mặc định cho chủ đề Holo bao gồm các hình ảnh hơi trong suốt. Đối với một nền tảng này là đặc biệt đáng chú ý.

Gingerbread so với ICS +:

bánh gừng ICS

Sao chép trên tất cả các trạng thái và hình ảnh có thể vẽ cho mỗi độ phân giải và làm cho hình ảnh trong suốt trở nên khó khăn, vì vậy tôi đã chọn giải pháp bẩn hơn: bọc nút trong ngăn chứa có nền trắng. Đây là một bản vẽ XML thô (NútHolder) thực hiện chính xác điều đó:

Tệp XML của bạn

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              style="@style/Content">
  <RelativeLayout style="@style/ButtonHolder">
      <Button android:id="@+id/myButton"
              style="@style/Button"
              android:text="@string/proceed"/>
    </RelativeLayout>
</LinearLayout>

NútHolder.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="@color/white"/>
    </shape>
  </item>

</layer-list>

kiểu tệp

.
.
.      
  <style name="ButtonHolder">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:background">@drawable/buttonholder</item>
  </style>

  <style name="Button" parent="@android:style/Widget.Button">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:textStyle">bold</item>
  </style>
.
.
.

Tuy nhiên, điều này dẫn đến viền trắng vì hình ảnh nút Holo bao gồm lề để chiếm không gian được nhấn:

Quá nhiều màu trắng Quá nhiều ép trắng

Vì vậy, giải pháp là tạo cho lề trắng một lề (4dp làm việc cho tôi) và các góc tròn (2dp) để ẩn hoàn toàn màu trắng nhưng vẫn làm cho nút chắc chắn:

NútHolder.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="@android:color/transparent"/>
    </shape>
  </item>

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

</layer-list>

Kết quả cuối cùng trông như thế này:

Không trắng Không ép trắng

Bạn nên nhắm mục tiêu kiểu này cho v14 + và điều chỉnh hoặc loại trừ nó cho Gingerbread / Honeycomb vì kích thước hình ảnh nút gốc của chúng khác với ICS và JB (ví dụ: kiểu chính xác này đằng sau nút Gingerbread dẫn đến một chút màu trắng bên dưới nút).


7

Để xem, bạn có thể đặt độ mờ bằng cách sau.

view_name.setAlpha(float_value);

Thuộc tính view.setAlpha(int)không được dùng cho phiên bản API lớn hơn 11. Do đó, thuộc tính giống như .setAlpha(0.5f)được sử dụng.


6

Đối với API <11 cho màu textView tôi đã làm như sau:

int textViewColor = textView.getTextColors().getDefaultColor(); 
textView.setTextColor(Color.argb(128, Color.red(textViewColor), Color.green(textViewColor), Color.blue(textViewColor))); //50% transparent

Một chút rườm rà, nhưng hey, nó hoạt động :-)


1

Tôi biết điều này đã có sẵn một loạt các câu trả lời nhưng tôi thấy rằng đối với các nút, thật dễ dàng nhất để tạo các bộ chọn .xml của riêng bạn và đặt nó vào nền của nút đã nói. Bằng cách đó, bạn cũng có thể thay đổi trạng thái khi nhấn hoặc bật và cứ thế. Đây là một đoạn nhanh của một cái mà tôi sử dụng. Nếu bạn muốn thêm độ trong suốt cho bất kỳ màu nào, hãy thêm giá trị hex hàng đầu (#XXcccccc). (XX == "alpha màu")

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#70c656" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#70c656"
                android:endColor="#53933f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#53933f" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>
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.