Android uses WebView to display web pages and androidwebview

Android uses WebView to display web pages and androidwebview

During Android development, you may need to display webpages or use the webview control to achieve a certain effect. I am working on a CSDN blog client during this time and use webview to display the content of a blog post. First, it is difficult to adapt the content of a blog post and the effect is not satisfactory. Later I thought of using webview to display it directly, present original blog posts.

Webview is easy to use, but it still requires a lot of exploration to achieve the desired effect. The CSDNBlog client I am working on is now basically usable and is already undergoing version iterations. However, the webview Display Effect of the blog is still unsatisfactory, mainly because of image scaling problems. Next let's look at the Code:

WebView = (WebView) findViewById (R. id. article_content); webView. setWebViewClient (new MyWebViewClient (); webView. getSettings (). setDefaultTextEncodingName ("UTF-8"); // solves Chinese Garbled text webView. getSettings (). setAppCacheEnabled (true); // sets the webView to start the cache. getSettings (). setCacheMode (WebSettings. LOAD_CACHE_ELSE_NETWORK); boolean isLoadImg = CSDNPreferences. getPreferenceSetting (this, getString (R. string. pre_key_loadImg), true); Log. I (TAG, "isLoadImg =" + isLoadImg); webView. getSettings (). setLoadsImagesAutomatically (isLoadImg); // webView. getSettings (). setJavaScriptEnabled (true); // webView. getSettings (). setDisplayZoomControls (true); // sets the display zoom button // webView. getSettings (). setsuppzoom zoom (true); // supports scaling // webView. getSettings (). setBuiltInZoomControls (true); // Method 1: // webView. getSettings (). setUseWideViewPort (true); // allows webview to read the viewport set by the web page. getSettings (). setLoadWithOverviewMode (true); // Method 2: webView. getSettings (). setLayoutAlgorithm (LayoutAlgorithm. NARROW_COLUMNS); // adapts to the content size // webView. getSettings (). setLayoutAlgorithm (LayoutAlgorithm. SINGLE_COLUMN); // adapts to the screen, and the content is automatically scaled.

The use of webview is mainly the configuration of its setting, and some common methods for annotation writing are clearer.

A blog can be viewed offline, so you do not need to enable caching. Each time you open a new blog, the source code of the obtained webpage is captured and the content of the article is stored in the database.

Currently, the remaining problem is image scaling: When a webpage is opened, the font display is fine, but the image display is too large. If the image width is greater than the screen width, the webview can slide horizontally, this experience is not good, and it makes the user feel very traffic-consuming. Find a solution on the Internet and get the two methods prompted in the Code (one method is recommended). In the first method, webview loads the webpage according to the viewport attribute set by the pc webpage.

<meta name="viewport" content="width=device-width" >

If the above settings are available, they can be adapted to mobile devices. If there is no such setting, the web page with pc layout will be displayed by default.

Method 2: like the annotation, the content of NARROW_COLUMNS remains unchanged and will automatically wrap the line according to the screen width. While SINGLE_COLUMN will increase the width of the content and scale the content, the effect is that the web page is reduced to be invisible even to text.

The third method I have not tried yet is to scale the webpage according to different dpi. It seems that the problem cannot be solved. You have to try the specific effect.

In fact, I want to modify the webpage source code to change the label attribute of the image and set the image width to the screen width. I am trying to do this.

You need to re-write a client class:

/*** Inherit from WebViewClient */class MyWebViewClient extends WebViewClient {// rewrite the shouldOverrideUrlLoading method, so that you do not open it in other browsers after clicking the link. @ Override public boolean shouldOverrideUrlLoading (WebView view, String url) {progressBar. setVisibility (View. VISIBLE); String bloger = Constants. DEFAULT_BLOG_USER_ID; Pattern pattern = null; System. out. println (url); if (url. matches (Constants. DEF_STR_REGEX.REGEX_DETAILS) {// link to the CSDN Blog content new maintask(cmd.exe cute (url); return true;} else if (url. matches (Constants. DEF_STR_REGEX.REGEX_BLOG) {// blog homepage patte Rn = Pattern. compile (Constants. DEF_STR_REGEX.REGEX_BLOG);} else if (url. matches (Constants. DEF_STR_REGEX.REGEX_CATEGORY) // blog list or category | url. matches (Constants. DEF_STR_REGEX.REGEX_BLOGLIST) {pattern = Pattern. compile (Constants. DEF_STR_REGEX.REGEX_LIST);} else {return false; // Let the system process the link request} Matcher matcher = pattern. matcher (url); if (matcher. find () {bloger = matcher. group (1);} CSDNApplication. getInstanc E (). setCurrentBlogerID (bloger); mDB. saveBloger (bloger); Intent intent = new Intent (); intent. setClass (BlogContentActivity. this, MainTabActivity. class); intent. putExtra (getString (R. string. app_name), Constants. DEF_BLOG_TYPE.BLOGERBLOG); startActivity (intent); BlogContentActivity. this. finish (); // if you do not need to process other Click link events, return true; otherwise, return false return true;} @ Override public void onPageFinished (WebView view, Strin G url) {super. onPageFinished (view, url); Log. I (TAG, "onPageFinished") ;}@ Override public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {super. onReceivedError (view, errorCode, description, failingUrl); Log. I (TAG, "onReceivedError"); // No network or error processing is performed here. You can determine the value of errorCode for detailed processing. }}

The Code has been pasted here, mainly for processing the links inside the webview webpage. If it is a CSDN blog, it is directly displayed on the current page, if it is a blog list, it will be displayed on the previous page. If it is another webpage link, it will be processed directly through the default android open method.

Other webview skills will be provided by the experts.

In this case