Làm cách nào để tạo lớp phủ hướng dẫn màu xám nửa trong suốt trong Android?

Question

Bạn biết khi bạn chạy thiết bị Android lần đầu tiên (thứ bạn thấy rất nhiều nếu bạn sử dụng trình giả lập) có một hướng dẫn hữu ích về cách sử dụng trình khởi chạy và thêm tiện ích, v.v. Tôi đang cố gắng tìm một ví dụ về điều này trên Google, nhưng tôi không thể. Tôi hy vọng bạn biết những gì tôi có ý nghĩa. Đó là nút có nút "okay" màu lam ở mỗi bước.

Dù sao, tôi muốn tạo một ứng dụng cho ứng dụng của mình, nhưng tôi không chắc đó là cách tốt nhất để thực hiện.

Tôi có tạo Phân đoạn mà tôi có thể bán trong suốt trên hoạt động thường xuyên của mình và chỉ hiển thị trên lần chạy đầu tiên không?

Tôi có tạo một .png bán trong suốt cho từng phần của hướng dẫn và phủ nó lên hoạt động trình khởi chạy thông thường trong lần chạy đầu tiên không?

Nếu tôi làm việc sau, làm cách nào tôi có thể điều chỉnh cho tất cả các kích thước màn hình khác nhau? Tôi chỉ có thể hiển thị hình ảnh trong Photoshop với các kích thước khác nhau, nhưng điều đó sẽ không bao gồm tất cả chúng. Nếu tôi đi tuyến đường mảnh, tôi chỉ có thể nói "match_parent" và không lo lắng về nó. Nhưng sau đó tôi phải tìm ra cách các mảnh vỡ hoạt động, và chúng làm tôi bối rối.

Answer 1

Tôi nghĩ rằng thư viện mã nguồn mở này là chính xác những gì bạn đang tìm kiếm:

Showcase View

Bạn có thể lấy mã nguồn và hướng dẫn thiết lập từ GitHub.

Answer 2

Bạn không cần sử dụng Photoshop. Bạn có thể sử dụng ví dụ một LinearLayout với android:background="#50134BE8". Điều này sẽ làm cho nó trong suốt màu xanh. Bạn có thể đặt bố cục lên trên mọi thứ và ẩn nó khi người dùng hoàn tất. Bạn có thể sử dụng bất kỳ màu nền nào, nhưng để làm cho nó trong suốt, hãy đặt một số từ 01 đến FE, sau ký hiệu "#" để thay đổi độ trong suốt của nó. Đặt chiều rộng và chiều cao thành fill_parent để chiếm toàn bộ khu vực. Đặt trực tiếp chế độ xem này trong bố cục chính. Hi vọng điêu nay co ich.

Answer 3

Bạn có thể thử một cái gì đó như thế này

<LinearLayout ... > 
<!-- your Normal layout goes here --> 
<RelativeLayout android:id="@+id/tutorialView" android:background="#D0000000" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"> 

     <ImageView android:src="@drawable/hint_menu" android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true" android:layout_width="wrap_content" 
        android:layout_height="wrap_content"/> 

    </RelativeLayout> 
</LinearLayout> 

Và trong phương pháp onCreate của bạn

View tutorialView = findViewById(R.id.tutorialView); 
     boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false); 
     if (!tutorialShown) { 
      tutorialView.setVisibility(View.VISIBLE); 
     } else { 
      tutorialView.setVisibility(View.GONE); 
     } 

     tutorialView.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       v.setVisibility(View.GONE); 
       PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit(); 
      } 
     }); 

Answer 4

Sử dụng một mã màu thập lục phân, trong đó bao gồm hai chữ số cho alpha và Sáu cho bản thân màu sắc, như thế này:

android:background="#22FFFFFF" 

Nó sẽ làm cho nó bán trong suốt.

android:background="#c0000000" for more darkness 

Sửa

chung hexadecimak cấu trúc mã màu giống như '#FFFF'

Đối đạt minh bạch thêm hai chữ số sau '#' để bất kỳ mã màu.

Ví dụ: #110000, #220000, #330000.

Hai chữ số càng lớn, độ trong suốt càng nhỏ.

Answer 5

Có một thư viện đoạt giải thưởng cho điều này được gọi là "FancyShowcaseView":

https://github.com/faruktoptas/FancyShowCaseView

Thêm vào dự án của bạn như thế này:

Trong top-levelbuild.gradle (không cấp mô-đun):

allprojects { 
    repositories { 
     ... 
     maven { url "https://jitpack.io" } 
    } 
} 

Trong mô-đun cấp (ứng dụng) build.gradle

dependencies { 
    compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0' 
} 

Sau đó, bạn có thể gọi:

new FancyShowCaseView.Builder(this) 
     .focusOn(view) 
     .title("Focus on View") 
     .build() 
     .show();