在 Android Studio 中动态显示 HTML 文件

Santini Tom

于 2024-06-13 21:40:38 发布

阅读量343

点赞数 6

文章标签： android studio android html

本文链接：https://blog.csdn.net/weixin_61189911/article/details/139664866

版权

在开发 Android 应用时，有时需要动态修改 WebView 中加载的 HTML 内容。在这篇博客中，我们将介绍如何在 Android Studio 中实现这一功能。具体来说，我们将展示如何使用 JavaScript 来动态修改 HTML 文件中的内容。我们会以一个显示植物详细信息的示例为基础来进行讲解。

准备工作

首先，我们需要准备一个简单的 HTML 文件，存放在 assets 文件夹中。这个 HTML 文件包含一个展示植物详细信息的卡片。下面是 HTML 文件的内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .card {
            width: 400px;
            height: 350px;
            --black: #000000;
            --ch-black: #141414;
            --eer-black: #1b1b1b;
            --night-rider: #2e2e2e;
            --white: #ffffff;
            --af-white: #f3f3f3;
            --ch-white: #e1e1e1;
            font-family: Helvetica, sans-serif;
            transform: scale(1.10);
        }

        .wrapper {
          margin: 2rem auto;
          width: 250px;
          font-size: small;
        }

        .title {
          text-align: center;
          color: #1b1b1b;
        }

        .heading {
          font-weight: bold;
          letter-spacing: 7px;
          font-size: 1.5rem;
          position: relative;
          margin-bottom: 6px;
        }

        .heading::before {
          content: '';
          position: absolute;
          inset: 0;
          background: #e8e8e8;
          z-index: -1;
          filter: blur(50px);
          height: 50px;
        }

        .color {
          padding: 10px 20px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .hex {
          text-align: end;
          font-family: monospace;
          text-transform: uppercase;
        }

        .black {
          background: var(--black);
          color: var(--ch-white);
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }

        .eerie-black {
          background: var(--ch-black);
          color: var(--ch-white);
        }

        .chinese-black {
          background: var(--eer-black);
          color: var(--ch-white);
        }

        .night-rider {
          background: var(--night-rider);
          color: var(--ch-white);
        }

        .chinese-white {
          background: var(--ch-white);
          color: var(--night-rider);
        }

        .anti-flash-white {
          background: var(--af-white);
          color: var(--night-rider);
        }

        .white {
          background: var(--white);
          color: var(--night-rider);
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }

        .border {
          color: var(--night-rider);
          padding: 10px 10px;
          text-align: center;
        }

        .border span {
          border-radius: 5px;
          color: var(--ch-white);
          padding: 2px 4px;
          background-color: var(--night-rider);
        }
    </style>
</head>
<body>
<div class="card">
    <div class="card">
        <div class="title">
            <p class="heading">栀子花</p>
        </div>
        <div class="wrapper">
            <div class="color black">
                是否有毒
                <span class="hex">对人类与宠物无毒</span>
            </div>
            <div class="color eerie-black">
                是否为花卉
                <span class="hex">未报道为花卉</span>
            </div>
            <div class="color chinese-black">
                入侵植物
                <span class="hex">未报道为入侵植物</span>
            </div>
            <div class="color night-rider">
                植物类型
                <span class="hex">草本, 灌木</span>
            </div>
            <div class="color chinese-white">
                生长周期
                <span class="hex">多年生</span>
            </div>
            <div class="color anti-flash-white">
                种植时间
                <span class="hex">春天, 夏天, 秋天</span>
            </div>
            <div class="color white">
                作用
                <span class="hex">无</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

动态加载 HTML 内容

在我们的 Android 项目中，我们需要一个 WebView 来加载这个 HTML 文件，并在文件加载完成后，通过 JavaScript 动态修改其中的内容。

设置 WebView

首先，在布局文件中添加一个 WebView 控件：

<!-- res/layout/activity_wiki.xml -->
<WebView
    android:id="@+id/wiki_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

然后，在对应的 Activity 类中设置 WebView：

// WikiActivity.java

public class WikiActivity extends AppCompatActivity {
    private WebView defaultContent;
    private PlantDetailsRepository plantDetailsRepository;
    private String species, isPoisonous, isFlower, isInvasive, plantType, growthCycle, plantingTime, function;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wiki);

        plantDetailsRepository = new PlantDetailsRepository();

        String plantName = "栀子花"; // 这个名字可以是通过Intent传递的，或者其他方式获得
        PlantDetails plantDetails = plantDetailsRepository.getPlantDetailsBySpecies(plantName);

        if (plantDetails != null) {
            species = plantDetails.getSpecies();
            isPoisonous = plantDetails.getIsPoisonous();
            isFlower = plantDetails.getIsFlower();
            isInvasive = plantDetails.getIsInvasive();
            plantType = plantDetails.getPlantType();
            growthCycle = plantDetails.getGrowthCycle();
            plantingTime = plantDetails.getPlantingTime();
            function = plantDetails.getFunction();
        } else {
            System.out.println("No plant details found for the given species.");
        }

        defaultContent = findViewById(R.id.wiki_content);
        defaultContent.getSettings().setJavaScriptEnabled(true);
        defaultContent.loadUrl("file:///android_asset/wiki.html");

        // 在HTML文件加载完成后，执行JavaScript函数来修改HTML内容
        defaultContent.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                String javascript = generateJavascript();
                defaultContent.evaluateJavascript(javascript, null);
            }
        });
    }

    private String generateJavascript() {
        // Generate the JavaScript code to modify the HTML content
        String javascript = "javascript:(function() { " +
                "document.querySelector('.heading').innerText = '" + species + "'; " +
                "document.querySelector('.black .hex').innerText = '" + isPoisonous + "'; " +
                "document.querySelector('.eerie-black .hex').innerText = '" + isFlower + "'; " +
                "document.querySelector('.chinese-black .hex').innerText = '" + isInvasive + "'; " +
                "document.querySelector('.night-rider .hex').innerText = '" + plantType + "'; " +
                "document.querySelector('.chinese-white .hex').innerText = '" + growthCycle + "'; " +
                "document.querySelector('.anti-flash-white .hex').innerText = '" + plantingTime + "'; " +
                "document.querySelector('.white .hex').innerText = '" + function + "'; " +
                "})()";
        return javascript;
    }
}

