【Android】视图绑定与网络编程webView

简介: 通过视图绑定viewBinding功能,您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后,系统会为该模块中的每个 XML 布局文件生成一个绑定类。绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。

【Android】视图绑定与网络编程webView



1. 视图绑定

视图绑定  | Android 开发者  | Android Developers (google.cn)

通过视图绑定viewBinding功能,您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后,系统会为该模块中的每个 XML 布局文件生成一个绑定类。绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。

1.1 打开 viewBinding

    //默认是关闭的,手动打开

   viewBinding{

       enabled=true

   }

网络异常,图片无法展示
|

1.2 viewBinding的使用

自动将xml文件生成java类  类的名字以xml的名字+Binding

也正是如此让我们不需要再使用findViewById()来获取控件,直接类名.组件ID就可以获取到控件的引用

//改造activity

activityMainBinding=ActivityMainBinding.inflate(getLayoutInflater());

setContentView(activityMainBinding.getRoot());

 

//优势一:无需findViewById,简化控件获取

//优势二:避免报空指针,控件管理更方便,有条理

activityMainBinding.txtViewId.setText("HNUCM");

网络异常,图片无法展示
|

2. WebView

在 WebView 中编译 Web 应用  | Android 开发者  | Android Developers (google.cn)

如果希望在客户端应用中提供 Web 应用(或只是网页),则可以使用 WebView 执行该操作。WebView 类是 Android 的 View 类的扩展,可将网页显示为 Activity 布局的一部分。它不会包含功能全面的网络浏览器的任何功能,例如导航控件或地址栏。WebView 默认只显示网页。

android里可以嵌套网页,如微信公众号,小程序

2.1 app嵌入网页

在xml文件中添加一个webView控件

网络异常,图片无法展示
|

要在 WebView 中加载网页,使用 loadUrl()方法:

activityMainBinding.webViewId.loadUrl("http://www.qq.com");

 

activityMainBinding.webViewId.loadUrl("http://www.qq.com");

 

activityMainBinding.webViewId.setWebViewClient(newWebViewClient(){

   @Override

   publicbooleanshouldOverrideUrlLoading(WebViewview, Stringurl) {

       view.loadUrl(url);

       returntrue;

   }

});

这样我们可以看到,成功将网页嵌入到了app中,不过网页仍然是以网页端显示

网络异常,图片无法展示
|

2.2 设置显示样式

通过如下设置可以使样式和手机端样式显示

网络异常,图片无法展示
|

WebSettingswebSettings=activityMainBinding.webViewId.getSettings();

//如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript

webSettings.setJavaScriptEnabled(true);

 

//设置自适应屏幕,两者合用

webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小

webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//自适应屏幕

activityMainBinding.webViewId.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

 

//缩放操作

webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。

webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放

webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

 

//其他细节操作

webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存

webSettings.setAllowFileAccess(true); //设置可以访问文件

webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口

webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片

webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

 

//优先使用缓存

webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

//缓存模式如下:

//LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据

//LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。

//LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.

//LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据

//不使用缓存

webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

 

2.3 嵌入自定义(本地)网页

创建一个assets文件夹

Tips:Assets 目录是 Android 的一种特殊目录,用于放置 APP 所需的固定文件,且该文件被打包到 APK 中时,不会被编码到二进制文件

网络异常,图片无法展示
|

将自己写好的student.html(这是我web课的一个小作业)网页脚本,复制到assets文件夹下

需要修改一下文件的路径:

activityMainBinding.webViewId.loadUrl("file:///android_asset/student.html");

网络异常,图片无法展示
|

运行同样可以显示

网络异常,图片无法展示
|

可以看到在html(web)中的语法都能在android中生效,跳转同样的可以通过<a></a>标签实现

除此之外webView提供了跳转的方法

先在xml创建两个按钮来监听点击事件

网络异常,图片无法展示
|

webView提供goBack()goForward()方法监听网页间的跳转

activityMainBinding.button.setOnClickListener(newView.OnClickListener() {

    @Override

    publicvoidonClick(Viewview) {

        activityMainBinding.webViewId.goBack();

    }

});

 

activityMainBinding.button2.setOnClickListener(newView.OnClickListener() {

   @Override

   publicvoidonClick(Viewview) {

       activityMainBinding.webViewId.goForward();

   }

});

网络异常,图片无法展示
|

可以看到无论是用<a></a>标签还是,Android原生的按钮监听都能实现网页的跳转

网络异常,图片无法展示
|

3. 思索&下期预告

理想情况下,Android中的所有UI全部都可以通过webView使用网页来实现,但为什么web没有取代Android开发?那是不是前端的工程师都可以兼职开发Android,干嘛还要发展Android呢?

