Вопрос по showcaseview, android-viewpager, transparent, android, demo – Как создать прозрачный демонстрационный экран для приложения Android?

102

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

Galaxy Nexus

Example screenshot from Pulse News on Galaxy Nexus

Nexus One

enter image description here

Вместо «нажмите, чтобы уволить»; Я хочу, чтобы пользователь мог пролистывать пару таких прозрачных демонстрационных страниц.

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

Проблема: «основная деятельность» не мог быть замечен на заднем плане - вместо этого это было просто черным. Я попробовал решенияВот, но это не решило проблему.

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

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

Спасибо!

Вот мой код для первой попытки:

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, только что добавил это. Gautam
Не глядя на ваш код, трудно что-либо предложить. Если бы вы могли поставить код активности, это могло бы помочь. Sayyam
Это хороший вопрос. con_9

Ваш Ответ

8   ответов
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>
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();

}
именно то, что я искал, простой и понятный, легко вызываемый метод без контроля или суммирования действий. Спасибо
0

как они это делают. Я не знаю там реализации.

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

1

Перейдите в xml-файл макета вашего занятия (Activity_tutorial). Под родительским макетом добавьте & quot; android: background = # 000 & quot; и «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 = & quot; @android: style / Theme.Translucent.NoTitleBar & quot; & gt;

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

Вот и все, теперь запустите это действие поверх любого другого действия, и вы можете получить желаемые результаты. Настройте, добавьте текст, изображения и другие вещи, чтобы получить желаемый экран учебника. Уверен, что вы можете заставить viewpager работать с этой техникой.

64

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);
Устаревший ... Разработчик подразумевал, что дизайн базового API был недостаточно хорош (что было частично верно).
Попробуйте использовать это:github.com/worker8/TourGuide
Спасибо, это именно то, что я искал.
Потрясающие! Знаете ли вы что-нибудь подобное для iOS?
Я попробовал это и обнаружил, что нет метки для изменения изображений.
11

xtView. Текст на снимке экрана - это все TextView с собственным шрифтом.

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

Android: тема = & Quot; @ стиль / Theme.Transparent & Quot; & GT;

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

Android: фон = & Quot; # aa000000 & Quot;

В ваш файл 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

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все, что вы хотите в этом втором макете.

Well 'DemoActivity' была моя попытка создать прозрачную деятельность, которая бы делала то же самое. & APOS; MainActivity & APOS; это активность, которую я хочу под фоном. Поэтому я обернул макет для «MainActivity», то есть «main_activity.xml». с «RelativeLayout»; как вы упомянули, а также вставили прозрачный «LinearLayout». Проблема в том, что весь контент в «main_activity.xml» показано ниже «ActionBar» и любой из его вкладок навигации. Gautam
Спасибо за ваш ответ! Я попробовал это, и это, кажется, работает. Однако есть одна проблема - содержимое наложенного макета не распространяется на вкладки ActionBar или ActionBar, которые есть в моей деятельности. Gautam
Вы добавилиRelativeLayout кdemo_activity.xml файл? И являетсяDemoActivity ваш главный (первый)Activity?
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%. Так что выбирайте что-то среднее.

Спасибо за ответ! Это в значительной степени то, что я в конечном итоге делал, после многихtrial and error, Мне по-прежнему любопытно, как демонстрационный экран Pulse может «изменять положение». наложенный контент в нужных местах, даже на экранах разных размеров - смотрите обновленные скриншоты. Есть идеи? Gautam
Или использоватьView.getLocationOnScreen(int[] location) или жеView.getLocationInWindow(int[] location), Я не уверен, какой из них лучше.
В первом упражнении найдите вид, на который вы хотите указать (findViewById). Затем получите его положение относительно корневого макета, используяthis method, Отправить позицию для наложения активности в намерении. Сделайте правильное выравнивание.
@ Гаутам: «Есть идеи?» - для Pulse это вопрос размещения одного изображения в верхнем левом углу, другого изображения по центру и третьего изображения в правом нижнем углу. Десяток или около того строк XML, основанных наRelativeLayoutХватит.
Это сработало для меня, но у меня были проблемы в моей деятельности, делающей расширенную активность. Поэтому, чтобы использовать AppCompatActivity, я определил стиль следующим образом: & lt; style name = & quot; Transparent & quot; Родитель = & Quot; Theme.AppCompat & Quot; & GT; & lt; item name = "android: windowContentOverlay" & gt; @ null & lt; / item & gt; & lt; item name = "android: windowIsTranslucent" & gt; true & lt; / item & gt; & lt; item name = "android: windowBackground" & gt; @android: color / transparent & lt; / item & gt; & lt; item name = "android: windowNoTitle" & gt; true & lt; / item & gt; & lt; item name = "android: backgroundDimEnabled" & gt; false & lt; / item & gt; & Lt; / тип & GT;

Похожие вопросы