몇 가지 Android 앱 및 ICS에서 볼 수있는 것처럼 도움말 오버레이를 만들려면 어떻게해야합니까?


93

ICS가 처음로드 될 때 표시되는 것과 같은 도움말 오버레이를 만들거나 ES 파일 탐색기 또는 Apex Launcher와 같은 앱 (더 많은 것이 있지만 지금은 생각할 수 없습니다)을 만들고 싶습니다. 이것은 하나의 뷰가 다른 뷰 위에 놓여있는 상대적인 레이아웃입니까? 나는 그런 일을하기위한 샘플 코드를 찾을 수 없었다. 누구든지 이것이 어떻게 수행되는지 알고 있거나 아이디어가 있습니까?

ES 파일 탐색기 ES 파일 탐색기

답변:


84

일반적으로를 호출한다고 가정 setContentView(R.layout.main)하지만 처음 실행할 때이 오버레이를 원합니다.

1 단계 : FrameLayoutJava 코드를 생성 하여 setContentView().

단계 # 2 :이 LayoutInflater팽창하는 R.layout.mainFrameLayout.

3 단계 : LayoutInflater오버레이를 FrameLayout.

4 단계 : 사용자가 버튼 (또는 기타)을 탭하여 오버레이를 닫을 때를 호출 removeView()하여 FrameLayout.

오버레이는의 나중 자식 FrameLayout이므로의 콘텐츠 위에 떠있게됩니다 R.layout.main.


6
@ ssuperz28 : 예, 손으로 그린 ​​화살촉과 거품을 제외하고. 당신은 그것들을 위해 당신 자신입니다. :-)
CommonsWare

당신이 원하는 일을 할 수 있었는지 모르겠지만 여기에 또 다른 대안이 있습니다. stackoverflow.com/questions/8841240/… CommonsWare에서 제공하는 솔루션을 관리하는 경우 화살표를 설정하기 위해 저에게 발생하는 유일한 일은 화살표가있는 이미지가있는 resourceImage 또는 backgroundImage가있는 명령의 FrameLayout을 정의하는 것입니다. (및 투명성).
Edison Santos

1
이것을 수행하는 방법이 있지만 FrameLayout에서 아래에있는 어린이 위치와 관련하여 수행합니까?
4gus71n 2010 년

@ CommonsWare-선생님이 어떤 장치이든 상관없이 작동합니까?
Rat-a-tat-a-tat Ratatouille 2014

2
@ user3364963 : 사물의 위치를 ​​동적으로 조정합니다. 내 대답은 다소 단순화되었습니다. 강조 표시 할 요소의 위치를 ​​결정하고 "코치 마크"의 좌표를 조정한다고 가정합니다. ViewGroup"코치 마크"레이어에 대한 사용자 정의 가이를 처리 할 수 ShowcaseView있으며 해당 패턴의 미리 준비된 구현을 제공하는 라이브러리 (예 :)가 있습니다.
CommonsWare

80

"코치 마크"는 UX 토크에서 "도움말 오버레이"입니다. :-)

coach_mark.xml 은 코치 마크 레이아웃입니다.

coach_mark_master_view은 에서 최상위 뷰 (루트)의 ID입니다 coach_mark.xml

public void onCoachMark(){

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    dialog.setContentView(R.layout.coach_mark);
    dialog.setCanceledOnTouchOutside(true);
    //for dismissing anywhere you touch
    View masterView = dialog.findViewById(R.id.coach_mark_master_view);
    masterView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.dismiss();
        }
    });
    dialog.show();
}

coach_mark.xml (Oded Breiner가 제공 한이 우수한 솔루션에) 샘플을 추가하여 ppl이 쉽게 복사 및 붙여 넣기하여 작업 예제를 빠르게 볼 수 있습니다.

여기에 coach_mark.xml의 샘플,-> drawable / coach_marks를 이미지로 변경하십시오.

coach_mark.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/coach_mark_master_view">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
         <ImageView
             android:id="@+id/coach_marks_image"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_centerInParent="true"
             android:layout_gravity="center_horizontal"
             android:src="@drawable/coach_marks" />
    </RelativeLayout>
</LinearLayout>

