如何在android中将webview内容居中

Question

屏幕截图：

https://camo.githubusercontent.com/7c4b76724b703bcded8aafbba9c012542726462c/687474703a2f2f692e696d6775722e636f6d2f716375554d664a2e706e6725374275726c253744

您好，有什么方法可以让文章的文字和图片居中？

这是布局文件：

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ptr="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:gravity="center">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text=""
        android:textSize="20sp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold" />
    </RelativeLayout>

    <ScrollView
        android:id="@+id/sv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/header" >

        <LinearLayout
            android:id="@+id/lin"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <WebView
                android:id="@+id/desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:scrollbarStyle="insideOverlay"
                android:text="@string/desc" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Java 代码

package com.iven.lfflfeedreader.mainact;

import com.iven.lfflfeedreader.R;
import com.iven.lfflfeedreader.domparser.RSSFeed;    
import android.os.Bundle;    
import android.support.v4.app.Fragment;    
import android.view.LayoutInflater;    
import android.view.View;    
import android.view.ViewGroup;    
import android.webkit.WebSettings;    
import android.webkit.WebView;    
import android.webkit.WebSettings.LayoutAlgorithm;    
import android.widget.ScrollView;    
import android.widget.TextView;


public class ArticleFragment extends Fragment {
    private int fPos;    
    RSSFeed fFeed;

    @Override    
    public void onCreate(Bundle savedInstanceState) {    
        super.onCreate(savedInstanceState);  
        fFeed = (RSSFeed) getArguments().getSerializable("feed");    
        fPos = getArguments().getInt("pos");    
    }

    @Override    
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {    
        View view = inflater    
                .inflate(R.layout.article_fragment, container, false);
        TextView title = (TextView) view.findViewById(R.id.title);    
        WebView wb = (WebView) view.findViewById(R.id.desc);
        ScrollView sv = (ScrollView) view.findViewById(R.id.sv);
        sv.setVerticalFadingEdgeEnabled(true);

        // Set webview settings    
        WebSettings ws = wb.getSettings();    
        ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

        // Set the views    
        title.setText(fFeed.getItem(fPos).getTitle());   
        wb.loadData(fFeed.getItem(fPos).getDescription(), "text/html; charset=utf-8", "UTF-8");
        return view;    
    }
}

应用程序的源代码可在此处获得

谢谢

https://github.com/enricocid/lffl-feed-reader

Answer 1

试试，

wb.getSettings().setDefaultZoom(ZoomDensity.FAR);

这将缩小图像并使其适合您的屏幕并显示在中心。

注意：因为 WebView 用于渲染脚本并在视图中显示，所以只要 web url 的来源没有居中对齐，就无法更改它。但是，您可以解析 Web 内容，然后以您想要的任何可自定义的方式显示它们。

到目前为止，您所说的 github 项目也使用了相同的方法。一个名为 Jsoup 的 html 解析器用于解析 html 内容并显示在视图中。

Answer 2

我已经通过添加解决了我的问题

// set image scale to fit screen if larger than screen width
    DisplayMetrics displayMetrics = new DisplayMetrics();
    WindowManager wm = (WindowManager) view.getContext().getSystemService(Context.WINDOW_SERVICE);
    wm.getDefaultDisplay().getMetrics(displayMetrics);
    int screenWidth = displayMetrics.widthPixels; // minus some padding values if you have any left/right padding
    Drawable drawable = getResources().getDrawable(R.id.image);
    int wi = drawable.getIntrinsicWidth();

    double scale = (wi>screenWidth) ? (double)screenWidth/wi : 1.0;
    wb.setInitialScale((int) (scale*340));'code'

现在图像位于摘要下方的中心和文章条目的顶部...:) 稍后将在 git 上推送更改。无论如何谢谢:)