Wie richtet man eine Taste aus, die dem Hintergrundbild für mehrere Bildschirme entspricht?

Question

Ich bin sehr neu in diesem Forum und brauche wirklich Hilfe in etwas, in dem ich bei der Entwicklung der App stecken geblieben bin.

Dies ist das Bild, das ich als meinen Hintergrund verwende (ich es SampleBG in xml genannt): https://i.gyazo.com/946507c2690c8170b54a1ace752906bd.png

Im Grunde ist das, was ich mein Design aussehen soll: https://i.gyazo.com/896e29846dfd9e4bc9ab15ca39f9a796.png

Und für kleinere Geräte, deren Größe automatisch und sieht wie folgt aus: [i.gyazo.com/f4278339cc8f246187c011474796a12c.png]

und wenn ich zu einem Tablet-Gerät wechseln, sieht es automatisch wie folgt aus: [i.gyazo.com/1b0e233a0b1731148664e0ac78a05f08.png]

Und das obige ist genau so, wie ich es aussehen soll. Die Holzschilder sind in der gleichen Position für alle Größen ...

Aber das Problem ist: ich die Holzschildchen wollen anklickbar sein, weil sie Tasten sein sollen.

Also, ich habe versucht, eine Schaltfläche Widget zu verwenden und es transparent gemacht und legte es über die Holzschilder ... es funktionierte, aber es funktionierte nur für die bestimmte Größe, für die ich es entworfen (speziell für Nexus 5 ausgelegt)) .... Als ich jedoch auf das Nexus One-Layout oder Nexus 9-Layout usw. umschaltete, wurden die Schaltflächen nicht korrekt über den Holzschildern platziert und funktionierten nicht.

Ich möchte einen Weg, um die Holzschilder anklickbar und und die Tasten mit den Schildern für alle Gerätegrößen/etc, und zur gleichen Zeit zu machen.

Ich würde eine XML-Lösung bevorzugen, aber eine programmatische Lösung ist auch nett.

Hier ist der Layout-Code gerade jetzt, es jetzt nur noch mit Recht das Hintergrundbild ....

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

HINWEIS: Ich habe versucht, die Tür Bild unter Verwendung als der Hintergrund nur dann die Holzschildchen Hinzufügen manuell mit den ImageButton-Widgets, aber die Holzschilder wurden für verschiedene Bildschirme unterschiedlich platziert und es sah seltsam aus, also habe ich die Holzschilder mit dem Hintergrund (in Photoshop) repariert ... jetzt möchte ich nur, dass die Schilder klickbar sind.

Answer 1

Dies ist ein Beispielcode, den Sie, um dies zu erreichen, verwenden können:

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

Sie benötigen Bild und dann einfach ändern, um die background Attribute in dem obigen Code zu schneiden. Wenn Sie dies erreichen, können Sie den Hintergrund in einen Selektor ändern, in dem Sie das Bild abhängig von den verschiedenen Zuständen ändern können -> wenn es angeklickt wird, fokussiert, normal; das würde es benutzerfreundlicher machen.

Answer 2

Die hölzernen Zeichen sollten NICHT auf dem Hintergrundbild sein.

Stattdessen ein echtes Hintergrundbild (dh mit nur dem "Tür" Hintergrund) und separate Bilder mit den Zeichen machen. Verwenden Sie dann diese Bilder, um Ihre Schaltflächen zu erstellen.

Edit: Ich habe Ihre Notiz über die Tatsache gelesen, dass Sie das versucht haben, aber Sie sollten definitiv diesen Weg gehen. Ein weiterer Vorteil ist, dass Sie die Schaltflächen einfach auf den Benutzerklick mit "onPress" -Zuständen reagieren lassen können, was unmöglich (oder zumindest schwierig und hässlich) mit einem einzigen Hintergrundbild wäre.

Answer 3

Sie können Holzbilder, die Sie Button sein möchten, trennen und sie als Hintergrund für Schaltflächen geben. Sie können beispielsweise die Holz Bilder wie ‚wood1.png‘, ‚wood2.png‘ und ‚wood3.png‘ und von diesem Beispielcode genannt Sie sie für Hintergrundbild für Schaltflächen festlegen:

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

Oder Sie Ihre App durch eine eigene Lösung entwickeln, die beschrieben, aber Sie sollten durch verschiedene Layouts für unterschiedliche Größe Gerät App-Design erstellen: Layout-große
Layout-small
Layout-normal
Layout-xlarge
Layout-xxlarge

Sie können über AutoLayout Design in Android App suchen und finden Sie Ihre Lösung besser ..