代码之家  ›  专栏  ›  技术社区  ›  Ibrahim Disouki

Android Crosswalk项目:如何使用css?

  •  0
  • Ibrahim Disouki  · 技术社区  · 9 年前

    我创建了一个新的测试项目 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。

    以下是我如何嵌入Crosswalk项目:

    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'
    }
    
    2 回复  |  直到 9 年前
        1
  •  0
  •   Jacky Young    9 年前

    我们的开发人员已经解决了您的问题,您可以添加 file:///android_asset/ 喜欢 XWalkView.load("file:///android_asset/", content); 使css工作,无需在css文件中添加任何完整路径。 src: url('fonts/DejaVuSans.ttf'); 也将起作用。关于你关于android的人行横道示例的第二个问题,你可以在 embeddingapi embeddingapi-async 它们是使用人行横道的两种方式(同步和异步)。

        2
  •  0
  •   Iharob Al Asimi    8 年前

    我来自Crosswalk队。我已经在本地复制了你的代码,这是一个暂时的错误,我们知道,你可以在这里跟踪它 XWALK-6541 。如果您愿意,我可以为您提供第二种使用css的方法。你可以使用 XWalkView.load("file:///android_asset/page.html", null) ,它工作得很好。如果你还有其他问题,请告诉我。谢谢

    推荐文章