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

92

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

ES File Explorer ES File Explorer

Ваш Ответ

4   ответа
80

Марка тренера ; is ; Справка наложения ; в 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 (к этому превосходному решению, предоставленному Одедом Брейнером), чтобы его было легко скопировать и усилить. Вставьте, чтобы увидеть рабочий пример быстро.

Пример файла coach_mark.xml здесь, измените - & gt; 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>
Я знаю, что это по крайней мере несколько месяцев, но был ли когда-нибудь выяснен этот полноэкранный вопрос?
@ocramot: приведенный выше пример должен быть полноэкранным из-за match_parent и Window.FEATURE_NO_TITLE
Тогда должна быть какая-то другая проблема, потому что я вижу это по-другому.
Тем, кто не знает, как установить тему диалога, просто создайте экземпляр диалога следующим образом:new Dialog(getContext(), R.style.WalkthroughTheme);
Здравствуйте, как вы можете растянуть этот диалог, чтобы соответствовать экрану? Из документации,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" (то есть фактические значения экрана, с которым я тестирую), он работает правильно. (конечно, это нереальное решение)
83

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

Шаг № 1: СоздатьFrameLayout в коде Java и передать этоsetContentView().

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

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

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

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

@ ssuperz28: Да, кроме рисованных наконечников стрел и пузырей. Вы сами для них. :-)
Есть ли способ сделать это, но сделать это относительно позиции детей, которые находятся ниже от FrameLayout?
Существует также ShowcaseView, который предлагает все это в виде библиотеки:androidviews.net/2012/11/showcase-view
Я не знаю, удалось ли вам сделать то, что вы хотели, но здесь есть другая альтернатива.stackoverflow.com/questions/8841240/…  Если вы поддерживаете решение, данное CommonsWare, единственное, что приходит мне в голову, чтобы установить стрелки, это определить FrameLayout инструкций с помощью resourceImage или backgroundImage уже с изображением со стрелками (и прозрачностью).
@ user3364963: динамически корректировать положение вещей. Мой ответ был несколько упрощен. Я предполагаю, что они определяют положение элементов, которые должны быть выделены, и корректируют координаты «отметок тренера». ОбычайViewGroup для «оценки тренера»; слой может справиться с этим, и есть библиотеки (например,ShowcaseView) которые предлагают консервированные реализации этого шаблона.
4

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

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

Спасибо за ваш вклад. Вот как я это представлял. Я должен отдать должное приведенному ниже ответу, поскольку именно так я собираюсь его построить. Это кажется более управляемым, и мне не нужно менять основной макет деятельности. ssuperz28
1

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

create res/layout/paused.xml RelativeLayout template or use any layout toplevel create a function to show overlay skin key is to get handle to layout.xml, use LayoutInflater class to parse xml to view object, add overlay view to current layout structure My example uses a timer to destroy overlay object by completely removing it from the view structure. This is probably what you want as well to get rid of it without a trace.

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

disclaimer: OPs "Thanks for your input. This is how I pictured it being done. I have to give credit to the answer below" comment does not mean my answer but CommonsWare answer. Stackoverflow have changed post orderings.

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