ビューでレイアウトを作成して残りのスペースを埋める方法は?


188

アプリケーションのUIを設計しています。次のようなレイアウトが必要です。

望ましいレイアウトの例

(<と>はボタンです)。問題は、2つのボタンのサイズが固定されているため、TextViewが残りのスペースを満たすことを確認する方法がわかりません。

テキストビューにfill_parentを使用すると、2番目のボタン(>)を表示できません。

画像のようなレイアウトを作成するにはどうすればよいですか?


ルートレイアウトとして何を使用しますか?
木質の高い

1
@woodshyレイアウトは問題ありません。問題ありません。
ルークVo

回答:


211

woodshyからの回答がうまくいきましたが、Ungureanu Liviuの回答を使用しないので簡単ですRelativeLayout。わかりやすくするためにレイアウトを示しています。

<LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      >

     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
     <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>   
 </LinearLayout>

以下のような代があるalignLeftalignParentLeftして達成することはできませんなどは、LinearLayout
IcyFlame 2016年

私はこれがどのようにして可能かを完全には理解していませんが、RelativeLayoutを回避するのは本当にクールなトリックです
a.dibacco

2
これはどのように受け入れられた答えになりますか?画像表示はなく、ソリューションの一部にすぎません。少なくとも、Relative Layoutを使用した古いトップ投票の回答よりも優れています(私の回答で理由を説明しました)
Livio

天才ソリューション
Mohammad Elsayed

92

<TEXT VIEW>がLinearLayoutに配置されている場合は、<および>のLayout_weightプロパティをTextViewの0および1に設定します。
RelativeLayoutの場合、<と>を左と右に揃え、TextViewの「Layout to left of」と「Layout to right of」プロパティを<と>のIDに設定します。


まだサンプルは必要ですか?
woodshy

このレイアウトに画像を追加してビュー全体を埋める方法
Tushar Pandey 2014

ビュー全体を埋めるために、相対レイアウト内に画像を追加する方法
Tushar Pandey 2014

4
@woodshyはい、サンプルはまだ役に立ちます
Frank


71

を使用するとRelativeLayout、次のように実行できます。

<RelativeLayout
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent">
    <ImageView
        android:id = "@+id/my_image"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop ="true" />
    <RelativeLayout
        android:id="@+id/layout_bottom"
        android:layout_width="fill_parent"
        android:layout_height = "50dp"
        android:layout_alignParentBottom = "true">
        <Button
            android:id = "@+id/but_left"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&lt;"
            android:layout_alignParentLeft = "true"/>
        <TextView
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content"
            android:layout_toLeftOf = "@+id/but_right"
            android:layout_toRightOf = "@id/but_left" />
        <Button
            android:id = "@id/but_right"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&gt;"
            android:layout_alignParentRight = "true"/>
    </RelativeLayout>
</RelativeLayout>

おかげで動作します:)しかし、私にはわかりません。>ボタンではなく、TextViewがすべてのスペースを埋めないのはなぜですか?
Luke Vo

2
2つのネストされた相対レイアウトがあるのはなぜですか?ルートの1つで十分です。次に、下部の相対レイアウトの子がすべてalignParentBottom = "true"であることを確認するだけです
Noel

@ノエルそうです。これは私が使用する方法であるため、2つのレイアウトを選択します。私のアプリケーションでは、いくつかのビューの可視性を変更する必要がある場合があり、それらすべてをレイアウトに配置して、このレイアウトのためだけに可視性を変更する方が簡単です。 。私の例は完璧ではありませんが、うまくいくので、誰かにとって役に立つかもしれません。
Ungureanu Liviu

1
@WNこれも私にとって重要です:)右ボタンの幅が固定されているため、テキストビューはスペースをすべて使用しないと思います。右ボタンのandroid:layout_width = "80dp"をandroid:layout_width = "wrap_content"に変更すると、機能します。
Ungureanu Liviu

