không có trọng lực cho chế độ xem cuộn. cách làm cho nội dung bên trong scrollview làm trung tâm


104

Tôi muốn nội dung bên trong scrollView làm trung tâm.

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:layout_gravity="center" >

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="check" 
        android:gravity="center_vertical|center_horizontal"/>

</ScrollView>

Lưu ý: không có android:gravitythuộc tính cho scrollvew.

sol bất kỳ: -

Câu trả lời:


175

Tôi đã gặp vấn đề tương tự và cuối cùng đã tìm ra nó. Đây là cho một chiều dọc ScrollView.

Đặt ScrollViewbên trong của bạn a RelativeLayoutvà căn giữa nó trong RelativeLayout. Để điều này hoạt động, bạn ScrollViewnên có

android:layout_height="wrap_content"

Đây là cách mã cuối cùng sẽ trông như thế nào:

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

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_centerVertical="true" >

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

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b1"/>
            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b2"/>
            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b3"/>
        </LinearLayout>

    </ScrollView>

</RelativeLayout>

29
Câu trả lời này có vẻ phù hợp với tôi hơn câu trả lời được chấp nhận. Cảm ơn bạn!
Patrick Boos,

Tốt nhất là android nên xem xét vấn đề này khi có một hệ thống phân cấp của bố cục. Cũng nên cung cấp cả hai di chuyển (/ dọc ngang) tùy chọn trong một scrollview.BTW nhờ @hadi
mayank_droid

2
Đây là một chút hack, vì vậy trong khi điều này hoạt động tốt, nó cảm thấy sai.
DariusL

3
Này, nó đang hoạt động, nhưng không cuộn khi bàn phím hiển thị, tôi đã thử thêm vào tệp kê khai android:windowSoftInputMode="stateHidden|adjustResize"nhưng, không cuộn, làm ơn giúp tôi
Helio Soares Junior

3
Không cần sử dụng nặng RelativeLayoutnhư root view. Nó có thể được FrameLayoutandroid:layout_gravity="center_vertical"choScrollView
GrafOrlov

148

Còn cái này thì sao?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


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

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>

2
Vâng! Làm thế nào về điều đó! Điều này đã làm việc tuyệt vời cho tôi, vì vậy cảm ơn bạn rất nhiều, thưa ngài.
RileyE

Tuyệt vời! Điều này đã cứu tôi quá! Cảm ơn :)
marienke

101
Có một vấn đề với điều này. Nếu nội dung của bạn trong ScrollView lớn hơn chế độ xem cuộn, nó sẽ vẫn căn giữa và cắt bớt nội dung ở trên cùng (tuy nhiên, vẫn chưa rõ lý do). Có nghĩa là bạn không thể cuộn ở đó.
Patrick Boos,

7
PatrickBoos đã đúng; điều này dường như không hoạt động. Sử dụng câu trả lời của hadi bên dưới, căn giữa theo chiều dọc màn hình cuộn trong RelativeLayout.
Mason Lee

