Căn giữa một nút trong bố trí tuyến tính


338

Tôi đang sử dụng một bố cục tuyến tính để hiển thị một màn hình ban đầu khá nhẹ. Nó có 1 nút được cho là nằm ở giữa màn hình theo chiều ngang và chiều dọc. Tuy nhiên, không có vấn đề gì, tôi cố gắng làm nút sẽ căn chỉnh trung tâm. Tôi đã bao gồm XML dưới đây, một số có thể chỉ cho tôi đi đúng hướng?

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

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:background="@drawable/findme"></ImageButton>

</LinearLayout>

6
Điều đã cố định nó cho tôi trong linearLayout với căn chỉnh ngang là đặt layout_widththành "quấn_content". Sau đó, layout_gravitynhững gì nó đã được thực hiện!
Ai đó ở đâu đó

Nếu bạn thực sự cần sử dụng linearLayout, tôi nghĩ rằng nó sẽ hoạt động: stackoverflow.com/questions/18051472/ Kẻ
Antonio

Câu trả lời:


372

Nếu bạn muốn căn giữa một mục ở giữa màn hình, đừng sử dụng một mục LinearLayoutnày để hiển thị một số mục liên tiếp.

Sử dụng RelativeLayoutthay thế.

Vì vậy, thay thế:

android:layout_gravity="center_vertical|center_horizontal"

cho các RelativeLayouttùy chọn có liên quan :

android:layout_centerInParent="true"

Vì vậy, tập tin bố trí của bạn sẽ trông như thế này:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/findme"></ImageButton>

</RelativeLayout>

38
Có những trường hợp bạn cần sử dụng nội dung tuyến tính và trung tâm. Đây không phải là câu trả lời được chấp nhận. Sẽ tốt hơn nếu đề xuất sử dụng RelativeLayout nếu có thể, và nếu không làm thế nào để tập trung vào tuyến tính.
stevebot

Chưa kể đến việc RelativeLayout tốn nhiều thời gian chạy hơn do cách chúng phải đo kích thước của chúng, trong khi đó, linearLayout siêu đơn giản và hiệu quả hơn nhiều.
Trevor Hart

Nó đã bị phản đối? Nó có một lỗi.
瀧 谷 賢 司

436

Trung tâm sử dụng linearLayout:

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

    <ImageButton
        android:id="@+id/btnFindMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/findme" />
</LinearLayout>

11
Tuyến tính đơn giản và trọng lượng nhẹ hơn so với RelativeLayout, nên nhanh hơn một chút.
SurlyDre

3
Tôi đã sử dụng layout_gravity thay vì trọng lực. thay đổi sang android: vity = "centre" đã sửa lỗi này cho tôi. Lỗi tân binh.
ackushiw

@ackushiw cũng là vấn đề của tôi!
Denny

Ít nhất đối với tôi, thuộc tính android :vity = "centre" đã thực hiện thủ thuật này. Cảm ơn người anh em!
tthreetorch

42

Bạn đã thử xác định android:gravity="center_vertical|center_horizontal"bên trong bố cục và thiết lập android:layout_weight="1"trong hình ảnh?


2
Tôi thích tùy chọn này cho phép tôi giữ mi tuyến tính! (Tôi không phải cài đặt android:weight="1"nút ở giữa.)
Sébastien

4
android: lực hấp dẫn không hoạt động đối với tôi trong linearLayout ngang, nhưng android: layout_gravity thì có.
jfritz42

35

Một phương pháp thường được sử dụng để làm việc với bố cục tuyến tính là đặt thuộc tính trên nút hình ảnh

android:layout_gravity="center"

Bạn có thể chọn căn chỉnh trái, căn giữa hoặc căn phải cho từng đối tượng trong bố cục tuyến tính. Lưu ý rằng dòng trên là chính xác như

android:layout_gravity="center_vertical|center_horizontal"

4
Thêm thuộc tính android: vity = "centre" trong bố trí cha mẹ - giữ nút của bạn (các thành phần con).
Shekh Akther

bạn cũng cần android.orientation = "vertical" cộng với layout_gravity trong phần cha mẹ, còn gọi là phần tử LInearLayout ....
Joe Healy


8

Nếu bạn sử dụng, LinearLayoutbạn có thể thêm trọng tâm:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">
            <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            />
