背景画像に対応するボタンを複数の画面に揃える方法は？

Question

私はこのフォーラムではとても新しいので、アプリの開発中に取り残されたことに本当に助けが必要です。 https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png

そしてについて：基本的に https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png

が、これは私が私のデザインは次のように見てみたいものです。

この

は私が私の背景として使用していた画像である（私は、XMLでそれSampleBG命名しました）より小型のデバイス、それが自動的にサイズ変更しますと次のようになります。 [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デザインを検索し、あなたの解決策を見つけることができます。