4.完整代码

MainActivity代码

publicclassMainActivityextendsAppCompatActivity {

 

   //viewBinding

   //自动将xml文件生成java类  类的名字以xml的名字+Binding

   ActivityMainBindingactivityMainBinding;

 

   @Override

   protectedvoidonCreate(BundlesavedInstanceState) {

       super.onCreate(savedInstanceState);

 

       //改造activity

       activityMainBinding=ActivityMainBinding.inflate(getLayoutInflater());

       setContentView(activityMainBinding.getRoot());

 

       //优势一:无需findViewById,简化控件获取

       //优势二:避免报空指针,控件管理更方便,有条理

       //activityMainBinding.txtViewId.setText("HNUCM");

 

 

       //问题一:并不是嵌入在app中

       activityMainBinding.webViewId.loadUrl("file:///android_asset/student.html");

 

       activityMainBinding.webViewId.setWebViewClient(newWebViewClient(){

           @Override

           publicbooleanshouldOverrideUrlLoading(WebViewview, Stringurl) {

               view.loadUrl(url);

               returntrue;

           }

       });

 

 

       WebSettingswebSettings=activityMainBinding.webViewId.getSettings();

       //如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript

       webSettings.setJavaScriptEnabled(true);

 

       //设置自适应屏幕,两者合用

       webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小

       webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

       //自适应屏幕

       activityMainBinding.webViewId.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

       webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

 

       //缩放操作

       webSettings.setSupportZoom(true); //支持缩放,默认为true。是下面那个的前提。

       webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放

       webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

 

       //其他细节操作

       webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存

       webSettings.setAllowFileAccess(true); //设置可以访问文件

       webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口

       webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片

       webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

 

       //优先使用缓存

       webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

       //缓存模式如下:

       //LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据

       //LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。

       //LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.

       //LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据

       //不使用缓存

       webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

 

       activityMainBinding.button.setOnClickListener(newView.OnClickListener() {

           @Override

           publicvoidonClick(Viewview) {

               activityMainBinding.webViewId.goBack();

           }

       });

 

       activityMainBinding.button2.setOnClickListener(newView.OnClickListener() {

           @Override

           publicvoidonClick(Viewview) {

               activityMainBinding.webViewId.goForward();

           }

       });

 

   }

}

activity_main.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=".MainActivity">



   <WebView

       android:id="@+id/webViewId"

       android:layout_width="match_parent"

       android:layout_height="500dp"

       app:layout_constraintStart_toStartOf="parent"

       app:layout_constraintTop_toTopOf="parent" />


   <Button

       android:id="@+id/button"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_marginTop="60dp"

       android:text="返回"

       app:layout_constraintEnd_toStartOf="@+id/button2"

       app:layout_constraintHorizontal_bias="0.5"

       app:layout_constraintStart_toStartOf="parent"

       app:layout_constraintTop_toBottomOf="@+id/webViewId" />


   <Button

       android:id="@+id/button2"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="前进"

       app:layout_constraintEnd_toEndOf="parent"

       app:layout_constraintHorizontal_bias="0.5"

       app:layout_constraintStart_toEndOf="@+id/button"

       app:layout_constraintTop_toTopOf="@+id/button" />


</androidx.constraintlayout.widget.ConstraintLayout>

student.html代码

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

       th{

           border: 1px solid black;

           background-color: antiquewhite;

           padding: 5px;

       }

       td{

           border: 1px solid black;

           font-family: 'Courier New', Courier, monospace;

           padding: 4px;

       }

       table{

           border-collapse: collapse;

           width: 90%;

           margin: auto;

       }

       div{

           border: 1px solid black;

           width: 60%;

           margin: auto;

       }


   </style>


</head>

