Android端引入webview来实现动态表格

TouchOfSunJ

已于 2024-04-17 13:50:56 修改

阅读量199

点赞数 3

文章标签：前端 vue.js android

于 2024-04-12 17:43:05 首次发布

本文链接：https://blog.csdn.net/weixin_38699155/article/details/137667686

版权

本文详细描述了作者如何在Android应用中使用ElementUi构建表格，遇到性能瓶颈后转而采用Webview，并介绍了Webview与安卓组件交互、滑动冲突处理以及解决数据更新延迟的方法。

摘要由CSDN通过智能技术生成

先看看效果动图：

一段时间前我写过android动态的表格实现，用于统计和计算，当时是进行了少量的测试，所以对于计算和滑动还算顺畅，但是到了现场数据量大的时候依靠我自己搭建的表格小框架就有些抗不住了，果断引入webview来实现！记录一下实现步骤和出现过的问题！

1、首先借助ElementUi先构建布局

Element - The world's most popular Vue UI framework

<template>
    <div style="width:100%;height: 100%">
  <!-- {{ this.a}} -->
      <el-table max-height="250"
                :data="tableData" :cell-class-name="cellClassName" :span-method="spanMethod"
                style="width: 100%">
        <el-table-column prop="txNo" label="序号" align="center" min-width="50"></el-table-column>
        <el-table-column prop="testType" label="检验类型" align="center" min-width="60">
          <template slot-scope="scope">
            <span>
              {{ getNameTestType(scope.row.testType) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="txDescribe" label="检验项目" align="center" min-width="60"></el-table-column>
        <el-table-column prop="criteria" label="判定标准" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-show="scope.row.entryMethod==1 || scope.row.entryMethod==4">
              <span>{{ scope.row.criteria }}</span>
            </div>
            <div v-show="scope.row.entryMethod==2 || scope.row.entryMethod==3">
              <img class="notation_pic_box" :src="scope.row.criteria" @click="showImgBigger(scope.row.criteria)"
                   style="margin-right: 20px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="checkMethodName" label="检查方法" align="center" min-width="60"></el-table-column>
  
        <el-table-column :prop="item.prop" :label="item.label" align="center" min-width="60"
                         v-for="(item,i) in yanbenList">
          <!--        <template slot-scope="scope" slot="header">-->
          <!--          <div>-->
          <!--            <el-checkbox v-model="tableColumnMap[item]" :disabled="openType == 'view'" :label="item"-->
          <!--                         @change="checkColumnChange(item)"></el-checkbox>&lt;!&ndash; :disabled="title == '查看'" &ndash;&gt;-->
          <!--          </div>-->
  
          <!--        </template>-->
          <template slot-scope="scope">
            <div v-if="(scope.row.maxCapacity*1) >= (i+1)">
              <div v-if="scope.row.type == 2 || scope.row.inspectMethod==1 || scope.row.isHundredTest == 2"
                   @click="changeResult(scope.row, item.prop)">
                <div style="width: 100%; height: 26px; display:flex; justify-content: center; align-items: center;">
                  <div v-show="scope.row[item.prop]=='true'" style="font-size: 16px;font-weight: bold">✔</div>
                  <div v-show="scope.row[item.prop]=='false'" style="font-size: 16px;font-weight: bold;color: orangered">
                    x
                  </div>
                </div>
              </div>
              <div v-else>
                <el-input v-model="scope.row[item.prop]" @input="capacityBlur(scope.row, item.prop)" size="mini"
                          :class="[scope.row['dataQualified'+(i+1)]=='false'?'redText': '', 'basicStyle']"></el-input>
              </div>
            </div>
            <div v-if="scope.row.inspectMethod==99">
              <div style="width: 100%; height: 26px; display:flex; justify-content: center; align-items: center;">
                <div v-show="scope.row[item.prop]=='true'" style="font-size: 16px;font-weight: bold">✔</div>
                <div v-show="scope.row[item.prop]=='false'" style="font-size: 16px;font-weight: bold;color: orangered">x
                </div>
              </div>
            </div>
  
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedNum" label="合格" align="center" min-width="100"></el-table-column>
      <el-table-column prop="noQualifiedNum" label="不合格" align="center" min-width="100"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center" min-width="100">
        <template slot-scope="scope">
          <el-input  @input="remarkInput(scope.row)" size="mini" maxlength="20" clearable v-if="scope.row.inspectMethod!=99" v-model="scope.row.remark"></el-input>
        </template>
      </el-table-column>
      </el-table>

      <div style="width:100%;height: 40px;line-height:40px;border: 1px solid #ebeef5;display: flex">

<div style="width: 460px;right: 50px;position: relative;">结论</div>
<div>
  <el-checkbox-group v-model="checkList" abled>
    <el-checkbox label="放行"></el-checkbox>
    <el-checkbox label="隔离"></el-checkbox>
  </el-checkbox-group>
</div>
</div>
    </div>
  </template>

https://blog.csdn.net/weixin_38699155/article/details/135595871?spm=1001.2014.3001.5502

安卓端先配置代码：

 private void setWebView(String url, WebView mWebView, String cookieUrl, Map<String, String> params) {
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // 跨域cookie读取
            cookieManager.setAcceptThirdPartyCookies(mWebView, true);
        }

        cookieManager.setCookie(cookieUrl, "saber-access-token=" + SharedPreferencesUtil.getInstance(MyApplication.getContext()).getPrefString("cookie", ""));
//        cookieManager.setCookie(cookieUrl, "bbbb=1234567989");

        for (String key : params.keySet()) {
            cookieManager.setCookie(cookieUrl, key + "=" + params.get(key));
        }

        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            CookieSyncManager.getInstance().sync();
        } else {
            cookieManager.flush();
        }

        WebSettings webSettings = mWebView.getSettings();
        // 开启DOM storage API 功能
        webSettings.setDomStorageEnabled(true);
        // 开启database storage API功能
        webSettings.setDatabaseEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setBlockNetworkImage(false);
        webSettings.setJavaScriptEnabled(true);
        WebView.setWebContentsDebuggingEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.addJavascriptInterface(new JsJavaBridge(this, mWebView), "$Android");
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url)
            {
                super.onPageFinished(view, url);
                if (holder1 != null && holder1.tvmaterialcode != null){
                    holder1.tvmaterialcode.dismissDropDown();
                }


                ll_operation.setVisibility(View.VISIBLE);
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon)
            {
                super.onPageStarted(view, url, favicon);
            }
        });
        mWebView.loadUrl(url);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mWebView.reload();
            }
        },200);