</LinearLayout>`

7

dễ dàng với điều này

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:visibility="visible" 
        android:gravity="center"
        android:orientation="vertical" >

        <ProgressBar
            android:id="@+id/pbEndTrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="Gettings" />
    </LinearLayout>


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

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:layout_gravity = "center"
        android:background="@drawable/findme">
    </ImageButton>

</LinearLayout>

Các mã trên sẽ hoạt động.


2

hoàn thành và làm việc mẫu từ máy của tôi ...

<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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:gravity="center"
    android:textAlignment="center">


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="My Apps!"
        android:id="@+id/textView"
        android:gravity="center"
        android:layout_marginBottom="20dp"
     />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:text="SPOTIFY STREAMER"
        android:id="@+id/button_spotify"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:text="SCORES"
        android:id="@+id/button_scores"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />


    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="LIBRARY APP"
        android:id="@+id/button_library"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="BUILD IT BIGGER"
        android:id="@+id/button_buildit"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="BACON READER"
        android:id="@+id/button_bacon"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

    <Button
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="CAPSTONE: MY OWN APP"
        android:id="@+id/button_capstone"
        android:gravity="center"
        android:layout_below="@+id/textView"
        android:padding="20dp"
        />

</LinearLayout>


bạn chỉ có thể sử dụng 'android: layout_below' cho anh chị em của 'RelativeLayout'
jazz

2

Theo tài liệu Android cho các thuộc tính XML của android: layout_gravity , chúng ta có thể làm điều đó một cách dễ dàng :)

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

    <ImageButton android:id="@+id/btnFindMe" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/findme"></ImageButton>

</LinearLayout>

1
android: layout_gravity = "centre" hoạt động tốt :) cảm ơn!
Amine Soumiaa

1

Đặt thành đúng android:layout_alignParentTop="true" android:layout_centerHorizontal="true"trong Nút, như thế này:

<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"
    >
     <Button
        android:id="@+id/switch_flashlight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/turn_on_flashlight"
        android:textColor="@android:color/black"
        android:onClick="action_trn"
        android:background="@android:color/holo_green_light"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="5dp" />
</RelativeLayout>

nhập mô tả hình ảnh ở đây


0

Bạn cũng có thể dùng thử Mã này:

<LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:orientation="horizontal"
            android:weightSum="2.0"
            android:background="@drawable/anyBackground" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:layout_weight="1" >

            <ImageView
                android:id="@+id/img_mail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/yourImage" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:layout_weight="1" >



<ImageView
            android:id="@+id/img_save"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@drawable/yourImage" />
        </LinearLayout>
        </LinearLayout>

Bạn có thể giải thích điều này khác với câu trả lời đã được cung cấp như thế nào không?
EWit

0

chỉ cần sử dụng (để đặt nó ở giữa bố cục của bạn)

        android:layout_gravity="center" 

Và sử dụng

         android:layout_marginBottom="80dp"

         android:layout_marginTop="80dp"

thay đổi tư thế


0

Bạn cũng có thể đặt độ rộng của linearLayout thành wrap_contentvà sử dụng android:layout_centerInParent, android:layout_centerVertical="true":

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>

<ImageButton android:id="@+id/btnFindMe" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"       
    android:background="@drawable/findme"/>


0

Đây là làm việc cho tôi.

android:layout_alignParentEnd="true"

-2

Bạn đã thử điều này?

  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px"
android:background="#303030"
>
    <RelativeLayout
    android:id="@+id/widget42"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    >
    <ImageButton
    android:id="@+id/map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="map"
    android:src="@drawable/outbox_pressed"
    android:background="@null"
    android:layout_toRightOf="@+id/location"
    />
    <ImageButton
    android:id="@+id/location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="location"
    android:src="@drawable/inbox_pressed"
    android:background="@null"
    />
    </RelativeLayout>
    <ImageButton
    android:id="@+id/home"
    android:src="@drawable/button_back"
    android:background="@null"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px"
android:orientation="horizontal"
android:background="#252525"
>
    <EditText
    android:id="@+id/searchfield"
    android:layout_width="fill_parent"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:background="@drawable/customshape"
    />
    <ImageButton
    android:id="@+id/search_button"
    android:src="@drawable/search_press"
    android:background="@null"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    />
</LinearLayout>
<com.google.android.maps.MapView
    android:id="@+id/mapview" 
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:clickable="true"
    android:apiKey="apikey" />

</TableLayout>

-2

sử dụng

android: layout_centerHTHER = "true"


1
Trên thực tế vogon101, đây là một thuộc tính hợp lệ trong RelativeLayout. :) Tuy nhiên, nó không trả lời câu hỏi, bởi vì người dùng đang sử dụng Tuyến tính và muốn tập trung cả theo chiều dọc và chiều ngang.
Sarah

-7

Sẽ dễ dàng hơn khi sử dụng bố cục tương đối, nhưng đối với bố cục tuyến tính, tôi thường căn giữa bằng cách đảm bảo chiều rộng khớp với cha mẹ:

    android:layout_width="match_parent"

và sau đó chỉ cần đưa ra lề phải và trái cho phù hợp.

    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.