선택적으로이 테마를 사용하여 패딩을 제거합니다.

<style name="WalkthroughTheme" parent="Theme.AppCompat">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

안녕하세요,이 대화 상자를 화면에 맞게 늘리려면 어떻게해야합니까? 설명서에서 A dialog is a small window that prompts [...]. A dialog does not fill the screen and is normally used for modal events [...].. 이 코드를 사용하면 화면의 작은 부분에 마스터 뷰가 압축됩니다. 내가 설정하면 (즉 android:layout_width="640dp" android:layout_height="480dp", 테스트중인 화면의 실제 값) 올바르게 작동합니다. (물론 이것은 실행 가능한 해결책이 아닙니다.)
ocramot 2015

@ocramot : 위의 예 때문에 match_parent 및 Window.FEATURE_NO_TITLE의 전체 화면으로해야한다
오디드 Breiner

그렇다면 다른 문제가있을 것입니다. 다른 방식으로보고 있기 때문입니다
ocramot

1
나는 이것이 적어도 몇 개월 된 것을 알고 있지만 전체 화면 질문이 밝혀 졌습니까?
cbhedd

3
: 대화의 주제를 설정하는 방법을 모르는 사람들에게, 너무 같은 대화 상자를 인스턴스화new Dialog(getContext(), R.style.WalkthroughTheme);
w3bshark

4

꽤 빨리 할 수 ​​있습니다. 예를 들어 도움말 정보에 해당하는 알파가있는 그림과 오버레이처럼 그리려는 그림을 넣는 LinearLayout을 추가합니다. 활동의 xml에서 Gone 가시성을 가진 활동의 레이아웃 후에이 레이아웃을 RelativeLayout에 넣습니다. 도움말 정보를 그리려는 경우이 가시성을 표시로 설정하면됩니다.

질문이 있으시면 기꺼이 답변 해 드리겠습니다.


귀하의 의견에 감사드립니다. 이것이 내가 그것이 행해지는 것을 상상 한 방법입니다. 그것이 내가 그것을 만들 방법이기 때문에 아래 답변에 크레딧을 주어야합니다. 더 관리하기 쉽고 기본 활동 레이아웃을 변경할 필요가 없습니다.
ssuperz28

1

현재 활동 위에 오버레이 레이아웃을 프로그래밍 방식으로 표시하는 방법에 대한 또 다른 답변을 참조하십시오. 활동의 layout.xml은 오버레이 스킨에 대해 알 필요가 없습니다. 반투명 오버레이를 배치하고, 화면의 일부만 덮고, 하나 이상의 텍스트보기와 버튼을 덮을 수 있습니다. 프로그래밍 방식으로 버튼을 오버레이하는 방법은 무엇입니까?

  • res / layout / paused.xml RelativeLayout 템플릿을 생성하거나 레이아웃 최상위 레벨을 사용합니다.
  • 오버레이 스킨을 표시하는 함수 생성
  • 핵심은 layout.xml에 대한 핸들을 가져오고 LayoutInflater 클래스를 사용하여 xml을 구문 분석하여 객체를보고 오버레이보기를 현재 레이아웃 구조에 추가하는 것입니다.
  • 내 예제는 타이머를 사용하여 뷰 구조에서 완전히 제거하여 오버레이 객체를 파괴합니다. 이것은 아마도 당신이 흔적없이 그것을 제거하기를 원할 것입니다.

내 목표는 주요 활동이 오버레이 스킨을 인식하지 못하고, 오버레이가오고 가고, 많은 다른 오버레이가 여전히 overlay1.xml 텍스트 파일을 템플릿으로 사용할 수 있으며, 콘텐츠를 프로그래밍 방식으로 업데이트해야한다는 것이 었습니다. 저는 CommonsWare가 제 게시물에서 시작하기위한 실제 프로그램 코드를 보여준 것을 거의 수행합니다.

면책 조항 : OPs "귀하의 의견에 감사드립니다. 이것은 내가 그것을 어떻게 생각했는지입니다. 아래 답변에 크레딧을 주어야합니다"코멘트는 내 답변이 아니라 CommonsWare 답변을 의미합니다. Stackoverflow는 사후 순서를 변경했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.