Организация справки по приложению затемнением неинтересующих областей

@monolit · Регистрация: 24.03.2011

Студворк — интернет-сервис помощи студентам

Приветствую.

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

И вопрос в том, как вообще организовать это затемнение части экрана? Может, кто-то сталкивался с подобной задачей? Или там тупо изображения выводятся поверх всего, которое повторяем содержимое экрана?

Типа такого (чтоб было понятно, о чем вообще речь):

@OlegJV · 27.09.2016, 12:19

Можно попробовать ColorFilter

@monolit · 27.09.2016, 14:44 **[ТС]**

Он и к различным View'ам применим? Даже если так, все равно получается много возни((
Тут бы повесить поверх всего какой-нибудь черно-прозрачный элемент с дыркой в нужном месте (в области конкретного элемента)...

PS
Хотя, наверное, попробовать стоит. Хоть что-то)

Pablito · 27.09.2016, 15:18

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

Кликните здесь для просмотра всего текста

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
 
import static android.graphics.PorterDuff.Mode.SRC_OUT;
 
public class ShowCaseView extends FrameLayout {
 
    private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private View accentView;
    private float cx;
    private float cy;
    private float r;
 
    public ShowCaseView(Context context) {
        super(context);
        init(context);
    }
 
    public ShowCaseView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
 
    private void init(Context context) {
        setWillNotDraw(false);
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        paint.setColor(Color.TRANSPARENT);
        paint.setXfermode(new PorterDuffXfermode(SRC_OUT));
        inflate(context, R.layout.show_case_layout, this);
    }
 
    @Override
    public boolean dispatchTouchEvent(MotionEvent e) {
        if (e.getAction() == MotionEvent.ACTION_DOWN) {
            accentView = null;
            ((ViewGroup) getParent()).removeView(this);
        }
        return true;
    }
 
    public void setAccentView(View accentView) {
        this.accentView = accentView;
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(0xE51249D9);
        canvas.drawCircle(cx, cy, r, paint);
    }
 
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        cx = accentView.getX() + accentView.getWidth() / 2;
        cy = accentView.getY() + accentView.getHeight() / 2;
        r = Math.max(accentView.getWidth(), accentView.getHeight()) / 2 * 1.3f;
        final View okBtn = findViewById(R.id.btn);
        FrameLayout.LayoutParams lp = (LayoutParams) okBtn.getLayoutParams();
        if (cy < h / 2) lp.gravity = Gravity.BOTTOM;
        else lp.gravity = Gravity.TOP;
        if (cx < w / 2) lp.gravity |= Gravity.END;
        else lp.gravity |= Gravity.START;
        okBtn.setLayoutParams(lp);
        requestLayout();
    }
}

2. создаем лаяут для нашей вьюшки show_case_layout.xml

Кликните здесь для просмотра всего текста

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true">
 
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:text="ОК, я понял" />
 
</FrameLayout>

3. разметка основной активити для примера

Кликните здесь для просмотра всего текста

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"
        app:title="Title" />
 
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:layout_margin="16dp"
        android:text="BUTTON" />
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_map"
        app:fabSize="normal" />
 
</RelativeLayout>

4. код активити для примера

Не по теме:

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //
        View v = findViewById(R.id.btn); // вьюшка, на которой надо сделать акцент
        showCaseView(v);
    }
 
    private void showCaseView(final View accentView) {
        final ShowCaseView showCaseView = new ShowCaseView(MainActivity.this);
        showCaseView.setAccentView(accentView);
        final ViewGroup rootView = (ViewGroup) findViewById(android.R.id.content);
        rootView.addView(showCaseView);
    }
}

5. PROFIT

Организация справки по приложению затемнением неинтересующих областей

@monolit · 27.09.2016, 22:48 **[ТС]**

А ты крут!
Плюсов этому господину!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@monolit 188 / 187 / 46 Регистрация: 24.03.2011 Сообщений: 670

	Организация справки по приложению затемнением неинтересующих областей 27.09.2016, 12:04. Показов 1270. Ответов 4 Метки нет (Все метки) Приветствую. Встал вопрос об организации справочной системы по использованию приложения. И захотелось сделать это следующим образом. Грубо говоря, при нажатии пользователя на соотв. кнопку с вызовом справки затемняется вся область приложения, а затем, после каждого клика, подсвечивается конкретный элемент и приводится небольшое текстовое описание этого элемента. И вопрос в том, как вообще организовать это затемнение части экрана? Может, кто-то сталкивался с подобной задачей? Или там тупо изображения выводятся поверх всего, которое повторяем содержимое экрана? Типа такого (чтоб было понятно, о чем вообще речь): Миниатюры 0

@OlegJV 104 / 103 / 29 Регистрация: 13.03.2016 Сообщений: 474
	27.09.2016, 12:19
	Можно попробовать ColorFilter 1

@monolit 188 / 187 / 46 Регистрация: 24.03.2011 Сообщений: 670
	27.09.2016, 14:44 [ТС]
	Он и к различным View'ам применим? Даже если так, все равно получается много возни(( Тут бы повесить поверх всего какой-нибудь черно-прозрачный элемент с дыркой в нужном месте (в области конкретного элемента)... PS Хотя, наверное, попробовать стоит. Хоть что-то) 0

@monolit 188 / 187 / 46 Регистрация: 24.03.2011 Сообщений: 670
	27.09.2016, 22:48 [ТС]
	А ты крут! Плюсов этому господину! 0

Организация справки по приложению затемнением неинтересующих областей

Решение