如何創建類似於Android

Question

中鏈接提供的圖像的佈局我是Android開發的新手。我想創建類似於我在下面鏈接中提供的圖像的佈局。

我想在我的android應用程序中創建佈局圖像，點擊下面的鏈接查看。

http://i.stack.imgur.com/nv2TH.gif

這是我寫的佈局，還沒有達到所提供的圖像中的標準。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/relativeLayout" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/anim" 
    android:scaleType="centerCrop" /> 

<TextView 
    android:id="@+id/musicTitle" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:layout_marginTop="20dp" 
    android:text="Music Title" 
    android:textColor="#FFFFFF" 
    android:textSize="20sp" /> 

<TextView 
    android:id="@+id/musicArtistName" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/musicTitle" 
    android:layout_centerHorizontal="true" 
    android:text="Singer Name - Artist Here" 
    android:textColor="#FFFFFF" 
    android:textSize="14sp" /> 

如何創建這種類型的XML layout.I的想知道如何實現這一點？謝謝。

Answer 1

嘗試以下的想法是讓與權重和佈局，並給予權重的每個子部分

<?xml version="1.0" encoding="utf-8"?> 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="vertical" android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:weightSum="4"> 

     <RelativeLayout 
      android:id="@+id/relativeLayout" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="2"> 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:src="@drawable/banner_broken_image" 
      android:scaleType="centerCrop" /> 

     <TextView 
      android:id="@+id/musicTitle" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="20dp" 
      android:text="Music Title" 
      android:textColor="#FFFFFF" 
      android:textSize="20sp" /> 

     <TextView 
      android:id="@+id/musicArtistName" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/musicTitle" 
      android:layout_centerHorizontal="true" 
      android:text="Singer Name - Artist Here" 
      android:textColor="#FFFFFF" 
      android:textSize="14sp" /> 

     </RelativeLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1.5" 
      android:background="@android:color/white"/> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="0.5" 
      android:background="@android:color/black"/> 

    </> 

Answer 2

當您設計的Android的佈局，你需要了解你要使用的視圖。

在圖像您已經聯繫在一起，從上往下，有：

• ImageView的，與他人的TextView在這個

• 自定義視圖，你需要實現自己或搜索庫這表示聲

• 的LinearLayout（水平）與3-按鈕（的ImageButton），玩家的

• 進度與在開始2的TextView和對照最後，這首歌的
• 底部導航欄

希望這分析現在可以幫助你下一個時代的進步，你看到一個佈局！