android bootstrap功能,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文件, 输入以下内容

Bootstrap 实例 - 点击按钮跳转页面Button

function moveToScreenTwo() {

Android.moveToNextScreen();

}

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

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

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:id="@+id/mybrowser"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center_horizontal"

/>

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中, 当点击按钮时, 调用了

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=".displayActivity">

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" />

6. 要想在第二个界面设置回到第一个界面按钮, 可以修改 AndroidManifest.xml 文件, 如果下图所示:<?xml version="1.0" encoding="utf-8"?>

package="com.example.myapplicationtest">

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">

android:parentActivityName=".MainActivity">

android:name="android.support.PARENT_ACTIVITY"

android:value=".MainActivity" />

本人初学水平, 如有错误, 欢迎指正.