我將如何創建此佈局

Question

我知道這不可能是最好的標題，所以如果您有更好的標題，請編輯。

好的，所以我有一個模擬了我想在android中創建的部分設計，我將在後面進行介紹。

我不是最好的自定義形狀的工作，所以我想我可能會沿着Images with clickable areas的路線。這意味着我只是導入圖像，並只監視用戶是否點擊屏幕的一部分。

什麼是最好的方法？

如果用XML創建它更好，你有一個很好的教程，你可以指向我。

感謝

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:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="16dp" 
android:paddingLeft="16dp" 
android:paddingRight="16dp" 
android:paddingTop="16dp"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:weightSum="2"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:weightSum="2" 
     android:orientation="horizontal"> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 1"/> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 2"/> 


    </LinearLayout> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:weightSum="2" 
     android:orientation="horizontal"> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 3"/> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 4"/> 

    </LinearLayout> 

</LinearLayout> 

<Button 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:background="@drawable/circle"/></RelativeLayout> 

請繪製文件夾這個文件命名爲圓形按鈕背景圈子

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 

<size android:width="200dp" android:height="200dp" /> 
<solid android:color="@android:color/holo_red_light" /></shape> 

看起來像這樣

Answer 2

下面是一個全面的測試佈局

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <Button 
     android:id="@+id/btn_1" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:text="Button one"/> 

    <Button 
     android:id="@+id/btn_2" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@id/btn_1" 
     android:text="Button two"/> 

    <Button 
     android:id="@+id/btn_3" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:text="Button three" 
     android:layout_below="@id/btn_1"/> 

    <Button 
     android:id="@+id/btn_4" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/btn_2" 
     android:layout_toRightOf="@id/btn_3" 
     android:text="Button four"/> 

    <ImageView 
     android:id="@+id/logo" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:translationZ="10dp" 
     android:src="@drawable/ti_logo"/> 

</RelativeLayout> 

Answer 3

@ SammyG您可以在此佈局按照您的要求修改..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.example.android.stackoverflow_test.MainActivity"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:weightSum="2"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:orientation="horizontal"> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_green_dark" 
      android:padding="20dp" /> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/black" 
      android:padding="20dp" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:orientation="horizontal"> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_red_dark" 
      android:padding="20dp" /> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_blue_bright" 
      android:padding="20dp" /> 
    </LinearLayout> 
</LinearLayout> 

<ImageView 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:layout_centerInParent="true" 
    android:background="@mipmap/ic_launcher" /></RelativeLayout>