Android 앱용 투명 데모 화면을 어떻게 만드나요?


105

사용자가 내 애플리케이션을 처음 설치할 때만 실행되는 반투명 데모 화면을 만들려고합니다. Pulse News 앱의 예는 다음과 같습니다.

Galaxy Nexus

Galaxy Nexus의 Pulse News 스크린 샷 예시

Nexus One

여기에 이미지 설명 입력

'탭하여 닫기'기능 대신 사용자가 투명한 데모 페이지 몇 개를 스 와이프 할 수 있기를 바랍니다.

첫 번째 시도로 ViewPagerIndicator 라이브러리 의 샘플을 수정했습니다 . 각 뷰 페이저의 조각 내 ImageViews에서 반투명 PNG를 사용했습니다. 그런 다음 내 '주요 활동'의 onCreate 메소드에서 '데모 활동'으로 이것을 시작했습니다.

문제 : '주요 활동'은 백그라운드에서 볼 수 없습니다. 대신 검은 색이었습니다. 여기 에서 해결책을 시도했지만 문제가 해결되지 않았습니다.

이와 같은 것을 만드는 데 더 나은 접근 방식이 있습니까? 아니면 올바른 길을 가고 있습니까?

또한 이것이 어떻게 구현되는지에 따라 다른 관련 질문이 있습니다. 배경의 특정 UI 구성 요소를 가리 키도록 텍스트와 화살표를 오버레이하려고합니다. 텍스트와 화살표가있는 PNG를 사용하면 다른 장치에서 제대로 확장되지 않을 수 있습니다. 즉, 화살표가 반드시 백그라운드에서 올바른 UI 구성 요소를 가리킬 필요는 없습니다. 이 문제도 해결할 수있는 방법이 있습니까?

감사!

첫 번째 시도에 대한 내 코드는 다음과 같습니다.

DemoActivity.java

public class DemoActivity extends FragmentActivity {
    DemoFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo_activity);

        mAdapter = new DemoFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
        //mPager.setAlpha(0);

        UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(mPager);
        indicator.setFades(false);
        mIndicator = indicator;
    }

}

DemoFragmentAdapter.java

class DemoFragmentAdapter extends FragmentPagerAdapter {
    protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4};

    private int mCount = CONTENT.length;

    public DemoFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return DemoFragment.newInstance(CONTENT[position % CONTENT.length]);
    }

    @Override
    public int getCount() {
        return mCount;
    }

    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    } }

DemoFragment.java

public final class DemoFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";

    public static DemoFragment newInstance(int content) {
        DemoFragment fragment = new DemoFragment();
        fragment.mContent = content;
        return fragment;
    }

    private int mContent;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getInt(KEY_CONTENT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        ImageView image = new ImageView(getActivity());
        image.setBackgroundResource(mContent);

        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.addView(image);

        return layout;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(KEY_CONTENT, mContent);
    }
}

코드를 보지 않고는 제안하기가 어렵습니다. 활동 코드를 입력 할 수 있다면 도움이 될 것입니다.
Sayyam

11
그건 좋은 질문이야.
con_9 aug

답변:


79

데모 정보를 다른 활동에 넣고 다음 테마를 지정하십시오.

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

ActionBarSherlock을 사용 parent하는 경우 @style/Theme.Sherlock.

이것은 당신에게 투명한 활동을 제공하므로 그 아래에서 활동을 볼 수 있습니다.

이제 반투명 배경도 원한다고 생각합니다.

투명 활동의 xml 레이아웃에 다음을 추가하십시오.

android:background="#aa000000" 

마지막 6 자리는 색상을 정의합니다. 000000은 검정색입니다.

처음 2 개는 불투명도를 정의합니다. 00은 100 % 투명하고 ff는 100 % 불투명합니다. 그러니 그 사이에서 무언가를 선택하십시오.


