Как создать полупрозрачную страницу инструкций в Android? - программирование

Как создать полупрозрачную страницу инструкций в Android?

Я новичок в Android и стараюсь работать над этой проблемой за последние 2 дня, но могу найти решение. Любая помощь будет высоко оценена. Как создать полупрозрачную страницу для инструкции, используемую счетчиком калорий приложений в Android Market?

Instruction page in Android

4b9b3361

Ответ 1

Создайте новое действие и установите представление верхнего уровня на полупрозрачный фон:

android:background="#c0000000"

EDIT: вам также необходимо объявить активность прозрачным фоном. Установка этой темы для активности в манифесте будет работать:

android:theme="@android:style/Theme.Translucent"

Ответ 2

Я только что реализовал Ted-ответ в одном из моих проектов. Большой! Чрезвычайно прост в применении и отличный результат. Большое спасибо за этого Теда.

Но поскольку Qaru для приема и совместного использования я хотел бы поделиться своей реализацией настраиваемого представления, которое создает стрелки в форме "иглы", которые я использовал с подходом Ted, чтобы закончить исходный ответ. Вот код:

package com.yourpackage;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import de.nantoka.miep.R;

public class CoachmarkArrow extends View {

    private static final float CIRCLE_RADIUS = 1.5f;
    private static final int TOPLEFT = 0;
    private static final int TOPRIGHT = 1;
    private static final int BOTTOMLEFT = 2;
    private static final int BOTTOMRIGHT = 3;

    Paint paint;
    int from, to;

    PointF padding = new PointF();
    PointF fromPoint = new PointF();
    PointF toPoint = new PointF();

    public CoachmarkArrow (Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CoachmarkArrow, 0, 0);

        getPaint(a);
        getFromTo(a);

        a.recycle();
    }

    private void getFromTo(TypedArray a) {

        from = a.getInt(R.styleable.CoachmarkArrow_from, BOTTOMLEFT);
        to = a.getInt(R.styleable.CoachmarkArrow_to, TOPLEFT);
    }

    private void getPaint(TypedArray a) {
        paint = new Paint();

        paint.setColor(a.getColor(R.styleable.CoachmarkArrow_color, Color.WHITE));
        paint.setStrokeWidth(a.getDimensionPixelSize(R.styleable.CoachmarkArrow_size, 0));

        paint.setStrokeCap(Paint.Cap.BUTT);
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw (Canvas canvas){
        calculatePadding(canvas);
        calculateLinePoints();

        drawLine(canvas, fromPoint, toPoint);
        drawCircle(canvas, fromPoint);
    }

    private void calculateLinePoints() {
        fromPoint = getPoint(from);
        toPoint = getPoint(to);
    }

    private void calculatePadding(Canvas canvas) {

        padding.x = CIRCLE_RADIUS * paint.getStrokeWidth() / canvas.getWidth();
        padding.y = CIRCLE_RADIUS * paint.getStrokeWidth() / canvas.getHeight();
    }

    private PointF getPoint(int position) {
        PointF point = new PointF();

        if (position == TOPRIGHT || position == BOTTOMRIGHT){
            point.x = 1.0f - padding.x;
        }
        else {
            point.x = padding.x;
        }

        if (position == BOTTOMLEFT || position == BOTTOMRIGHT){
            point.y = 1.0f - padding.y;
        }
        else {
            point.y = padding.y;
        }       

        return point;
    }

    private void drawCircle(Canvas canvas, PointF fromPoint) {

        canvas.drawCircle(
                canvas.getWidth() * fromPoint.x, 
                canvas.getHeight() * fromPoint.y, 
                CIRCLE_RADIUS * paint.getStrokeWidth(), 
                paint
                );
    }

    private void drawLine(Canvas canvas, PointF fromPoint, PointF toPoint) {
        canvas.drawLine(
                canvas.getWidth() * fromPoint.x, 
                canvas.getHeight() * fromPoint.y, 
                canvas.getWidth() * toPoint.x, 
                canvas.getHeight() * toPoint.y, 
                paint
                );
    }
}

Добавьте этот класс в свой проект (любое имя пакета прекрасно) и создайте файл атрибута под res/values ​​для параметров XML:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CoachmarkArrow">
        <attr name="size" format="dimension" />
        <attr name="color" format="color" />
        <attr name="from" format="enum">
            <enum name="topleft" value="0"/>
            <enum name="topright" value="1"/>
            <enum name="bottomleft" value="2"/>
            <enum name="bottomright" value="3"/>
        </attr>
        <attr name="to" format="enum">
            <enum name="topleft" value="0"/>
            <enum name="topright" value="1"/>
            <enum name="bottomleft" value="2"/>
            <enum name="bottomright" value="3"/>
        </attr>
    </declare-styleable>
</resources>

Теперь вы можете создать "иглы" в XML-макете своей активности в карете, как и любое другое представление, например

<com.yourpackage.CoachmarkArrow
    xmlns:coachmark="http://schemas.android.com/apk/res/com.yourproject"    
    android:layout_height="100dp"
    android:layout_width="match_parent"
    coachmark:size="3dip"
    coachmark:color="@android:color/white"
    coachmark:from="bottomright"
    coachmark:to="topleft"
/>  

создает "иглу" с головой в правом нижнем углу и кончиком в верхнем левом углу прямоугольника размером 100 дп и шириной, как и содержащая родительская ViewGroup.

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

Надеюсь, это поможет кому-то!

Ответ 3

Я попытался сделать что-то подобное. Я сделал диалог сообщений с использованием Activity. Для этой деятельности я написал в манифесте:

<activity android:name=".MessDial"
 android:label="@string/lblDialog"
 android:theme="@style/Theme.Transparent">
</activity>

В теле этой деятельности у меня нет ничего особенного для прозрачности.

Надеюсь, это поможет вам.

Ответ 4

Вы можете попробовать этот пример для показа экрана первого тайм-кода без каких-либо других библиотек

если вы хотите показать инструкцию только в первый раз, вы можете добавить некоторые флаги в хранилище предпочтений. Пример можно найти здесь

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    SharedPreferences pref= PreferenceManager.getDefaultSharedPreferences(getBaseContext());
    boolean check = pref.getBoolean("firstime", true);
    if(check==true){
        Intent i = new Intent(MainActivity.this, Tutorial_screen.class);//starting activity for the Frist time
        startActivity(i);
    }