安卓人行横道元素 : How to use css
虾米姐
阅读：217
2024-01-12 21:14:41
评论：0
我创建了一个新元素来测试Crosswalk Project。
我正在尝试使用 css 文件加载一些内容，但 css 根本不起作用。 来自 MainActivityFragment 的代码:
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkSettings;
import org.xwalk.core.XWalkView;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
private XWalkView xWalkWebView;
private View mContentView;
private static final String page = "<html>\n" +
" <head>\n" +
"\n" +
" <link href=\"primary.css\" rel=\"stylesheet\" type=\"text/css\"/>\n" +
"\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>\n" +
"\n" +
" </head>\n" +
"\n" +
" <body>\n" +
"\n" +
" <ol>\n" +
"<li>Harum aut nostrum</li>\n" +
"</ol>\n" +
"<ol>\n" +
"<li>Saepe aut non numquam</li>\n" +
"<li>Sed aliquid</li>\n" +
"<li>Quo rerum quia veniam dolore</li>\n" +
"<li>Doloribus dolores</li>\n" +
"<li>Excepturi adipisci ad enim consequatur</li>\n" +
"<li>Enim qui autem iure aut deserunt</li>\n" +
"<li>Minima natus ratione rerum officia</li>\n" +
"<li>Non sed et eveniet aut</li>\n" +
"</ol>\n" +
"<p><iframe width=\"840\" height=\"473\" src=\"https://www.youtube.com/embed/10r9ozshGVE?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe></p>\n" +
"<p>Facere <a title=\"Qui.\" href=\"https://rohan.net/magnam-rerum-repudiandae-est-cupiditate-ea.html\">id</a> nemo. Quasi dolorem est et. Modi aperiam est magni. Necessitatibus non labore ut qui atque Aliquam modi dolores nulla odit. Placeat vel vel quia nisi distinctio. Dolores <a title=\"Reprehenderit dolor blanditiis.\" href=\"http://batz.org/maxime-totam-sed-voluptatum-explicabo-voluptas-distinctio\">porro autem rerum</a> ex. Consequuntur quia quia Quod voluptas dolorem accusamus nemo. Tempora nostrum iste qui vel Non esse aut aut ut ducimus. sit est sed ad. <a title=\"Eos minus.\" href=\"http://dooley.net/possimus-impedit-enim-ex-numquam-qui-esse\">unde quibusdam in tempore et</a> eum recusandae. Molestiae omnis harum consequatur officia. adipisci iure libero voluptatem necessitatibus est.</p>\n" +
"<p><img src=\"https://reviworx.com/~reviworx/dev/wp_frm/wp-content/uploads/2016/03/f46d91f8-8923-3a0a-a6f8-7413399aa33e.jpg\" alt=\"Totam voluptatem\" /></p>\n" +
"<h6>Minus corrupti explicabo amet aut suscipit. Porro rerum corrupti a</h6>\n" +
"<p><img class=\"alignright\" src=\"https://reviworx.com/~reviworx/dev/wp_frm/wp-content/uploads/2016/03/e3b46cb3-6f7c-383e-abc0-194e31ad37ee.jpg\" alt=\"Labore a adipisci in modi sunt\" /></p>\n" +
"\n" +
"\n" +
" </body>\n" +
" </html>";
public MainActivityFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mContentView = inflater.inflate(R.layout.fragment_main, container, false);
xWalkWebView = (XWalkView) mContentView.findViewById(R.id.xwalkWebView);
xWalkWebView.setInitialScale(1);
XWalkSettings settings = xWalkWebView.getSettings();
if(settings != null) {
// settings.setBuiltInZoomControls(true);
// settings.setSupportZoom(true);
settings.setDefaultFontSize(20);
// if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
//
// settings.setDisplayZoomControls(false);
//
// }
}
// xWalkWebView.load("https://crosswalk-project.org", null);
xWalkWebView.load(null, page);
// turn on debugging
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
return mContentView;
}
@Override
public void onPause() {
super.onPause();
if (xWalkWebView != null) {
xWalkWebView.pauseTimers();
xWalkWebView.onHide();
}
}
@Override
public void onResume() {
super.onResume();
if (xWalkWebView != null) {
xWalkWebView.resumeTimers();
xWalkWebView.onShow();
}
}
@Override
public void onDestroy() {
super.onDestroy();
if (xWalkWebView != null) {
xWalkWebView.onDestroy();
}
}
}
这是我的 CSS 文件:
@font-face {
font-family: 'thesansarabic';
/* src: url('DejaVuSans.ttf'); This doesn't work */
/* src: url('fonts/DejaVuSans.ttf'); Neither is this */
src: url('file:///android_asset/fonts/thesansarabic-plain.otf'); /* but this does */
}
body {
font-size: small;
font-family: 'thesansarabic';
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
padding-top: 48px;
padding-right: 10px;
padding-bottom: 48px;
padding-left: 10px;
box-sizing: border-box;
/*direction: ltr;*/
}
img {
max-width: 100%;
width: auto;
height: auto;
}
/*iframe, video {
max-width: 100%;
}*/
/* Portrait */
@media screen
and (orientation: portrait) {
iframe, video {
max-width: 100%;
max-height 40%;
height: 250px;
}
}
/* Landscape */
@media screen
and (orientation: landscape) {
iframe, video {
max-width: 60%;
max-height 30%;
height: 200px;
}
}
注意:此代码适用于默认的 android webview。
以下是我如何嵌入人行横道元素:
repositories {
maven {
url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.android.support:design:23.2.1'
compile 'org.xwalk:xwalk_core_library:17.46.448.10'
}
请您参考如下方法:
我们的开发人员已经解决了您的问题，您只需添加 file:///android_asset/ 就像 XWalkView.load("file:///android_asset/", content); 使 css 工作，无需在 css 文件中添加任何完整路径。 src: url('fonts/DejaVuSans.ttf'); 也可以。关于 android 上的人行横道示例的第二个问题，您可以在 embeddingapi 上找到大多数 android 嵌入 api 的用例。或 embeddingapi-async .它们是使用人行横道的两种方式(同步和异步)。
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
