如何在android中居中webview内容

时间:2015-05-31 20:59:10

标签: android webview android-webview centering news-feed

SCREENSHOT

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

2 个答案:

答案 0 :(得分:2)

尝试,

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

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

注意:由于WebView用于呈现脚本并在视图中显示,因此只要Web url的源不在中心对齐,您就无法对其进行更改。但是,您可以解析Web内容,然后以任何可自定义的方式显示它们。

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

答案 1 :(得分:1)

我通过添加

解决了我的问题
// 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上推送更改。无论如何,谢谢:)