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

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

此项目的工程名称是: MyApplicationtest

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文件的javascript布局中, 可以看到 moveToScreenTwo 函数的主要功能是调用了 Android.moveToNextScreen() 函数, 关于 moveToNextScreen() 函数的定义是在 MainActivity.java 文件中定义的, 可以看出它的主要功能就是跳转到下一个页面, 而在函数前面加的 Android 是因为在bootstrap调用函数需要用到javascript, 而android studio连接到javascript的接口名称就是 Android, 这个主要是在 MainActivity,java 文件中的 webView.addJavascriptInterface(new WebAppInterface(this), "Android") 这边定义的.

5. 新建一个显示使用的 Activity
因为涉及到界面的跳转, 所以需要再新建一个显示用的 Activity, 具体步骤如下:
(1) 点击 app - New - Activity - Empty Activity, 修改 Activity Name 为 displayActivity, 之后保持默认设置, 点击 Finish 即可.
(2) 修改显示界面, 即 activity_displayActivity.xml 文件, 输入如下内容:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".canva2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="24dp"
        android:text="TextView"
        android:textSize="36sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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 中的组件实例的更多相关文章
	

    
								
  1. Android Studio 2.1及其以上版本中的instant run功能 介绍
		
    Android Studio 2.0及其以后版本中的instant run功能 介绍 转 https://blog.csdn.net/zy987654zy/article/details/514961 ...
    
		
    2. 
						
  2. bootstrap课程5 bootstrap中的组件使用的注意事项是什么
		
    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
    
		
    3. 
						
  3. Android Studio 2.2.2导入Eclipse中创建的项目
		
    最近随视频教程学习Android,原本都是用Adt写Android程序,中途教程换成了Android Studio,于是我自己下了android studio 2.2.2安装好,并下载好sdk,也跟着 ...
    
		
    4. 
						
  4. Android studio关于真机调试DDMS中的data文件夹打不开的解决方法
		
    由于做开发的时候想打开查看数据库存放的内容,在eclipse中数据库文件默认就在/data/data/应用包名/databases/数据库名,而用Android studio打开DDMS下面找时发现点 ...
    
		
    5. 
						
  5. 将Android studio的工程导入到eclipse中
		
    自从Android Studio(后面称AS)推出后,越来越多的项目都使用AS开发. AS往eclipse迁移的方法: 其实很简单,代码都是一样的,从AS工程中找到与Eclipse工程对应的文件,放到 ...
    
		
    6. 
						
  6. 把Android studio的日志导入目标文件中
		
    最好是在Android studio的命令行工具中进行命令操作. adb logcat -v time > /Users/z/log.txt adb logcat -v time > /U ...
    
		
    7. 
						
  7. Android Studio列表用法之一：ListView图文列表显示（实例）
		
    前言: ListView这个列表控件在Android中是最常用的控件之一,几乎在所有的应用程序中都会使用到它. 目前正在做的一个记账本APP中就用到了它,主要是用它来呈现收支明细,是一个图文列表的呈现 ...
    
		
    8. 
						
  8. Android Studio 学习笔记(三)：简单控件及实例
		
    控件.组件.插件概念区分 说到控件,就不得不区分一些概念. 控件(Control):编程中用到的部件 组件(Component):软件的组成部分 插件(plugin): 应用程序中已经预留接口的组件  ...
    
		
    9. 
						
  9. 第七十七篇：ref引用(在vue中引用组件实例)
		
    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. awk积累
			
    1. 计算一个文本中每一列的和 [root@centos ~]# cat aaa.txt [root@centos ~]# awk 'BEGIN{a=0;b=0;c=0}{a+=$1;b+=$2;c+ ...
    
			
    2. 
						
  2. Play Framework + ReactiveMongo 环境搭建
			
    Play!是一个full-stack(全栈的)Java/Scala Web应用框架,包括一个简单的无状态MVC模型,具有Hibernate的对象持续,一个基于Groovy的模板引擎,以及建立一个现代W ...
    
			
    3. 
						
  3. linux 系统中将数据写入文档不能立即保存问题的解决方法
			
    应用场景: 设备跑的是Linux系统,与PC上位机进行通信,上位机可以给Linux发送设备配置信息,Linux将配置信息写入文件中以备设备断电重启时使用. bug现象: 设备正常运行,设备配置信息为A ...
    
			
    4. 
						
  4. 使用 GNU autotools 改造一个软件项目
			
    使用 GNU autotools 改造一个软件项目 及永刚 jungle@soforge.com 2006 年 3 月 24 日  版本:0.3 本文不是一篇规范的教程,而是用一个软件项目作为例子,演 ...
    
			
    5. 
						
  5. AngularJS 1.4对动画系统进行了彻底的重构
			
    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...
    
			
    6. 
						
  6. qt 自动重启（两种方法）
			
    所谓自动重启就是程序自动关闭后在重新打开: 一般一个qt程序main函数如下: int main(int argc, char* argv[]) { QApplication app(argc, ar ...
    
			
    7. 
						
  7. postgres数据库小记
			
    因为工作中需要查询其他部门数据库,刚好是postgres数据库,用python链接的话,可以用psycopg2库,具体用法其实和MysqlDB是一样的,就是安装的时候遇到点问题. 安装的时候,提示:  ...
    
			
    8. 
						
  8. myeclipse2018的下载安装教程
			
    首先注意事项!!!!!!! 在安装破解前是不可以打开软件的 jdk版本不能是10版本,1.8或1.9都可以 附上MyEclipse2018的百度云下载链接: 链接:https://pan.baidu. ...
    
			
    9. 
						
  9. 记录 nginx和php安装完后的URL重写，访问空白和隐藏index.php文件的操作方法
			
    sudo cd /etc/nginx/; sudo vi fastcgi_params; 1.URL重写 如果你的url参数不是用?xxx传递,而是自定义的,比如用/xx/xx/xx的方式传递,那么在 ...
    
			
    10. 
						
  10. Hexo+NexT（二）：Hexo站点配置详解
			
    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...
    
			
    11.