2
この答えは本当に悪いです!相対レイアウトは常に2パスで描画するため(他のタイプのレイアウトでは1に対して)、2相対レイアウトをネストすることは避けてください。ネストすると指数関数になります。左側のスペースを埋める要素には、width = 0およびweight = 1の線形レイアウトを使用する必要があります。覚えておいてください。他に選択肢がない場合にのみ、相対レイアウトを使用してください。stackoverflow.com/questions/4069037/…–
Livio、

30

を使用してConstraintLayout、私は次のようなものを見つけました

<Button
    android:id="@+id/left_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/left_button"
    app:layout_constraintRight_toLeftOf="@+id/right_button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/right_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

動作します。重要なのは、右、左、上、下のエッジの制約を適切に設定してから、幅と高さをに設定し、0dp独自のサイズを把握できるようにすることです。


4
ConstraintLayoutの使用を開始したばかりで、幅と高さを「0」に設定すると、幅と高さが制約によって決定できることを知って、それを
ありがとう

各制約の矢印の方向に注意することが重要です。TextView左右の制約があることを確認してください。TextView最初の場合はストレッチしないButtonと権利の制約がありTextView、最後はButton左の制約がありますTextView
マヌエル、

ずっといい!ネストされたレイアウトを持たないことでパフォーマンスを向上させます。0dpトリックを思い出していただきありがとうございます
OzzyTheGiant

7

シンプルですminWidthまたはminHeightを設定します。これは、探しているものに応じて、水平または垂直です。そして、他のオブジェクト(残りのスペースを埋めるオブジェクト)には、重みを1に設定します(コンテンツをラップする幅を設定します)。したがって、残りの領域を埋めます。

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center|left"
        android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        android:layout_width="80dp"
        android:layout_height="fill_parent"
        android:minWidth="80dp" >
</LinearLayout>

4

高いlayout_weight属性を使用できます。以下は、ListViewが下部にあるボタンですべての空きスペースを取るレイアウトを示しています。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".ConfigurationActivity"
    android:orientation="vertical"
    >

        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1000"
            />


        <Button
            android:id="@+id/btnCreateNewRule"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Create New Rule" />



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


</LinearLayout>

3

<LinearLayout...>私と同じグリッチを持っている人のために:

を指定することが重要です。android:layout_width="fill_parent"これは動作しませんwrap_content

OTOH、省略しても構いandroid:layout_weight = "0"ません。必須ではありません。

私のコードは基本的にhttps://stackoverflow.com/a/25781167/755804のコードと同じです(Vivek Pandeyによる)


3

相対レイアウトは常に2パスを描画するため(他のタイプのレイアウトの場合は1に対して)、2相対レイアウトをネストすることは避けてください。ネストすると指数関数になります。左側のスペースを埋める要素には、width = 0およびweight = 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">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

        <Button
            android:id="@+id/prev_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&lt;" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:gravity="center"
            android:text="TextView" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&gt;" />
    </LinearLayout>
</LinearLayout>

0

あなたはセットを使用することができるlayout_widthlayout_widthには、0dp(配向することによって、あなたは残りのスペースを埋めるために必要)。次に、layout_weightを使用して残りのスペースを埋めます。


0

Relativelayoutを使用してLinearLayoutをラップする

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:round="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
    <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>

</LinearLayout>

</RelativeLayout>`

0

見つけた

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="10dp"
        android:fontFamily="casual"
        android:text="(By Zeus B0t)"
     ``   android:textSize="10sp"
        android:gravity="bottom"
        android:textStyle="italic" />

0

相対レイアウトを使用する場合は、ストレッチするはずの両方のビューにアンカーすることで、ビューをストレッチできます。指定された高さは無視されますが、Androidでは依然として高さ属性が必要であるため、「0dp」と記述しました。例:

<View
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/topView"
    android:layout_above="@+id/bottomView"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:adjustViewBounds="true"/>

<View
    android:id="@id/bottomView"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.