2、通过@JavascriptInterface来实现webview和安卓的交互mounted()添加代码

mounted() {
      window.callJsFunction = this.callJsFunction;

    },

web端数据发生变化调用

$Android.toPutInspectFormForAudit(JSON.stringify(jsonObject));

下面方法主要用来接收web端数据的变化

 @JavascriptInterface
    public void toPutInspectFormForAudit(String json) {
        try{
            List<InspectPatrolTjChild> ruleList =new ArrayList<InspectPatrolTjChild>();
            ruleList = JSON.parseObject(json,ArrayList.class);
            Log.e("toPutInspectFormForAudit",json);
            ProcessInspectionActivity.inspectBill.setInspectPatrolTjChildList(ruleList);
            ProcessInspectionActivity.rulesListBillRule = ruleList;
        }catch(Exception e){

        }
    }

3、webview和其它控件的滑动冲突

webview本来就是单独的线程，它自己消化了touch事件后，如果不进行释放，会耽误外部其它控件的滑动

requestDisallowInterceptTouchEvent(false);

目的就是为了告诉父控件，我不想再处理touch事件了！

public class MWebView extends WebView {

    public MWebView(Context context) {
        this(context, null);
    }

    public MWebView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setOnTouchListener((v, event) -> {
            requestDisallowInterceptTouchEvent(
                    event.getAction() != MotionEvent.ACTION_UP);
            return false;
        });
    }



    @SuppressLint("ClickableViewAccessibility")
//    public MWebView(Context context, AttributeSet attrs, int defStyle) {
//        super(context, attrs, defStyle);
//
//    }

    //判断webview内部滑动到极限后释放touch事件
    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        if (scrollY == 0 && clampedY) {
            requestDisallowInterceptTouchEvent(false);
        }
    }

}

4、webview没有及时更新

我使用的代码

HashMap<String,String> map = new HashMap<>();
                    map.put("partNo", dataBean.getMaterialNo());
                    map.put("tag", "2");
                    setWebView(webViewUrl + "#/proInspect/create", mWebView, webViewUrl, map);

问题可能出现在地址的上面：

#/proInspect/create

所以添加了以下的代码：

 new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mWebView.reload();
            }
        },200);

TouchOfSunJ

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android端引入webview来实现动态表格

一段时间前我写过android动态的表格实现，用于统计和计算，当时是进行了少量的测试，所以对于计算和滑动还算顺畅，但是到了现场数据量大的时候依靠我自己搭建的表格小框架就有些抗不住了，果断引入webview来实现！webview本来就是单独的线程，它自己消化了touch事件后，如果不进行释放，会耽误外部其它控件的滑动。2、通过@JavascriptInterface来实现webview和安卓的交互。下面方法主要用来接收web端数据的变化。mounted()添加代码。web端数据发生变化调用。
复制链接

扫一扫