<body style="text-align:center">

   <script>

       function add(obj){

           

           var vstu_id=formNode.stu_id.value;

           var vstu_name=formNode.stu_name.value;

           var vstu_sex=formNode.stu_sex.value;

           if(vstu_id==""||vstu_name==""||vstu_sex==""){

               alert("数据不能为空!");

           }else{


           

               alert(vstu_id+' '+vstu_name+' '+vstu_sex)


               var vtable1=document.getElementById('table1');


               var vtr=document.createElement('tr');

               


               var vtd_id=document.createElement('td');

               vtd_id.innerText=vstu_id;


               var vtd_name=document.createElement('td');

               vtd_name.innerText=vstu_name;


               var vtd_sex=document.createElement('td');

               vtd_sex.innerHTML=vstu_sex;


               var vth_del=document.createElement('td');

               

               var va=document.createElement('a');

               va.setAttribute("href","JavaScript:void(0)");

               va.setAttribute("onclick","del(this)");

               va.innerHTML="删除";

               vth_del.appendChild(va);


               vtr.appendChild(vtd_id);

               vtr.appendChild(vtd_name);

               vtr.appendChild(vtd_sex);

               vtr.appendChild(vth_del);


               vtable1.appendChild(vtr);

           }


       }


       function del(obj){

           var msg="确定删除这条数据吗?";


           if(confirm(msg)==true){

               var vth_delNode=obj.parentNode;

               var vtrNode=vth_delNode.parentNode;

               var vtable1=vtrNode.parentNode;

               vtable1.removeChild(vtrNode);

           }

       }

   </script>

   

   <div>


       <a href ="file:///android_asset/student2.html">跳转</a>

       <form name="formNode" style="margin-top: 15px">

           编号:<input type="text" maxlength="3" size="4" name="stu_id">

           姓名:<input type="text" maxlength="8" size="4" name="stu_name">

           性别:<input type="text" size="4" name="stu_sex">

           <input type="button" value="添加" onclick="add(this)">

       </form>

       <table style="margin-top: 20px; margin-bottom: 20px;" id="table1">

           <caption style="font-size: 20px;">学生成绩表</caption>

           <tr>

               <th>编号</th>

               <th>姓名</th>

               <th>性别</th>

               <th>操作</th>

           </tr>

   

           <tr>

               <td>001</td>

               <td>lixu</td>

               <td>nan</td>

               <td><a onclick="del(this)" href="JavaScript:void(0)">删除</a></td>

           </tr>

       </table>

       

   </div>

</body>

</html>


相关文章
|
13天前
|
Android开发
Android网络访问超时
Android网络访问超时
16 2
|
13天前
|
Java Linux API
统计android设备的网络数据使用量
统计android设备的网络数据使用量
20 0
|
7天前
|
移动开发 安全 Android开发
构建高效Android应用:采用Kotlin协程优化网络请求
【5月更文挑战第21天】 在移动开发领域,尤其是针对Android平台,网络请求的处理一直是影响应用性能和用户体验的关键因素。随着现代应用对实时性和响应速度要求的不断提高,传统的同步阻塞或异步回调模式已不再满足开发者的需求。本文将探讨利用Kotlin协程来简化Android应用中的网络请求处理,实现非阻塞的并发操作,并提升应用的整体性能和稳定性。我们将深入分析协程的原理,并通过一个实际案例展示如何在Android项目中集成和优化网络请求流程。
|
12天前
|
设计模式 算法 Android开发
2024年Android网络编程总结篇,androidview绘制流程面试
2024年Android网络编程总结篇,androidview绘制流程面试
2024年Android网络编程总结篇,androidview绘制流程面试
|
13天前
|
Android开发
android检测网络连接是否存在(一)
android检测网络连接是否存在(一)
13 2
|
13天前
|
Android开发
Android教程之Android 用户界面-表格视图(GridView)
Android教程之Android 用户界面-表格视图(GridView)
13 1
|
13天前
|
移动开发 Java Android开发
构建高效Android应用:采用Kotlin协程优化网络请求
【4月更文挑战第24天】 在移动开发领域,尤其是对于Android平台而言,网络请求是一个不可或缺的功能。然而,随着用户对应用响应速度和稳定性要求的不断提高,传统的异步处理方式如回调地狱和RxJava已逐渐显示出局限性。本文将探讨如何利用Kotlin协程来简化异步代码,提升网络请求的效率和可读性。我们将深入分析协程的原理,并通过一个实际案例展示如何在Android应用中集成和优化网络请求。
|
13天前
|
存储 应用服务中间件 网络安全
Android 网络链接稳定性测试解决方案
Android 网络链接稳定性测试解决方案
25 0
|
13天前
|
Android开发 开发者
Android网络和数据交互: 请解释Android中的AsyncTask的作用。
Android&#39;s AsyncTask simplifies asynchronous tasks for brief background work, bridging UI and worker threads. It involves execute() for starting tasks, doInBackground() for background execution, publishProgress() for progress updates, and onPostExecute() for returning results to the main thread.
13 0
|
13天前
|
网络协议 安全 API
Android网络和数据交互: 什么是HTTP和HTTPS?在Android中如何进行网络请求?
HTTP和HTTPS是网络数据传输协议,HTTP基于TCP/IP,简单快速,HTTPS则是加密的HTTP,确保数据安全。在Android中,过去常用HttpURLConnection和HttpClient,但HttpClient自Android 6.0起被移除。现在推荐使用支持TLS、流式上传下载、超时配置等特性的HttpsURLConnection进行网络请求。
16 0