Как правильно установить ImageButton в фоновое изображение на Android?

Question

В дизайне интерфейса Android с использованием XML, как можно поместить ImageButton точно в соответствие с фоном файла xml активности.

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

Это фоновое изображение. http://i.stack.imgur.com/e1Ow5.png

Это изображение кнопки. http://i.stack.imgur.com/m0tUU.png

Я установил первое изображение в качестве фона для деятельности. Мой вопрос заключается в том, как правильно разместить и выровнять второе изображение, то есть кнопку точно в «центральном прямоугольнике» фона. «Центральный прямоугольник» является держателем места, и он может находиться где угодно на экране.

Не: Я попытался использовать относительную компоновку, но не смог разместить кнопку в зависимости от фона.

Редактировать: - На самом деле прямоугольник и закругленный прямоугольник в центре фона - это только место. Это может быть что угодно, даже ничего. Или это может быть где угодно. Возможно, это не в центре. Рассмотрите весь образ, мне нужно поместить изображение кнопки, где находится держатель места. Это мое намерение. Скажем, например, рассмотрите радиоприложение, где есть кнопка поворота, действующая как громкость. Все остальное на изображении - это фон, а громкость звука может быть другим изображением.

Answer 1

Ответ - это невозможно, как вы пытаетесь это сделать.

Что вы хотите сделать, так это отрезать фон, чтобы кнопка была центрирована.

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

->FrameLayout1 
---->Framelayout2 
-------->Button 

FrameLayout1 будет фоном без внутренней площади

FrameLayout2 бы внутренний квадрат

Кнопка будет активна в кнопке и будет размещена по центру в FrameLayout 2.

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

Answer 2

Учитывая, что вы пытаетесь в ландшафтном режиме (ваши изображения выглядят так) Вы можете попробовать следующий код.

BG: Ваш фон

IMG: ваш центр изображения

<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="@drawable/bg" > 

    <ImageView 
     android:id="@+id/imageView1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_centerVertical="true" 
     android:src="@drawable/img" /> 

</RelativeLayout> 

Answer 3

<?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" > 

     <ImageView 
      android:id="@+id/imageView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/img_bg" /> 

    </RelativeLayout> 

drawable/img_bg.xml 
    <?xml version="1.0" encoding="utf-8"?> 
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

     <item android:drawable="@drawable/bg"> 
     </item> 
     <item android:drawable="@drawable/fr"> 
     </item> 

    </layer-list> 

or 

    <?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" > 

     <ImageView 
      android:id="@+id/imageView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:src="@drawable/bg" /> 

     <ImageView 
      android:id="@+id/imageView2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_alignTop="@+id/imageView1" 
      android:src="@drawable/fr" /> 

    </RelativeLayout> 

bg.png и fr.png прозрачные изображения с одинаковой высоты и ширины.