1
답변 해주셔서 감사합니다! 이것은 많은 시행 착오를 거쳐 결국 내가 한 일 입니다. Pulse 데모 화면이 다양한 화면 크기에서도 오버레이 된 콘텐츠를 올바른 위치에 '재배치'할 수 있는지 궁금합니다. 업데이트 된 스크린 샷을 참조하세요. 어떤 아이디어?
Gautam

2
첫 번째 활동에서 가리 키려는보기 ( findViewById) 를 찾으십시오 . 그런 다음 이 메서드를 사용하여 루트 레이아웃에 상대적인 위치를 가져옵니다 . 인 텐트의 오버레이 활동에 위치를 보냅니다. 적절한 정렬을하십시오.
Benito Bertoli

2
또는 View.getLocationOnScreen(int[] location)또는 View.getLocationInWindow(int[] location). 어느 것이 더 나은지 잘 모르겠습니다.
Benito Bertoli

@Gautam : "어떤 아이디어라도?" -Pulse의 경우 한 이미지를 왼쪽 상단 모서리에, 다른 이미지를 중앙에, 세 번째 이미지를 오른쪽 아래 모서리에 배치하는 문제입니다. 를 기반으로하는 XML 라인은 12 개 정도면 RelativeLayout충분합니다.
CommonsWare

1
이것은 나를 위해 일했지만 활동을 확장하는 데 문제가있었습니다. 따라서 AppCompatActivity를 사용하기 위해 다음과 같이 스타일을 정의했습니다. <style name = "Transparent"parent = "Theme.AppCompat"> <item name = "android : windowContentOverlay"> @ null </ item> <item name = "android : windowIsTranslucent "> true </ item> <item name ="android : windowBackground "> @ android : color / transparent </ item> <item name ="android : windowNoTitle "> true </ item> <item name ="android : backgroundDimEnabled "> false </ item> </ style>
Jose Q

65

ShowcaseView를 보셨습니까? https://github.com/Espiandev/ShowcaseView .

이것을 사용하여 :

View showcasedView = findViewById(R.id.view_to_showcase);
ViewTarget target = new ViewTarget(showcasedView);
ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details);

1
고마워요, 바로 제가 찾던 것입니다.
Snicolas

대박! iOS와 비슷한 것을 알고 있습니까?
KVISH

Deprecated yet ... 개발자는 기본 API의 디자인이 충분하지 않음을 의미했습니다 (부분적으로 사실임).
Laurent Meyer

나는 이것을 시도했고 이미지를 변경하는 태그가 없다는 것을 알았습니다.
Anshul Tyagi

11

Pulse는 4 개의 ImageView와 4 개의 TextView와 함께 RelativeLayout을 사용하고 있습니다. 스크린 샷의 텍스트는 모두 고유 한 사용자 지정 글꼴이있는 TextView입니다.

Manifest에서 활동에 다음을 추가하십시오.

android : theme = "@ style / Theme.Transparent">

외부 RelativeLayout에 다음을 추가하십시오.

android : background = "# aa000000"

styles.xml 파일로 :

<style name="Theme.Transparent" parent="android:Theme">
    <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:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>    

사용자 정의 글꼴을 프로그래밍하는 방법의 예는 다음에서 찾을 수 있습니다.

https://github.com/commonsguy/cw-android/tree/master/Fonts/FontSampler/

Hierarchy Viewer의 레이아웃은 다음과 같습니다 (빨간색 상자는 RelativeLayout 컨테이너입니다).

여기에 이미지 설명 입력


6
setContentView(R.layout.sample_main);
showOverLay();

private void showOverLay(){

    final Dialog dialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);

    dialog.setContentView(R.layout.transparent);

    RelativeLayout layout = (RelativeLayout) dialog.findViewById(R.id.transparent);

    layout.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View arg0) {

            dialog.dismiss();

        }

    });

    dialog.show();

}

정확히 내가 찾고있는 간단하고 간단하며 활동을 제어하거나 쌓지 않고 쉽게 메서드를 호출합니다. 감사
Abhishek Garg를

5

이를 위해 기본 레이아웃의 맨 아래에 도움말 레이아웃을 만들어야합니다. 예 :( 구조)

<Parent layout>

