5

Видел в некоторых приложениях нечто вроде режима обучения:

  • Основная активность немного затемнена
  • Поверх выскакивают тексты, типа "Нажмите сюда" и выделяют область

Хочется такое-же реализовать.

Не подскажите куда копать?

3
  • Как вариант заюзать библиотеку onBoarding которых вагон. 28 дек 2018 в 7:33
  • @Романыч, согласен полезные библиотеки, но мне немного другое нужно. Не презентацию с описанием, а нечто вроде тура с подсказками - "сначала сделайте фото" - "теперь введите время" и т.д. и все это привязанное к интерфейсу в реальном времени.
    – PawelShi
    28 дек 2018 в 8:48
  • что то типа showcase - таких библиотек тоже достаточно
    – pavlofff
    28 дек 2018 в 13:03

2 ответа 2

4

Когда-то форкал библиотеку, чтоб сделать свое обучение в приложении, основывался на этом https://github.com/sjwall/MaterialTapTargetPrompt очень помогло, возможно и вам подойдет.

Также видел https://github.com/TakuSemba/Spotlight это примерно то что вы хотите

4

Использовал для подобного PopupWindow (подсказка) в связке с таким классом (затенение):

public class OverlayView extends FrameLayout {
    private Bitmap bitmap;
    int paddings, offset;
    RectF rect;

    public OverlayView(Context context) {
        super(context);
        init();
    }

    public OverlayView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public OverlayView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public OverlayView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        rect = new RectF(0, 0, 0, 0);
        //у меня почему-то идет смещение на +24 пикселя, поэтому вымерил и выставляю смещение назад вручную
        offset = (int) (-24 * getContext().getResources().getDisplayMetrics().density); 
        //padding - по вкусу
        paddings = (int) getContext().getResources().getDimension(R.dimen.paddings);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (bitmap == null) {
            createWindowFrame();
        }
        canvas.drawBitmap(bitmap, 0, 0, null);
    }

    protected void createWindowFrame() {
        bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas osCanvas = new Canvas(bitmap);

        RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(getResources().getColor(R.color.dark));
        osCanvas.drawRect(outerRectangle, paint);
        paint.setColor(Color.TRANSPARENT);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        osCanvas.drawRoundRect(rect, paddings, paddings, paint);
    }

    //если надо исключить из тени 1 view
    public void setView(View v) {
        int xStart = getRelativeLeft(v);
        int yStart = getRelativeTop(v) + offset;
        int xEnd = xStart + v.getWidth();
        int yEnd = yStart + v.getHeight();
        rect = new RectF(xStart, yStart, xEnd, yEnd);
        createWindowFrame();
        postInvalidate();
    }

    //если надо исключить из тени 2 view (можно настроить на большее количество)
    public void setTwoView(View v1, View v2) {
        int xStart = getRelativeLeft(v1);
        int yStart = getRelativeTop(v1) + offset;
        int xEnd = xStart + v1.getWidth();
        int yEnd = yStart + v1.getHeight();

        int xStart2 = getRelativeLeft(v2);
        int yStart2 = getRelativeTop(v2) + offset;
        int xEnd2 = xStart2 + v2.getWidth();
        int yEnd2 = yStart2 + v2.getHeight();

        rect = new RectF(Math.min(xStart, xStart2), Math.min(yStart, yStart2), Math.max(xEnd, xEnd2), Math.max(yEnd, yEnd2));
        createWindowFrame();
        postInvalidate();
    }


    @Override
    public boolean isInEditMode() {
        return true;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        bitmap = null;
    }

    private int getRelativeLeft(View myView) {
        if (myView.getParent() == myView.getRootView())
            return myView.getLeft();
        else
            return myView.getLeft() + getRelativeLeft((View) myView.getParent());
    }

    private int getRelativeTop(View myView) {
        if (myView.getParent() == myView.getRootView())
            return myView.getTop();
        else
            return myView.getTop() + getRelativeTop((View) myView.getParent());
    }

    public void reset() {
        rect = new RectF(0, 0, 0, 0);
        createWindowFrame();
        postInvalidate();
    }
}

Вот так сделать PopupWindow:

private void setPopup() {
        popup = new PopupWindow(this);
        View v = LayoutInflater.from(this).inflate(R.layout.popup_window, null);
        hint = v.findViewById(R.id.hint);
        popup.setContentView(v);
        popup.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));    
        v.setOnClickListener(onNextClick);
}

Примерно так обрабатывать клики:

int state = -1; //текущая подсказка

private void onNextClick(View v) {
        state++;
        popup.dismiss();
        View anchor = null;
        switch (state) {
            case 0:
                setPopup();
                screen.setTwoView(views.get(PLAYER_NAME), views.get(PLAYER_HEADER));
                anchor = views.get(PLAYER_NAME);
                break;
            case 1:
                screen.setTwoView(views.get(PLAYER_ARMY), views.get(ARMY_HEADER));
                anchor = views.get(PLAYER_ARMY);
                break;
            ...
       }
       if (anchor != null) popup.showAsDropDown(anchor, 0, 10);

       if (state < hints.length) setHint(hints[state]);
}

В xml OverlayView добавлен последним элементом в глобальный FrameLayout с параметрами match_parent

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.