Android studio 3.4.1 使用 bootstrap 中的组件实例

Posted ttweixiao-it-program

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android studio 3.4.1 使用 bootstrap 中的组件实例相关的知识，希望对你有一定的参考价值。

电脑环境: ubuntu18.04 + android studio 3.4.1 + bootsrtap4

Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中,基本的布局是通过书写 html 而设计的. 因此, 若既想要使用android studio方便烧录手机的功能, 又想使用 bootstrap 简单的页面布局, 那么问题的关键就是要学会在 XML 文件中调用 HTML 格式的文件. 以设计一个按钮, 并且点击会跳转到下一个界面为例说明如何在android studio中调用bootstrap方法, 具体步骤如下.

 

1. 在android studio上新建 Assets 文件夹

点击 app - New - Folder - Assets Folder.  之后会弹出一个窗口, 保持所有的默认设置, 点击 Finish. 这样你就可以在你的 app 目录下发现新增加的文件夹 asstes.

 

2. 在 assets 文件夹中新建 html 文件

点击assets - New - File, 输入文件名已经后缀名如 "layout1.html", 点击 OK.

点击 layout1.html文件, 输入以下内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 实例 - 点击按钮跳转页面</title>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="all.css" rel="stylesheet" type="text/css">
    <script src="all.js" ></script>
    <script src="jquery-3.3.1.slim.min.js" ></script>
    <script src="popper.min.js" ></script>
    <script src="bootstrap.min.js" ></script>
    <script defer src="all.js"></script>
    <title>Button</title>


    <script type="text/javascript">

        function moveToScreenTwo() 
        Android.moveToNextScreen();
        
        </script>

</head>

<body>
<div>
    <input type="button" value="Locate" onClick="moveToScreenTwo()" />
</div>

</body>
</html>

注意: 在头文件中, 这里包含了许多 js 文件, 仿真此程序的时候可以不加入这些, 按照需要适当添加, 但是这里需注意, 要是想要使用这些 js 文件的功能, 那么就必须把这个 js 文件同时放在 assets 文件夹下能不设置路径而调用它.

 

3. 要想让 XML 文件调用 HTML 文件, 必须设置在 XML 文件中调用 WebView 组件, 具体程序如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <WebView
        android:id="@+id/mybrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        />

</LinearLayout>

 4. 设置完了基本的显示图形, 想要正确使用 WebView组件, 还必须在 MainActivity.java文件中对它定义和配置, 具体实现步骤如下所示:

import androidx.appcompat.app.AppCompatActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends AppCompatActivity 

    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView) findViewById(R.id.mybrowser);
        webView.setWebViewClient(new WebViewClient());
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);

        webView.loadUrl("file:///android_asset/layout1.html");
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    


    //Class to be injected in Web page
    public class WebAppInterface 
        Context mContext;

        WebAppInterface(Context c) 
            mContext = c;
        

        @JavascriptInterface
        public void moveToNextScreen() 

            Intent i = new Intent(MainActivity.this,displayActivity.class);
            startActivity(i);
        
    



代码大致讲解: 在layout1.html中, 当点击按钮时, 调用了 moveToScreenTwo() 函数, 在html文件的script布局中, 可以看到 moveToScreenTwo 函数的主要功能是调用了 Android.moveToNextScreen()
函数, 关于 moveToNextScreen() 函数的定义是在 MainActivity.java 文件中定义的, 可以看出它的主要功能就是跳转到下一个页面, 而在函数前面加的 Android 是因为在bootstrap调用函数需
要用到javascript, 而连接到javascript的接口名称就是 Android, 这个主要是在 MainActivity,java 文件中的 webView.addJavascriptInterface(new WebAppInterface(this), "Android")
这边定义的.

6. 要想在第二个界面设置回到第一个界面按钮, 可以修改 AndroidManifest.xml 文件, 如果下图所示:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapplicationtest">

    <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/AppTheme">
        <activity android:name=".displayActivity"
            android:parentActivityName=".MainActivity">
            <!-- The meta-data tag is required if you support API level 15 and lower -->
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />
        </activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

7. 点击 Run - Run ‘app‘ 运行程序, 查看结果, 如下图所示:
技术图片

技术图片



到此为止, 一个基本的工程结果.　　


本人初学水平, 如有错误, 欢迎指正.
以上是关于Android studio 3.4.1 使用 bootstrap 中的组件实例的主要内容，如果未能解决你的问题，请参考以下文章
 

 ProGuard 优化通过了在 Android Studio 3.4.1 中突然生成构建时跳过的 5 条规则


 Android Error:(1, 0) Gradle version 2.2 is required. Current version is 3.4.1.


 在 USB 调试时，Android-Studio 无法使用 ArrayOutOfBounds 异常


 Android Studio无法构建具有交叉模块依赖性的模块


 着急使用android studio打包时，坑b gradle一直卡在gradle download maven metadata？


 着急使用android studio打包时，坑b gradle一直卡在gradle download maven metadata？