Как создать прозрачный демонстрационный экран для Android-приложения?

Я пытаюсь создать полупрозрачный демонстрационный экран, который запускается только тогда, когда пользователь сначала устанавливает мое приложение. Вот пример из приложения Pulse News:

Galaxy Nexus

Example screenshot from Pulse News on Galaxy Nexus

Nexus One

enter image description here

Вместо функции "отбрасывать-отменить" я хочу, чтобы пользователь мог прокручивать пару таких прозрачных демонстрационных страниц.

Для моей первой попытки я изменил образец из библиотеки ViewPagerIndicator. Я использовал полупрозрачные PNG в ImageViews внутри каждого из фрагментов пейджера представления. Затем я запустил это как "демо-активность" в методе onCreate моего "основного действия".

Проблема: "Основное действие" не могло быть замечено в фоновом режиме - вместо этого оно было просто черным. Я пробовал решения здесь, но это не помогло решить проблему.

Есть ли лучший подход к созданию чего-то подобного, или я на правильном пути?

У меня также был другой связанный вопрос, который зависит от того, как это реализовано. Я пытаюсь наложить текст и стрелки таким образом, чтобы они указывали на определенные компоненты пользовательского интерфейса в фоновом режиме. Используя PNG, который имеет текст и стрелки, вероятно, он не будет масштабироваться должным образом на разных устройствах. I.e., стрелки могут не обязательно указывать на правильный компонент пользовательского интерфейса в фоновом режиме. Есть ли способ решить эту проблему?

Спасибо!

Здесь мой код для первой попытки:

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);
    }
}

Ответ 1

Поместите свою демоверсию в другую деятельность и дайте ей следующую тему.

<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% непрозрачно. Поэтому выберите что-то среднее между ними.

Ответ 2

Вы посмотрели на 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);

Ответ 3

Pulse использует RelativeLayout с четырьмя ImageView и четырьмя TextView. Текст на снимке экрана - это все TextView со своим собственным шрифтом.

В вашем манифесте добавьте следующее к своей деятельности:

Android: тема = "@стиль/Theme.Transparent" >

В ваш внешний RelativeLayout добавьте:

Android: фон = "# 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/

Макет из средства просмотра иерархии выглядит следующим образом (красным полем является контейнер RelativeLayout):

enter image description here

Ответ 4

Для этого вам нужно создать макет справки в нижней части основного макета  например: (структура)

<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>

Ответ 5

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();

}

Ответ 6

Оберните свой основной макет в 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, что бы вы ни пожелали в этом втором макете.

Ответ 7

Вы можете просто проверить код запуска Android, как они это делают. Я не знаю, как это реализовано.

Если бы это был я, я бы (если бы просто простой накладной), поэтому вы не закручиваете свой макет для своего приложения, просто создайте свой оверлейный макет и приложите его к макету урского приложения, добавив его непосредственно с вашими действиями WindowManager, Может быть так же просто, как добавить ImageView в WindowManager, прослушать штрихи на ImageView или у вас есть тайм-аут, чтобы удалить ImageView из вашего Window.

Ответ 8

Сделайте новую работу (скажем, учебник).

Перейдите в свой 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>