植物详情数据类

我们需要一个类来存储植物的详细信息：

// PlantDetails.java

public class PlantDetails {
    private String species;
    private String isPoisonous;
    private String isFlower;
    private String isInvasive;
    private String plantType;
    private String growthCycle;
    private String plantingTime;
    private String function;

    private String englishName;

    // 构造函数
    public PlantDetails(String species, String isPoisonous, String isFlower, String isInvasive, String plantType, String growthCycle, String plantingTime, String function,String englishName) {
        this.species = species;
        this.isPoisonous = isPoisonous;
        this.isFlower = isFlower;
        this.isInvasive = isInvasive;
        this.plantType = plantType;
        this.growthCycle = growthCycle;
        this.plantingTime = plantingTime;
        this.function = function;
        this.englishName = englishName;
    }

    // Getter and Setter methods
    public String getSpecies() {
        return species;
    }

    public void setSpecies(String species) {
        this.species = species;
    }

    public String getIsFlower() {
        return isFlower;
    }

    public String getIsInvasive() {
        return isInvasive;
    }

    public String getIsPoisonous() {
        return isPoisonous;
    }

    public String getPlantType() {
        return plantType;
    }

    public void setPlantType(String plantType) {
        this.plantType = plantType;
    }

    public String getGrowthCycle() {
        return growthCycle;
    }

    public void setGrowthCycle(String growthCycle) {
        this.growthCycle = growthCycle;
    }

    public String getPlantingTime() {
        return plantingTime;
    }

    public void setPlantingTime(String plantingTime) {
        this.plantingTime = plantingTime;
    }

    public String getFunction() {
        return function;
    }

    public void setFunction(String function) {
        this.function = function;
    }

    public String getEnglishName() {
        return englishName;
    }

    public void setEnglishName(String englishName) {
        this.englishName = englishName;
    }
}

植物详情仓库类

为了管理植物的详细信息，我们创建一个仓库类：

// PlantDetailsRepository.java

import java.util.ArrayList;
import java.util.List;

public class PlantDetailsRepository {
    private List<PlantDetails> plantDetailsList;

    public PlantDetailsRepository() {
        plantDetailsList = new ArrayList<>();
        // 在这里添加植物详细信息
        addPlantDetails();
    }

    public PlantDetails getPlantDetailsBySpecies(String species) {
        for (PlantDetails plantDetails : plantDetailsList) {
            if (plantDetails.getSpecies().equals(species)) {
                return plantDetails;
            }
        }
        return null;
    }

    private void addPlantDetails() {
        plantDetailsList.add(new PlantDetails("栀子花", "对人类与宠物无毒", "未报道为花卉", "未报道为入侵植物", "草本, 灌木", "多年生", "春天, 夏天, 秋天", "无", "Gardenia jasminoides"));
        // 可以添加更多的植物详细信息
    }
}

结论

通过这种方式，我们可以在 Android Studio 中动态修改 WebView 加载的 HTML 内容。使用 JavaScript 可以方便地操作 HTML 元素，从而根据需求动态展示内容。这种方法非常适用于需要展示动态内容的应用场景，例如百科类应用。希望这篇博客能对你有所帮助！

Santini Tom

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在 Android Studio 中动态显示 HTML 文件

在开发 Android 应用时，有时需要动态修改 WebView 中加载的 HTML 内容。在这篇博客中，我们将介绍如何在 Android Studio 中实现这一功能。具体来说，我们将展示如何使用 JavaScript 来动态修改 HTML 文件中的内容。我们会以一个显示植物详细信息的示例为基础来进行讲解。
复制链接

扫一扫