2014-02-24 35 views
-1

我要設計這種特殊的設計如何設計這個佈局,android?

Design

這裏B1,B2 & B3是按鈕和E1是編輯文本

我已經試過如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 

    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:background="@color/Red" 
     android:orientation="vertical" > 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dip" 
      android:layout_marginBottom="20dp" 
      android:layout_marginLeft="20dp" 
      android:layout_marginRight="20dp" 
      android:layout_weight="1" > 

      <Button 
       android:id="@+id/button1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentRight="true" 
       android:layout_below="@+id/editText1" 
       android:layout_marginRight="20dp" 
       android:background="@drawable/btn_shape1" 
       android:drawableRight="@drawable/arrow_select" 
       android:text="B1" /> 

      <EditText 
       android:id="@+id/editText1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerVertical="true" 
       android:layout_toLeftOf="@+id/button1" 
       android:background="@drawable/btn_shape1" 
       android:ems="10" /> 
     </RelativeLayout> 
    </LinearLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:background="@color/Red" > 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_marginBottom="10dp" 
      android:layout_marginLeft="19dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/btn_shape1" 
      android:text="B2" /> 

     <Button 
      android:id="@+id/button3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_marginBottom="10dp" 
      android:layout_marginRight="19dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/btn_shape1" 
      android:text="B3" /> 
    </RelativeLayout> 

    <ImageView 
     android:id="@+id/imageView1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_centerInParent="true" 
     android:src="@drawable/ic_launcher" /> 

</RelativeLayout> 

但我沒有得到與設計相同的結果。

+0

是B2和B3在屏幕的底部,ImageView應該佔用其餘的空間嗎?或B2和B3只是在Imageview下面,而不是與底部對齊? – Sharj

+0

B2和B3位於屏幕的底部,ImageView應占用其餘空間 – WISHY

回答

1

這個替換您的XML和雅改變顏色或背景值根據自己的需要。

<RelativeLayout 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" > 

    <LinearLayout 
    android:id="@+id/linearLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" 
    android:background="@android:color/darker_gray" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="20dp" 
     android:layout_marginLeft="20dp" 
     android:layout_marginRight="20dp" 
     android:orientation="horizontal"> 

     <EditText 
      android:id="@+id/editText1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:ems="10" 
      android:layout_weight="7"/> 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginRight="20dp" 
      android:text="B1" 
      android:layout_weight="1"/> 

</LinearLayout> 

</LinearLayout> 

    <ImageView 
    android:id="@+id/imageView1" 
    android:layout_below="@+id/linearLayout1" 
    android:layout_above="@+id/linearLayout2" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_centerInParent="true" 
    android:src="@drawable/ic_launcher" /> 

<LinearLayout 
    android:id="@+id/linearLayout2" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:background="@android:color/darker_gray" > 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="10dp" 
     android:layout_marginLeft="19dp" 
     android:layout_marginTop="10dp" 
     android:layout_weight="4" 
     android:text="B2" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="2"/> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="10dp" 
     android:layout_marginRight="19dp" 
     android:layout_marginTop="10dp" 
     android:layout_weight="4" 
     android:text="B3" /> 
</LinearLayout> 
</RelativeLayout> 

希望它能幫助你。

1

使用這樣的產品......

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

<LinearLayout 
    android:id="@+id/linearLayout1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

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

     <EditText 
      android:id="@+id/editText1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="7" 
      android:ems="10" > 

      <requestFocus /> 
     </EditText> 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="3" 
      android:text="Button" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="8" 
     android:orientation="vertical" > 

     <ImageView 
      android:id="@+id/imageView1" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:src="@drawable/ic_launcher" /> 
    </LinearLayout> 

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

     <Button 
      android:id="@+id/button1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:text="Button" /> 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:text="Button" /> 
    </LinearLayout> 
</LinearLayout> 

</LinearLayout> 
0

請嘗試以下XML架構...使用LinearLayout父佈局和設置android:layout_weight="1"ImageView ...這將讓ImageView採取屏幕的整個剩餘空間。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/Red" 
     android:orientation="horizontal" > 

     <EditText 
      android:id="@+id/editText1" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="#000000" 
      android:ems="10" /> 

     <Button 
      android:id="@+id/button1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginRight="20dp" 
      android:background="@drawable/btn_shape1" 
      android:drawableRight="@drawable/arrow_select" 
      android:text="B1" /> 
    </LinearLayout> 

    <ImageView 
     android:id="@+id/imageView1" 
     android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight="1" 
     android:src="@drawable/ic_launcher" /> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/Red" > 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_marginBottom="10dp" 
      android:layout_marginLeft="19dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/btn_shape1" 
      android:text="B2" /> 

     <Button 
      android:id="@+id/button3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_marginBottom="10dp" 
      android:layout_marginRight="19dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/btn_shape1" 
      android:text="B3" /> 
    </RelativeLayout> 

</LinearLayout> 
0

試試這個

<LinearLayout 
    android:layout_height="0dp" 
    android:layout_weight="1" 
    android:weightSum="3" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal"> 

    <EditText 
     android:layout_height="fill_parent" 
     android:layout_weight="2" 
     android:layout_width="0dp" 
     /> 

    <Button 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:layout_width="0dp"/> 

</LinearLayout> 

<ImageView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_weight="6" /> 

<LinearLayout 
    android:layout_height="0dp" 
    android:layout_weight="1" 
    android:weightSum="2" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal"> 

     <Button 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:layout_width="0dp"/> 

     <Button 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:layout_width="0dp"/> 
</LinearLayout>