남은 공간을 채우기 위해 View로 레이아웃을 만드는 방법은 무엇입니까?


188

응용 프로그램 UI를 디자인하고 있습니다. 다음과 같은 레이아웃이 필요합니다.

원하는 레이아웃의 예

(<와>는 버튼입니다). 문제는 TextView가 나머지 공간을 채우는 방법을 모른다는 것입니다. 두 버튼의 크기는 고정되어 있습니다.

텍스트보기에 fill_parent를 사용하면 두 번째 버튼 (>)을 표시 할 수 없습니다.

이미지처럼 보이는 레이아웃을 어떻게 만들 수 있습니까?


루트 레이아웃으로 무엇을 사용하십니까?
woodshy

1
@woodshy 어떤 레이아웃이든 상관 없습니다.
Luke Vo

답변:


213

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

이것이 어떻게 가능한지 완전히 이해하지
못하지만

2
이것이 어떻게 대답이 될 수 있습니까? 이미지 뷰가 없으며 솔루션의 일부일뿐입니다. 적어도 Relative Layout을 사용하여 이전의 최고 투표 답변보다 낫습니다. (내 답변에서 이유를 설명했습니다)
Livio

천재 솔루션
Mohammad Elsayed

92

<TEXT VIEW>가 LinearLayout에 배치 된 경우 TextView에 대해 Layout_weight 속성을 <및>의 0 및 1로 설정하십시오.
RelativeLayout의 경우 <및>를 왼쪽과 오른쪽으로 정렬하고 TextView의 "Layout to left of"및 "Layout to right of"속성을 <및>의 id로 설정하십시오.


여전히 샘플이 필요한 사람이 있습니까?
woodshy

전체 화면을 채우기 위해이 레이아웃에 이미지를 추가하는 방법
Tushar Pandey

전체 레이아웃을 채우기 위해 상대 레이아웃 내에 이미지를 추가하는 방법
Tushar Pandey

4
@woodshy 예 샘플이 여전히 도움이 될 것입니다.
Frank Schwieterman


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
왜 두 개의 상대적 레이아웃이 있습니까? 루트가 충분해야합니다. 그런 다음 하단 상대 레이아웃의 자식이 모두 alignParentBottom = "true"인지 확인하기 만하면됩니다.
Noel

@Noel 당신이 맞아요. 이 방법은 내가 사용하는 방식이기 때문에 2 레이아웃을 선택합니다. 응용 프로그램에서 몇 가지 뷰의 가시성을 변경해야 할 수 있으며 모든 레이아웃을 레이아웃에 배치 하고이 레이아웃의 가시성을 변경하는 것이 더 쉽습니다. . 내 예제는 완벽하지는 않지만 작동하며 누군가에게 유용 할 수 있습니다.
Ungureanu Liviu 2016 년

1
@WN 이것은 나에게도 달려 있습니다 :) 오른쪽 버튼의 너비가 고정되어 있기 때문에 textview가 모든 공간을 사용하지 않는다고 생각합니다. 오른쪽 버튼에 대해 android : layout_width = "80dp"를 android : layout_width = "wrap_content"로 변경하면 작동합니다.
Ungureanu Liviu 2016 년

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"로 설정시, 가장 큰 너비와 높이가 제약 조건에 의해 결정 될 수 있음을 알고
MQoder

각 구속 조건의 화살표 방향 에 주의해야합니다 . TextView왼쪽 및 오른쪽 제약 조건이 있는지 확인하십시오 . 이 TextView(가) 첫 번째 경우 스트레칭하지 않는 Button받는 권리 제약 조건이 TextView마지막이 Button받는 왼쪽 제약이있다 TextView.
Manuel

훨씬 낫다! 중첩 레이아웃이 없어 성능이 향상됩니다. 0dp 트릭을 상기시켜 주셔서 감사합니다
OzzyTheGiant 2016 년

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_width또는 layout_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.