Как создать наложение справки, как вы видите в нескольких приложениях Android и ICS?

Я хочу создавать наложения справки, подобные тем, которые вы видите, когда ICS загружается в первый раз или в приложениях, таких как ES File Explorer или Apex Launcher (их больше, но я не могу думать о них прямо сейчас). Это просто относительный макет с одним взглядом, сидящим поверх другого? Я не смог найти какой-либо образец кода для выполнения такой вещи. Кто-нибудь знает, как это делается или есть идеи?

ES File ExplorerES File Explorer

Ответ 1

Предположим, что вы обычно вызываете setContentView(R.layout.main), но при первом запуске вы хотите иметь этот оверлей.

Шаг # 1: Создайте FrameLayout в Java-коде и передайте его на setContentView().

Шаг # 2: используйте LayoutInflater для раздувания R.layout.main в FrameLayout.

Шаг №3: Используйте LayoutInflater для раздувания наложения в FrameLayout.

Шаг №4: Когда пользователь нажимает кнопку (или что-то еще), чтобы отклонить оверлей, вызовите removeView(), чтобы удалить наложение из FrameLayout.

Так как наложение - это более поздний дочерний элемент FrameLayout, он будет плавать поверх содержимого R.layout.main.

Ответ 2

"Тренерский знак" - "Оверлей справки" в разговоре UX: -)

coach_mark.xml - это макет метки тренера

coach_mark_master_view - это идентификатор верхнего представления (root) в 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), поэтому его легко скопировать и вставить, чтобы быстро увидеть рабочий пример.

Образец файла 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>

Ответ 3

Вы можете сделать это довольно быстро. Вы добавляете, например, LinearLayout, где вы помещаете картинку с альфой, которая соответствует вашей справочной информации и что вы хотите нарисовать, как оверлей. В вашем xml вашей активности вы помещаете этот макет в RelativeLayout после макета вашей активности с видимостью Gone. Когда вы хотите нарисовать справочную информацию, вы просто можете настроить видимость на видимость.

Надеюсь, я понимаю, если у вас возникнут какие-либо вопросы, я буду отвечать на них.

Ответ 4

См. мой другой ответ, как программно отображать оверлейный макет поверх текущей активности. Макет layout.xml не должен знать ничего о скине наложения. Вы можете наложить полупрозрачный оверлей, накрыть только часть экрана, одно или несколько текстовых изображений и кнопки на нем... Как наложить кнопку программно?

  • создать res/layout/paused.xml шаблон RelativeLayout или использовать любой макет.
  • создать функцию для отображения наложенного скина
  • ключ - получить дескриптор layout.xml, использовать класс LayoutInflater для синтаксического анализа xml для просмотра объекта, добавить оверлейный вид к текущей структуре компоновки.
  • В моем примере используется таймер для уничтожения объекта overlay, полностью удалив его из структуры представления. Это, вероятно, то, что вы хотите, и избавиться от него без следа.

Моя цель заключалась в том, что основным видам деятельности не известно ни оверлейного скина, ни оверлейных наложений, ни разных оверлеев, которые все еще могут использовать текстовые файлы overlay1.xml в качестве шаблона, а контент должен программно обновляться. Я делаю в значительной степени то, что CommonsWare сообщило нам, что мое сообщение показывает фактический программный код для начала.

Отказ от ответственности: OPs "Спасибо за ваш вклад. Вот как я представлял, как это делается. Я должен отдать должное ответу ниже", комментарий не означает мой ответ, но ответ CommonsWare. Stackoverflow изменил порядок размещения.