Vâng, cách này có lỗi, nội dung lớn hơn scrollview, nội dung sẽ không di chuyển đến hàng đầu, hàng đầu của ông là số âm, lạ :(
Kross

98

Tôi nghĩ rằng một giải pháp thanh lịch hơn sẽ sử dụng ScrollView's android:fillViewporttài sản. A ScrollViewcó một chút khác biệt về cách nó xử lý chế độ xem nội dung (chỉ có thể có một), ngay cả khi bạn đặt match_parent( fill_parent) thành ScrollViewnó sẽ không cung cấp nhiều khoảng cách như vậy cho chế độ xem nội dung, thay vào đó, hành vi mặc định là ScrollViewđể bao bọc nội dung bất kể những gì bạn chỉ định cho chế độ xem đó. Điều gì android:fillViewportcó nghĩa là ScrollViewkéo dài nội dung của nó để lấp đầy khung nhìn ( http://developer.android.com/reference/android/widget/ScrollView.html#attr_android:fillViewport ). Vì vậy, trong trường hợp này, của bạn LinearLayoutsẽ được kéo dài để phù hợp với khung nhìn và nếu chiều cao vượt ra sau khung nhìn thì nó sẽ có thể cuộn được chính xác là những gì bạn muốn!

Câu trả lời được chấp nhận sẽ không hoạt động đúng khi nội dung mở rộng ra ngoài ScrollViewvì nó vẫn sẽ căn giữa chế độ xem nội dung trước tiên khiến nó cắt bỏ một phần của chế độ xem và căn ScrollViewgiữa trong một bố cục khác hoạt động nhưng cảm thấy không ổn, bên cạnh đó Tôi nghĩ rằng nó cũng sẽ dẫn đến một lỗi lint (cha mẹ vô dụng hoặc một cái gì đó dọc theo những dòng đó).

Hãy thử một cái gì đó như sau:

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:fillViewport="true">

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

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" />

    </LinearLayout>

</ScrollView>

Chỉ cần nhớ rằng lý do nó đang được làm trung tâm ở đây bây giờ là vì android:gravitytrên LinearLayoutkể từ khi ScrollViewsẽ căng LinearLayoutđể giữ cho rằng trong tâm trí phụ thuộc vào những gì bạn thêm vào cách bố trí.

Tốt khác đọc trên ScrollViewmặc dù không phải về trung nhưng về fillViewporthttp://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/


11
Đây có vẻ là cách triển khai chính xác nhất, không cần xem thêm.
DariusL

1
Giải pháp tốt, có vẻ là giải pháp sạch nhất đối với tôi. Cảm ơn cho nó
Benjamin Scharbau

2
Hoạt động tốt hơn câu trả lời được chấp nhận, bạn đã tiết kiệm cho tôi rất nhiều thời gian! Thực sự rất tốt Brian Ethier!
Mattia Ruggiero

Đây là giải pháp chính xác, vì tất cả lý do được mô tả trong đó .. Nếu bạn thử giải pháp ở trên và chế độ xem cuộn của bạn rộng hơn màn hình, bạn sẽ thực sự không thể truy cập được một phần của chế độ xem cuộn và không thể cuộn đến nó .. . Đây nên được chấp nhận như một giải pháp thích hợp
Speckpgh

1
Stackoverflow điển hình .. giải pháp chính xác thường ở đâu đó ở giữa.
Teovald

14

Sử dụng thuộc tính này trong ScrollView

android:fillViewport="true"

Thí dụ

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
android:fillViewport="true"
>
   <RelativeLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

         <!--Your Code goes here-->

   </RelativeLayout>

</ScrollView>

Đảm bảo sử dụng Single Child trong ScrollView giống như trong ví dụ trên là Relativelayout.


@JoshuaKing có thể là vì nó là câu hỏi 7 tuổi và tôi đã đăng câu trả lời này gần đây 9 tháng trước.
Abhishek Garg

Ha! ồ .. sự thật. 😆 Ồ, nó hoạt động hoàn hảo! Vì vậy, cảm ơn!
Joshua King

1
Đây chắc chắn phải là câu trả lời được chấp nhận! Nó hoạt động hoàn hảo và tập trung một ScrollView nếu nội dung nhỏ hơn kích thước vùng chứa. Hoạt động cho cả ScrollView và HorizontalScrollView. Cảm ơn bạn rất nhiều! 💝💖
Ray Li

điều này có thể gây ra hậu quả không mong muốn là kéo dài nội dung của bạn bên trong chế độ xem cuộn
martinseal1987

@ martinseal1987 Tôi nghĩ rằng hiệu ứng sẽ phụ thuộc vào thành phần con của bạn, rằng cách bạn thiết kế bố cục của mình, mặc dù nếu điều này không phù hợp với bạn, bạn có thể tạo thành phần chế độ xem cuộn tùy chỉnh của riêng mình theo nhu cầu thiết kế và công việc của bạn. và cũng vui lòng chia sẻ ảnh chụp màn hình kết quả mong muốn của bạn với tôi, để tôi có thể xem xét và có thể cung cấp giải pháp hiệu quả và tốt hơn của bạn. sẵn sàng giúp đỡ. hoan hô.
Abhishek Garg

9

Đối với @Patrick_Boss - điều đã ngăn nội dung bị cắt trong ứng dụng của tôi là thay đổi trọng lực và layout_gravity thành center_horizontal cho LinearLayout.

Nó có hiệu quả với tôi ... nhưng không chắc liệu nó có hiệu quả với bạn hay không.

Sửa đổi câu trả lời của @ Ghost -

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


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

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>

1
Điều này giải quyết vấn đề cắt bỏ đầu. Nhưng vẫn còn một vấn đề với giải pháp này. Nội dung ScrollView không được căn giữa theo chiều dọc. Nhưng điều này có thể được khắc phục bằng cách đặt các giá trị sau của ScrollView: android: layout_height = "wrap_content" android: layout_gravity = "center_vertical"
Patrick Boos

Tôi nhận thấy rằng để điều này hoạt động trong các bố cục khác, ScrollView trên cùng phải được nhúng trong FrameLayout.
Theo

1

Một điều cần xem xét là những gì KHÔNG được đặt . Hãy chắc chắn rằng con bạn kiểm soát, đặc biệt là EditTextkiểm soát, không được đặt thuộc RequestFocustính.

Đây có thể là một trong những thuộc tính được diễn giải cuối cùng trên bố cục và nó sẽ ghi đè cài đặt trọng lực trên cha mẹ của nó ( layouthoặc ScrollView).


0

bằng cách sử dụng dạng xem cuộn bên trong ConstraintLayout. Nó được làm việc cho tôi

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" />
            </ScrollView>
        </androidx.constraintlayout.widget.ConstraintLayout>

Chiều cao của chế độ xem cuộn phải là wrap_content

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
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.