Android -alert對話框設計

Question

在我的應用程序中，我想顯示彈出對話框。我爲第一階段畫了草圖。在這裏我想：

我試圖實現這一點，這裏是我的代碼：

<TableLayout 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:shrinkColumns="*" 
    android:stretchColumns="*" 
    android:background="#ffffff" 
    tools:context=".CustomMainActivity" > 
    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:gravity="center_horizontal" 
     android:background="#b6006a"> 
     <ImageView 
      android:id="@+id/ImageView1" 
      android:src="@drawable/icon"    
      android:layout_weight="1"  
      android:padding="10dip" 
      android:adjustViewBounds="true" 
      android:layout_width="70dp" 
      android:layout_height="70dp" 
      android:scaleType="fitXY" 
      android:gravity="right"/> 

     <TextView 
      android:id="@+id/TextView1" 
      android:layout_weight="1" 
      android:textSize="18dp" 
      android:text="Nava Messenger"   
      android:padding="10dip" 
      android:background="#b6006a" 
      android:textColor="#fff" 
      android:gravity="left"/> 

    </TableRow> 
    <TableRow 
     android:id="@+id/tableRow0" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent"> 
     <TextView 
      android:id="@+id/TextViewSender" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textSize="18dp" 
      android:layout_span="3" 
      android:maxLines="1" 
      android:background="#fff" 
      android:textColor="#000"/> 


    </TableRow> 
    <TableRow 
     android:id="@+id/tableRow1" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent"> 
     <TextView 
      android:id="@+id/TextView2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textSize="18dp" 
      android:layout_span="3" 
      android:maxLines="4" 
      android:padding="18dip" 
      android:background="#fff" 
      android:textColor="#000"/> 


    </TableRow> 
    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:gravity="center_horizontal">    
     <EditText 
      android:id="@+id/EditText1"    
      android:layout_weight="3" 
      android:inputType="textCapWords" 
      android:layout_width="0dp"         
      android:ellipsize="start"   
      android:gravity="center" 
      android:textColor="#b6006a" 
      android:hint="Write a message..."/> 
     <ImageButton 
      android:id="@+id/ImageButton1" 
      android:layout_weight="1" 
      android:layout_width="0dp" 
      android:adjustViewBounds="true" 
      android:background="@null" 
      android:scaleType="fitXY" 
      android:src="@drawable/send_now"    
      android:gravity="right"/>   
    </TableRow>  

</TableLayout> 

而且這段代碼的結果是：

我想修改一些如：

• 減少頭大小（在警告對話框的頂部紫色區域）上的頭
• 降低圖像尺寸（標誌圖像的真實大小爲：128 * 128）
• 減少發送圖像（發送圖像的真實尺寸是： 48 * 48）
• 把發送圖像和EditText上某一行

什麼建議嗎？

Answer 1

使用LinearLayout根據需要調整邊距/填充。改變圖標也。粗糙的佈局。

<LinearLayout 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="#ffffff" 
    android:orientation="vertical" 
    tools:context=".CustomMainActivity"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#b6006a" 
     android:gravity="center_horizontal" 
     android:orientation="horizontal"> 

     <ImageView 
      android:id="@+id/ImageView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:gravity="right" 
      android:padding="10dip" 
      android:scaleType="fitXY" 
      android:src="@android:drawable/ic_dialog_dialer" /> 

     <TextView 
      android:id="@+id/TextView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:background="#b6006a" 
      android:gravity="left" 
      android:padding="10dip" 
      android:text="Nava Messenger" 
      android:textColor="#fff" 
      android:textSize="18dp" /> 
    </LinearLayout> 

    <TextView 
     android:id="@+id/TextViewSender" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#fff" 
     android:maxLines="1" 
     android:text="Farhan" 
     android:textColor="#000" 
     android:textSize="18dp" /> 

    <TextView 
     android:id="@+id/TextView2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#fff" 
     android:maxLines="4" 
     android:text="FarhanFarhanFarhan" 
     android:padding="18dip" 
     android:textColor="#000" 
     android:textSize="18dp" /> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:gravity="center_horizontal" 
     android:orientation="horizontal"> 

     <EditText 
      android:id="@+id/EditText1" 
      android:layout_width="0dp" 
      android:layout_weight="3" 
      android:layout_height="match_parent" 
      android:ellipsize="start" 
      android:gravity="center" 
      android:hint="Write a message..." 
      android:inputType="textCapWords" 
      android:textColor="#b6006a" /> 

     <ImageButton 
      android:id="@+id/ImageButton1" 
      android:layout_width="0dp" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:background="@null" 
      android:gravity="right" 
      android:scaleType="center" 
      android:src="@android:drawable/ic_menu_send" /> 
    </LinearLayout> 
</LinearLayout> 

Answer 2

• 使用RelativeLayout的，而不是TableLayout，它更容易使用RelativeLayout的。
• 更改圖像尺寸的寬度和高度，以查看ScaleType的其他值（如果它是必需的）。
• 如果你想控制頭的大小，不要使用「wrap_content」。
• 在values/colors.xml中定義顏色。