Как использовать LayoutInflater / ViewStub для наложения

Question

Поскольку я не очень уверен в программно меняющихся представлениях, у меня возникла следующая проблема:

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

Я не хочу использовать AlertDialog, а лучше не использовать мастера. Итак, я решил использовать подход, аналогичный Go SMS, и создать оверлей при первом запуске. Макет, который я создал, выглядит следующим образом:

Нормальное меню:

Первый запуск:

Итак, вот мои проблемы:

1. Как я уже сказал, я не хочу использовать скриншот с наложением при первом запуске, так как это заняло бы слишком много места и не зависело бы от языка и экрана.
2. У меня был бы круг в виде png, но я не знаю, как именно наложить его на изображение
3. Та же проблема с текстом
4. И, наконец, я хочу нанести полупрозрачный белый цвет поверх приложения. Это не обязательно нужно отверстие для иконы, хотя это было бы хорошо.

Если вам нужен источник макета, вы можете получить его по адресу pastebin

Итак, мне просто нужно начать с этого, если лучше использовать LayoutInflater или ViewStub и как это реализовать, поскольку у меня нет абсолютно никакого опыта с этим ...

Спасибо!

/ edit: Я загрузил новый, более упорядоченный макет.

Answer 1

Я столкнулся с аналогичной проблемой, я хотел, чтобы клиент прошел обход приложения, где весь экран должен был стать белее (как они сказали: «прозрачный»), за исключением кнопки, которая объясняется наложением речевого пузыря.
К счастью для вас, ваш макет не так сложен, как тот, с которым мне приходилось работать :)

Теперь вы можете получить эффект прозрачности двумя способами: либо иметь белый фон, либо вызывать все методы setAlpha () представлений, либо создать полупрозрачный белый наложение.
Если вы используете оверлей, вам нужно будет найти способ отображения непрозрачных кнопок через оверлей. Это может быть немного сложнее. Если вы выберете первый вариант, вы можете просто установить Alpha (1) на непрозрачном виде, чтобы он появился.

Метод setAlpha () доступен только в API версии 11+, поэтому, если вы ориентируетесь на более раннюю версию, вам, возможно, придется сделать это несколько более сложным способом.
Пример настройки альфа на предварительных сотах:

Макет для ваших кнопок (сделайте их так, как вы хотите, просто сделайте их похожими, чтобы вы могли просматривать их):

<LinearLayout 
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView 
        android:tag="image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tile"/>
    <TextView 
        android:tag="text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FF000000"
        android:text="button1"/>
</LinearLayout>

В вашей программе, когда вы хотите сделать кнопки прозрачными:

LinearLayout l = (LinearLayout) findViewById(R.id.button1);
((ImageView)l.findViewWithTag("image")).setAlpha(0x7F);
((TextView)l.findViewWithTag("text")).setTextColor(0x7F000000);

Когда вы определились с тем, как вы хотите создать эффект прозрачности, вам нужно будет решить, как отобразить оверлейный текст / пузырь. Скорее всего, вы захотите поместить его в отдельный слой поверх всего макета, чтобы быть уверенным, что это не повлияет на ваш новый вид.
Одним из способов достижения этого является изменение корневого элемента макета на FrameLayout, а затем создание / отображение в нем. например:

<FrameLayout background="#FFFF"> <!-- white background, just in case -->
    <LinearLayout>
        <!-- the rest of your layout -->
    </LinearLayout>
    <LinearLayout visibility="gone"> <!-- this will be your overlay view -->
        <ImageView /> <!-- the arrow/ring -->
        <TextView /> <!-- the description -->
    </LinearLayout>
</FrameLayout>

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

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

Answer 2

Поскольку у меня нет большого опыта работы с ViewStub, я бы сделал это с LayoutInflater.

Прежде всего, вам нужно загрузить второй макет поверх вашего текущего макета. Самый простой - иметь FrameLayout, который имеет в качестве одного дочернего элемента ваше текущее представление, и динамически загружать второго дочернего элемента при первом запуске. Когда вы загружаете представление содержимого в Activity, оно будет прикреплено к некоторым уже созданным представлениям (некоторые DecorView, FrameLayout и т. Д.). Таким образом, вы можете либо повторно использовать существующий FrameLayout, либо создать новый. Я бы проголосовал за второе решение, так как оно более стабильное (я только что упомянул другую возможность на случай, если вы хотите минимизировать количество слоев).

Итак, в качестве первого шага оберните ваш текущий макет внутри FrameLayout и присвойте ему идентификатор, скажем, "@ id / root".

Затем в методе onCreate вы можете получить что-то вроде этого:

setContentView(R.layout.main);
if (isFirstRun()) {
    ViewGroup parent = (ViewGroup)findViewById(R.id.root); // locate the FrameLayout
    LayoutInflater li = LayoutInflater.from(this); // get an instance of LayoutInflater
    li.inflate(R.layout.overlay, parent);
}

Пока у вас будет загружен оверлей. Теперь вам нужно определить оверлей. Чтобы создать эффект отбеливания, просто установите следующий атрибут в корневом представлении в макете overlay.xml:

android:background="#40ffffff"

Чтобы расположить круг, сначала вам нужно найти его местоположение. Вы можете использовать View.getLocationOnScreen, чтобы получить абсолютную координату значка (под кружком) на экране. Тогда вы можете иметь два варианта:

• либо создайте пользовательский вид (для наложения) и вручную нарисуйте круг в указанном месте
• или добавьте круг с помощью ImageView и отрегулируйте левое и верхнее поля в соответствии с координатами