实现LayoutAlgorithm.SINGLE_COLUMN算法?

时间:2015-03-02 20:12:17

标签: android css webview

我需要在gmail应用中显示html内容,以显示更具可读性的消息内容。

我尝试的第一步是将自定义和常用css应用于所有邮件内容。但它对媒体查询反应不佳,而且各种内容各不相同。此外,图像的比例不正确。

所以我决定使用LayoutAlgorithm.SINGLE_COLUMN。除了多列表之外,它的工作方式与我期望的低级设备完全相同。但对于设备> ktikat,它似乎已被弃用。

我还有其他方法可以实现LayoutAlgorithm.SINGLE_COLUMN算法吗?或者有替代品吗?非常感谢任何帮助。

3 个答案:

答案 0 :(得分:0)

word-wrapping no longer supported

在Android 4.4(Kitkat)之后,通过集成chrome,从Web视图中删除了文本重排。

在讨论这个问题的论坛上进行了讨论,并且已经宣布了这个问题的回复已经宣布了#34;按目的工作"项目成员明确表示没有改变方向的计划。

这就是提到的:

"将此称为错误可能有点不准确 - 似乎Google打算删除文本重排。也许这家搜索巨头真的厌倦了等待网络开发者支持移动设备,并决定对此更加积极。也许这只是谷歌引入改进的更智能算法的先兆。毕竟,将内容强制转换为单个窄列的方法有点破解并且容易出现其自身的一组不良行为。无论情况如何,除了希望从更广阔的网络发展世界中快速转变之外,我们还无法做到很多事情"。

答案 1 :(得分:0)

您可以使用Google Mobilizer服务处理您的网页,该服务会对内容进行大量简化转换。例如:http://www.google.com/gwt/x?u=http://cnn.com/

答案 2 :(得分:0)

如您所知,SINGLE_COLUMN算法会将某些样式应用于给定的html页面,以将html内容放在单个列中。因此,我们可以通过将CSS注入加载的html页面的<head/>部分来更改html页面的样式属性。包括的步骤是,

  1. 以编程方式下载html源代码并以String对象的形式存储。
  2. 将您的CSS样式注入html页面。即,您必须准备一个将覆盖html页面上所有其他样式的CSS样式。

  3. 在您的java代码中,通过调用injectCssToHtmlCode()将CSS注入下载的html字符串,然后将返回的htmlString加载到webview。

    // bufferHtmlString有html源代码         webView.loadData(injectCssToHtmlCode(bufferHtmlString.toString()),“text / html”,“utf-8”);

  4. 方法injectCssToHtmlCode()

  5. 	private String injectCssToHtmlCode(String downloadedHtmlCode) {
    		String head = "<head><meta name='viewport' "+
    				"content='initial-scale=1.0, "+
    				"maximum-scale=1.0, "+
    				"minimum-scale=1.0, "+
    				"height=device-height, "+
    				"width=device-width, "+
    				"target-densityDpi=device-dpi' /> "+
    				"		<style type='text/css'>	"+																																																																					
    				"	html.body {width:50% !important;  height:auto !important;  max-width:100% !important; }	"+
    
    "	body {word-break:break-all !important;  margin:0px !important;  padding:2px !important; }"+
    "	h1 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;   }"+																																						
    "	h2 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	h3 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	h4 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	h5 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	h6 {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	hr {max-width:100% !important;  height:auto !important;  margin-left:0px !important;  margin-right:0px !important;  padding:1px !important;  border:none}"+																																						
    
    "	p {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  width:100% !important; word-wrap: break-word !important;} "+																																		
    "	pre {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  white-space:pre-wrap !important; }"+																																						
    "	form {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;}	"+																																					
    
    "	dl {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;}	"+																																					
    "	ul {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px 1em !important; width:100% !important; word-wrap: break-word !important;}	"+																																					
    "	ol {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px 1.5em !important; width:100% !important; word-wrap: break-word !important;}"+																																						
    "	dir {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;}		"+																																				
    "	div {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  background-color:#FF0055   !important;  width:100% !important; word-wrap: break-word !important;}	"+																																					
    
    "	marquee {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }	"+																																					
    "	table {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;   word-wrap: break-word !important;}"+	
    "	table input[type='text'] {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  width:100% !important; word-wrap: break-word !important;}"+																																						
    "	table input[type='file'] {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  width:100% !important; word-wrap: break-word !important;}"+																																						
    "	table textarea {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;  width:100% !important; word-wrap: break-word !important;}	"+
    
    "	tr {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;   word-wrap: break-word !important;}	"+																																					
    "	td {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important;   word-wrap: break-word !important;}	"+																																					
    "	input {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; word-wrap: break-word !important;}	"+																																					
    "	textarea {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; word-wrap: break-word !important;}"+																																						
    																																					
    "	select {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }		"+																																				
    "	a {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; word-wrap: break-word !important;}	"+																																					
    "	object {max-width:100% !important;  height:auto !important;  margin:1px 0px !important;  padding:2px 0px !important; }"+																																						
    "	img {max-width:100% !important;  margin:1px 0px !important;  padding:2px 0px !important; }			"+																																			
    "	marquee[behavior='alternate'] {display:block !important;  overflow:-webkit-marquee !important;  max-width:100% !important;  -webkit-marquee-style:alternate !important; }	"+																																					
    "	.wb{word-break:break-all !important; }	"+
    
    "	@-webkit-keyframes blink {	"+																																					
    "	  0% { opacity: 0 }			"+																																			
    "	  50% { opacity: 0 }		"+																																				
    "	  50.01% { opacity: 1 }  100% { opacity: 1 }"+																																						
    "	}											"+																											
    "	blink {					"+																																	
    "	  -webkit-animation: blink 0.7s infinite linear alternate !important; 	"+																																					
    "	  -webkit-font-smoothing: antialiased !important; 						"+																																
    "	}					"+																																	
    
    "</style></head>";
    		return "<html>" + head + "<body>" + downloadedHtmlCode + "</body></html>";
    	}