<Layout 1>(Linear,Relative,....)
  Main layout
  your view...
</Layout 1>

<Layout help>
  set #70000000 as background of this layout 
  #70(transparent range can change) 000000(black)
  and height and width as fillparent
</Layout help>

</Parent layout>

2

기본 레이아웃을으로 래핑 RelativeLayout한 다음 다음과 같이 두 번째 레이아웃을 추가합니다.

<RelativeLayout
    .... >

    <LinearLayout
        .... >

        <!-- Contents of your main layout -->

    </LinearLayout>

    <LinearLayout
        ....
        android:background="#44000000" > <!-- This is alpha 68/255, black -->

        <!-- Contents of your overlay layout -->

    </LinearLayout>

</RelativeLayout>

오버레이 레이아웃이 XML 파일의 기본 레이아웃 아래에 있다고 생각합니다 (메모리가 제공되는 경우). 그런 다음 ViewFlipper이 두 번째 레이아웃 내에서 원하는대로 자신 만의 레이아웃을 만들 수 있습니다 .


1
응답 해 주셔서 감사합니다! 나는 이것을 시도하고 작동하는 것 같습니다. 그러나 한 가지 문제가 있습니다. 오버레이 레이아웃의 콘텐츠가 내 활동에있는 ActionBar 또는 ActionBar 탭을 덮지 않습니다.
Gautam

당신은 추가 RelativeLayout받는 demo_activity.xml파일? 그리고 DemoActivity당신의 메인 (첫 번째) Activity입니까?
에릭

'DemoActivity'는 똑같은 일을하는 투명한 활동을 만들려는 나의 시도였습니다. 'MainActivity'는 백그라운드에서 원하는 활동입니다. 그래서 'MainActivity', 즉 'main_activity.xml'의 레이아웃을 언급 한대로 'RelativeLayout'으로 래핑하고 투명한 'LinearLayout'도 삽입했습니다. 문제는 'main_activity.xml'의 모든 콘텐츠가 'ActionBar'및 해당 탐색 탭 아래에 표시된다는 것입니다.
Gautam

1

새로운 활동을 만드십시오 (튜토리얼).

활동의 레이아웃 xml 파일 (activity_tutorial)로 이동하십시오. 상위 레이아웃 아래에 "android : background = # 000"및 "android : alpha ="0.5 "를 추가합니다.

<RelativeLayout 
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
                
                
    tools:context=".Tutorial_Activity" 
    android:background="#000"
    android:alpha="0.5">
  ..................................................
  ....................................................
  .............................................
  ...............................................
  
  </RelativeLayout>

이제 애플리케이션 매니페스트 파일로 이동하고 튜토리얼 활동 아래에 android : theme = "@ android : style / Theme.Translucent.NoTitleBar"> 속성을 ​​추가합니다.

<application>
 .........................................
..........................................
....................................
..........................................

<activity
            android:name="com.aird.airdictionary.Tutorial_Activity"
            android:label="@string/title_activity_tutorial"
            
          android:theme="@android:style/Theme.Translucent.NoTitleBar">
  
        </activity>
    </application>

</manifest>

이제 다른 모든 활동 위에이 활동을 실행하면 원하는 결과를 얻을 수 있습니다. 원하는 튜토리얼 화면을 얻기 위해 텍스트, 이미지보기 및 기타 항목을 사용자 정의하고 추가하십시오. 이 기술로 뷰 페이저가 작동하도록 만들 수 있습니다.


0

Android 런처 코드를 확인하면됩니다. 나는 거기 구현을 모른다.

나라면 (단순한 오버레이라면) 응용 프로그램의 레이아웃을 망가 뜨리지 않고 오버레이 레이아웃을 만들고 활동에 직접 추가하여 응용 프로그램 레이아웃 위에 첨부 할 것 WindowManager입니다. 추가로 간단하게 될 수 있을까 ImageView받는 것은 WindowManager, 온 감각을 수신 ImageView하거나 제거 할 수있는 시간 제한이 ImageView당신으로부터를 Window.

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