2012-02-07 24 views
31

Tệp bố cục của tôi định nghĩa một WebView, bên dưới có một số nút chiều cao cố định.Cách thêm đệm quanh WebView

<?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" 
    android:fadingEdge="none"> 

    <WebView 
    android:id="@+id/webview" 
    android:layout_width="fill_parent" 
    android:layout_height="0dp" 
    android:layout_weight="1.0"/> 

    <LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="60dp" 
    android:padding="8dp"> 

    <Button 
     android:text="Decline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1.0"> 
    </Button> 

    <Button 
     android:text="Accept" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1.0"> 
    </Button> 

    </LinearLayout> 
</LinearLayout> 

Tôi đang cố gắng thêm đệm xung quanh WebView, tại thời điểm văn bản chạy ngay bên cạnh giao diện người dùng.

Tôi đã thử thêm android:padding="8dp" vào WebView, nhưng không có phần đệm được thêm vào. Tôi cũng đã thử paddingLeft và paddingRight quá, nhưng họ đã không làm việc hoặc.

Tài liệu API WebView xác nhận nó được kế thừa từ Chế độ xem, hỗ trợ thuộc tính android:padding, vì vậy tôi ngạc nhiên điều này không hiệu quả.

Có ai biết đây là vấn đề đã biết hay một số tương tác của XML bố cục mà tôi không hiểu?

FYI, workaround của tôi là đặt một LinearLayout thêm xung quanh WebView, và thêm padding để mà thay vào đó:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="0dp" 
    android:layout_weight="1.0" 
    android:padding="8dp"> 

    <WebView 
     android:id="@+id/webview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"/> 

    </LinearLayout> 
+0

Hãy thử lề thay vì đệm - Tôi nghĩ đó là những gì bạn muốn. Padding doesnt thực sự có ý nghĩa cho một WebView imo – AJcodez

+0

ý tưởng tốt, tuy nhiên tôi chỉ cố gắng thiết lập layout_marginRight và layout_marginLeft trên WebView trong XML ban đầu của tôi, và nó dẫn đến các nút bên dưới không được hiển thị. Tôi tự hỏi nếu có cái gì đó về cơ bản sai lý do tại sao bố trí của tôi? –

+0

Có vẻ như layout_weight của bạn được thiết lập không chính xác. Tại sao cho các nút layout_weight nếu chúng là wrap_content? – AJcodez

Trả lời

32

WebView có lỗi trong quá trình triển khai đệm. Đặt một padding trên một webview sẽ không pad trang web thực tế, nhưng S pad pad thanh cuộn. Nó chỉ hoạt động một phần như mong đợi. Giải pháp của bạn là cách tốt nhất để đạt được 'đệm' cho một WebView.

+1

Bạn có biết thiết lập layout_marginRight và layout_marginLeft cho WebView có hoạt động không? –

+0

có, điều đó sẽ hoạt động. – zrgiu

+0

Đây có phải là trường hợp không? Hoặc nó đã được cố định và có một cách để thêm đệm bây giờ? (không có giải pháp css/javascript). – wtk

-1

Sử dụng đệm KHÔNG workaround đây. đệm cho bố cục là có cho mục đích đó.

Vì vậy, 'giải pháp thay thế' của bạn là những gì bạn nên làm.

+0

Bạn đang nói giá trị android: padding không thể được đặt trên một WebView? –

+0

Nếu bạn nhìn vào mã nguồn của TextView.java, nó xem xét việc đệm trong onDraw(). Nhưng WebView.java thì không. Điều đó sẽ giải thích tại sao. – JonA

2

Chỉ cần cố gắng thêm CSS này:

<body style='margin:X;padding:X;'> 
+2

Tôi không nghĩ rằng câu trả lời này có liên quan đến câu hỏi. Trong khi tôi hiểu rằng nó có thể thực sự hoạt động, câu hỏi là về một vấn đề bố trí Android và không phải về nội dung html được hiển thị trong 'WebView'. –

+0

Cảm ơn giải pháp. Đây là cách tốt hơn để thêm phần đệm vào chế độ xem web vì chế độ xem truyền thống không hoạt động trên nội dung. –

17

Một cách giải quyết cho vấn đề này có thể là trong việc sử dụng javascript. Vì vậy, khi trang web của bạn được tải, bạn có thể thực hiện các cuộc gọi js đó để đặt paddings:

webView.setWebViewClient(new WebViewClient() { 
    @Override 
    public void onPageFinished(WebView view, String url) { 
     webView.loadUrl("javascript:document.body.style.margin=\"8%\"; void 0"); 
    } 
}); 
+3

Đây là một giải pháp tuyệt vời cho tôi, cảm ơn rất nhiều! – Booger

+0

Cộng một cho "void 0". Nếu không có javascript thì không chạy. –

1

Thêm LinearLayout adround it with padding.

+0

câu trả lời nên gửi mã này là một bình luận –

2

cách tiếp cận thay thế sẽ được thiết lập WebView bên trong một scrollview

Sau đó, bạn có thể thêm lề trái/phải để WebView và nó sẽ có được hiệu quả đệm. Tuy nhiên, scrolling sẽ được xử lý bởi ScrollView.

<ScrollView style="@style/MatchMatch"> 

    <WebView 
     android:id="@+id/my_web_view" 
     android:layout_marginLeft="@dimen/webViewMargin" 
     android:layout_marginRight="@dimen/webViewMargin" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"/> 
</ScrollView> 

Điều này sẽ khiến thanh cuộn được đặt bên ngoài WebView là hành vi mà tôi muốn cho ứng dụng của mình.

+1

Tại sao scrollview? Một FrameLayout đơn giản sẽ chỉ hoạt động và bạn sẽ không phải quan tâm đến các vấn đề cuộn lồng nhau có thể có. –

+1

Tôi đã chọn ScrollView vì tôi muốn thanh cuộn nằm đối diện với cạnh của ScrollView. Nếu tôi sử dụng FrameLayout, thanh cuộn sẽ chống lại chế độ xem web bên trong. – Voski

+0

Đây là cách tốt nhất để tạo hiệu ứng hình ảnh giống nhau. Phương pháp tiếp cận lề dẫn đến hành vi cuộn mà có vẻ sai. Tuy nhiên một cách tiếp cận tốt hơn những ngày này có thể được sử dụng 'NestedScrollView' thay thế. –

Các vấn đề liên quan