Android studio 混合编程(二)

Android studio 混合编程(一)里面讲的是直接加载了百度的首页,现在继续讲如何加入自己的Html 5 页面。

一、首先导入Html 5 项目文件

选择 app\src\main 菜单,右键选择New->Folder->Assets Folder 创建一个assets 文件夹,然后把所有html 5 相关的网页拷到这个文件夹里面。
Android studio 混合编程(二)_第1张图片

二、添加支撑代码

打开MainActivity.java文件(位置:详见Android studio 混合编程(一)),设置Assets 访问权限。

 //允许访问assets 目录
     webview.getSettings().setAllowFileAccess(true);

设置加载assets的路径,files后面是有三个斜杠的。index.html 指向的是html 5 项目文件的主网页,这里可以根据具体的文件名字做修改。

//指向assets文件路径的index.html
  String path = "file:///android_asset/index.html";

加载后html 5 网页的代码

 // 加载HTML页面
        webview.loadUrl(path);

Mainactivity.java 整体代码如下:

public class MainActivity extends AppCompatActivity {
    private WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview =(WebView)findViewById(R.id.webview);
         //设置WebView 属性,能够执行Javascript脚本
        webview.getSettings().setJavaScriptEnabled(true);
        //允许访问assets 目录
        webview.getSettings().setAllowFileAccess(true);
        //指向assets文件路径的index.html
        String path = "file:///android_asset/index.html";
        // 加载HTML页面
        webview.loadUrl(path);
        //设置字体不随系统设置变化
//        webview.getSettings().setTextZoom(100);
        //WebViewClient类 作用:处理各种通知 和请求事件
        webview.setWebViewClient(new HelloWebViewClient());
    }
    //Web视图
    private class HelloWebViewClient extends WebViewClient {
        @Override
        //这个方法,在web页面打开链接时,自动调用android自带的浏览器打开链接
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

修改完代码后,运行。在模拟机上查看效果。怎么运行模拟机?请查看Android studio 混合编程(一)。

运行的结果:这个h5项目是我模仿建设银行app写的练手项目,所以在一些小细节上不会太精细。
Android studio 混合编程(二)_第2张图片

图片上显示有 My Application 这个app的action bar,很不好看。要取消这个action bar。可以修改AndroidManifest.xml 里面的设置。

把 android:theme="@style/AppTheme" 改成:android:theme="@style/Theme.AppCompat.NoActionBar"

AndroidManifest.xml 整体代码如下:

 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.xxx.myapplication"
    android:versionCode="1"
    android:versionName="1.0"
    >
    <uses-sdk android:minSdkVersion="23" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            intent-filter>
        activity>
    application>
    <uses-permission android:name="android.permission.INTERNET"/>
manifest>

改完后再次运行,看下效果。

Android studio 混合编程(二)_第3张图片

后面如何打包成apk的步骤,可以参考这篇文章:
http://blog.csdn.net/woaichimahua/article/details/54427528

全部代码我已经分享到git上了:https://github.com/BokeChen/Android-Hybrid-JSYH.git
参考:
http://blog.csdn.net/Master_Miku/article/details/54913628
http://blog.csdn.net/woaichimahua/article/details/54427528

你可能感兴趣的:(android-studio)