Как выровнять кнопку, соответствующую фоновому изображению для нескольких экранов?

Question

Я очень новичок в этом форуме и действительно нуждаюсь в помощи в чем-то, что я застрял во время разработки приложения.

Это изображение я использую в качестве моего фона (я назвал его SampleBG в XML): https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png

В принципе, это то, что я хочу, чтобы мой дизайн выглядеть следующим образом: https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png

И для меньшие устройства, он автоматически изменяет размер и выглядит следующим образом: [i.gyazo.com/f4278339cc8f246187c011474796a12c.png]

и когда я переключаюсь на планшетном устройстве, она автоматически выглядит следующим образом: [i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]

И выше, это именно то, что я хочу, чтобы он выглядел. Деревянные знаки находятся в том же положении для всех размеров ...

Но проблема: Я хочу деревянные знаки, чтобы быть интерактивными, потому что они предназначены для кнопки.

Итак, я попытался использовать виджет кнопки и сделал его прозрачным и поместил его над деревянными знаками ... он работал, но он работал только на тот конкретный размер, для которого я его сконструировал (для его разработки был разработан специально для Nexus 5) .... Однако, когда я переключился на макет Nexus One или макет Nexus 9 и т. Д., Кнопки не были правильно размещены над деревянными знаками и, таким образом, не работали.

Я хочу, чтобы деревянные знаки можно было щелкнуть, а кнопки фиксировались знаками для всех размеров устройства и т. Д., И в то же время.

Я бы предпочел xml-решение, но программное решение тоже приятно.

Вот код макета прямо сейчас, это просто используя фоновое изображение прямо сейчас ....

`<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/sampleBG"> 

</RelativeLayout>` 

Примечание: Я попытался с помощью изображение двери, как только фон, а затем добавить деревянные знаки вручную, используя виджеты ImageButton, но деревянные знаки были по-разному размещены для разных экранов, и это выглядело странно, поэтому я установил деревянные значки на фоне (в Photoshop) .. теперь я просто хочу, чтобы знаки были доступны для кликов.

Answer 1

Это пример кода, который можно использовать для того, чтобы достичь этого:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@mipmap/ic_launcher" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.test.androidtestapp.MainActivity"> 

    <ImageButton 
     android:id="@+id/equationsButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/equationsOfTheWeekButton" 
     android:layout_centerInParent="true" 
     android:layout_margin="20dp" 
     android:background="@mipmap/ic_launcher" 
     android:contentDescription="Equations Button" 
     android:onClick="equationsButtonClick" /> 

    <ImageButton 
     android:id="@+id/equationsOfTheWeekButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:layout_margin="20dp" 
     android:background="@mipmap/ic_launcher" 
     android:contentDescription="Equations Of The Week Button" 
     android:onClick="equationsOfTheWeekButtonClick" /> 

    <ImageButton 
     android:id="@+id/settingsButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/equationsOfTheWeekButton" 
     android:layout_centerInParent="true" 
     android:layout_margin="20dp" 
     android:background="@mipmap/ic_launcher" 
     android:contentDescription="Settings Button" 
     android:onClick="SettingsButtonClick" /> 
</RelativeLayout> 

Вам нужно разрезать изображение, а затем просто изменить background атрибуты в коде выше. Когда вы достигнете этого, вы можете изменить фон на селектор, где вы можете изменить изображение в зависимости от разных состояний ->, когда он щелкнут, сфокусирован, нормален; что сделает его более удобным для пользователя.

Answer 2

Деревянные знаки НЕ должны быть на фоновом изображении.

Вместо этого сделайте реальное фоновое изображение (то есть только с «дверным» фоном) и сделайте отдельные изображения со знаками. Затем используйте эти изображения для создания ваших кнопок.

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

Answer 3

Вы можете отделить деревянные фотографии, которые хотите быть кнопками, и отдать их в качестве фона для кнопок. Например, вы назвали деревянные фотографии, как «wood1.png», «wood2.png» и «wood3.png» и этого образца кода вы можете установить их для фонового изображения для кнопок:

<ImageButton 
    android:id="@+id/button1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/wood1" 
    /> 

или вы могу разработать приложение с помощью вашего собственного решения, описанного, но вы должны создать свой дизайн приложений различной компоновки для различных устройств размера: макета большого
макета небольшой
макета нормального
макета XLarge
макета XXLarge

вы можете найти проект autoLayout в приложении android и найти свое решение лучше.