Android的複雜播放器的佈局設計

Question

我想下面的圖像轉換成一個佈局，

如果你仔細觀察的後面的底部和頂部視圖播放按鈕分離和播放按鈕需要安裝在它們之間。

這裏的頂架，

和底部支架，

這是我到目前爲止已經完成，

<?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/bg_blur" 
    android:orientation="vertical"> 


    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true"> 

     <ImageView 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_margin="18dp" 
      android:background="@drawable/btn_play" /> 

     <ImageView 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:layout_alignParentEnd="true" 
      android:layout_alignParentRight="true" 
      android:layout_margin="18dp" 
      android:background="@drawable/btn_play" /> 
    </RelativeLayout> 

    <RelativeLayout 
     android:id="@+id/relativeLayout" 
     android:layout_width="match_parent" 
     android:layout_height="150dp" 
     android:layout_centerHorizontal="true" 
     android:layout_marginBottom="0dp" 
     android:layout_marginTop="45dp"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="162dp" 
      android:layout_height="162dp" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:layout_marginBottom="35dp" 
      android:background="@drawable/btn_play" /> 

     <LinearLayout 
      android:id="@+id/topHolderLayout" 
      android:layout_width="400dp" 
      android:layout_height="30dp" 
      android:layout_above="@+id/middle_separator" 
      android:layout_weight="1" 
      android:background="@drawable/top_holder_top_part" 
      android:orientation="horizontal"></LinearLayout> 

     <View 
      android:id="@+id/middle_separator" 
      android:layout_width="match_parent" 
      android:layout_height="1dp" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true"></View> 

     <LinearLayout 
      android:id="@+id/bottomHolderLayout" 
      android:layout_width="400dp" 
      android:layout_height="30dp" 
      android:layout_below="@+id/middle_separator" 
      android:layout_weight="1" 
      android:background="@drawable/top_holder_bottom_part" 
      android:orientation="horizontal"></LinearLayout> 
    </RelativeLayout> 
</RelativeLayout> 

，因爲它完全依賴於像素，不適用於不同的屏幕尺寸。採用這種設計的最佳方式是什麼？任何形式的幫助/建議將不勝感激！

Answer 1

如果你希望你的佈局與設備屏幕比例，你可能會做下列之一：

1. 爲每個屏幕密度不同的圖像（這可能是你的按鈕的情況下，一個好主意） ：

   res/drawable-mdpi/graphic.png   // bitmap for medium-density 
   res/drawable-hdpi/graphic.png   // bitmap for high-density 
   res/drawable-xhdpi/graphic.png  // bitmap for extra-high-density 
   res/drawable-xxhdpi/graphic.png  // bitmap for extra-extra-high-density 
   

   來源：http://developer.android.com/guide/practices/screens_support.html

2. 在res/drawable中創建可繪製的XML資源。

例如，你的頂架的背景可能是這樣的：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > 
    <solid android:color="#e0e0e0" /> 
    <corners 
     android:bottomLeftRadius="0dp" 
     android:bottomRightRadius="0dp" 
     android:topLeftRadius="128dp" 
     android:topRightRadius="128dp" /> 
</shape> 

和底部支架：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > 
    <solid android:color="#e0e0e0" /> 
    <corners 
     android:bottomLeftRadius="128dp" 
     android:bottomRightRadius="128dp" 
     android:topLeftRadius="0dp" 
     android:topRightRadius="0dp" /> 
</shape> 

你的按鈕則可以覆蓋持有人（你不需要「切」他們的圓孔）。

創建使用draw9patch從Android SDK中工具9補丁圖像，如下所述：http://developer.android.com/tools/help/draw9patch.html