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