2011-07-22 6 views
5

下の画像では、黄色の四角形は私の全体のレイアウト内にあるRelativeLayoutを表しています。このレイアウトを作成するにはどのような方法がありますか?

「ステータスメッセージ」の一番上の行は、ユーザが押すことができるToggleButtons(A、B)に応答するViewFlipperです。ボタンC、D、およびEは、ビュー全体をリロードする他のものを行います。私たちのクライアントは、ボタンA、B、C、D、Eを以下のように配置することを要求しています。 (垂直アライメントは水平アライメントほど重要ではありません)

EDITとはA、B、C、D、Eは約20x20のディップの画像です。彼らは約300dipの幅内に整列されています。ボタンのアスペクト比を維持したい。

looking to make this layout

私は別のXMLファイルでボタンC、D、及びEを膨張させる(XMLファイルから)ボタンAとBを膨張させるのLinearLayoutを拡張し、別のLinearLayoutを作成しました。

ボタンAとB(実際のトグルボタンである):

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/A" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="60dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/B" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

ボタンC、D、E XMLファイル:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ImageView 
      android:id="@+id/C" 
      android:src="@drawable/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/D" 
      android:src="@drawable/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/E" 
      android:src="@drawable/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

マイコード基本的に動作し、私は余白とごまかすしなければなりません物事を正しく整理するために(彼らはまだない)。ボタンセット "A B"と "C D E"を整列させるクリーナーな方法があるのだろうか?

ps:私はLinearLayoutを拡張しているのにRelativeLayoutsを拡張していることに気付くだろう。 (私はそれがまったく機能しない理由は分かりませんが)代わりにRelativeLayoutを拡張しようとしたときに、「C D E」レイアウトがデバイスに表示されませんでした。私はどこに行ったのか分かりません。

答えて

3

本体として線形レイアウトを使用します。

そして、空間にそれらを子ビューのそれぞれにlayout_marginを離れて使用

を中心としたコンテンツを維持するために、個々の水平linearlayoutsにlayout_gravityを使用しています。私はこれを15dipと指定しましたが、ディメンションを使用してすべてを一緒に変更できるようにする必要があります。

<?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"> 
    <TextView android:id="@+id/some_text" 
     android:layout_height="wrap_content" 
     android:text="Some random string." android:layout_gravity="center" android:layout_width="wrap_content"/> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/A" 
      android:layout_margin="15dip"/> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/B" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ImageView 
      android:id="@+id/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/C" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/D" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/E" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 

</LinearLayout> 
+0

OPがボタンを展開したい場合は、LinearLayoutをRelativeLayoutに置き換え、layout_left/layout_rightと余白などを組み合わせる必要があります。 – Audrius

+0

ボタンを広げたくありません。私は彼らに与えられたより広いスペースの中で、 "浮遊"して、彼らの相対的なサイズを保つようにします。 –

関連する問題