目录
- uniapp原生插件开发-android端-component扩展
- uniapp原生插件开发-android端-module扩展
- uniapp原生插件开发-插件发布
本篇为 uniapp原生插件开发-android端-component扩展
这里实现一个原生的MPAndroidChart的饼状图扩展
效果如下
Screenrecorder-2020-12-20-12-47-01-200.gif
开始
-
打开SDK中的demo项目UniPlugin-Hello-AS``
image.png project的build.gradle:新增仓库
// 设置阿里云仓库，提高下载速度
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}
// MPAndroidChart库地址
maven { url 'https://jitpack.io' }
image.png
提醒：修改完这些你可能需要重新打开android studio，不知道是不是我的as版本太新了，修改了，然后一直停止不了之前的同步进程，重新打开as让他构建项目
- 正式开始，我们这里先根据官方文档提示，新建一个我们的插件模块，插件名称规范：作者-插件名
image.png
-
将该模块作为依赖添加到主项目中，弹出框选择刚才新建的模块apply
image.png 添加依赖：打开新模块的build.gradle,添加两处代码
//导入aar需要的配置
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
compileOnly fileTree(dir: 'libs', include: ['*.jar'])
compileOnly fileTree(dir: '../app/libs', include: ['uniapp-v8-release.aar'])
compileOnly "com.android.support:recyclerview-v7:28.0.0"
compileOnly "com.android.support:support-v4:28.0.0"
compileOnly "com.android.support:appcompat-v7:28.0.0"
implementation 'com.alibaba:fastjson:1.1.46.android'
implementation 'com.facebook.fresco:fresco:1.13.0'
// MpAndroidChart，引入库
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
image.png
- 创建component插件，组件扩展必须继承自UniComponent，泛型为你要扩展的原生控件的类型
package com.elitetyc.elitetyc_mpandroidchart;
import android.content.Context;
import android.graphics.Color;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.github.mikephil.charting.animation.Easing;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.formatter.PercentFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
import io.dcloud.feature.uniapp.UniSDKInstance;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.ui.action.AbsComponentData;
import io.dcloud.feature.uniapp.ui.component.AbsVContainer;
import io.dcloud.feature.uniapp.ui.component.UniComponent;
import io.dcloud.feature.uniapp.ui.component.UniComponentProp;
/**
* Created by elitetyc on 2020/12/19.
* Describe:
*/
public class TPieChart extends UniComponent<PieChart> {
public TPieChart(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
super(instance, parent, componentData);
}
/**
* 使用该组件时会调用该方法返回数据
* @param context
* @return
*/
@Override
protected PieChart initComponentHostView(Context context) {
PieChart mPieChart= new PieChart(context);
mPieChart.setUsePercentValues(true);
mPieChart.getDescription().setEnabled(false);
mPieChart.setExtraOffsets(5, 10, 5, 5);
mPieChart.setDragDecelerationFrictionCoef(0.95f);
//设置中间文字
mPieChart.setCenterText("TPieChat");
mPieChart.setDrawHoleEnabled(true);
mPieChart.setHoleColor(Color.WHITE);
mPieChart.setTransparentCircleColor(Color.WHITE);
mPieChart.setTransparentCircleAlpha(110);
mPieChart.setHoleRadius(58f);
mPieChart.setTransparentCircleRadius(61f);
mPieChart.setDrawCenterText(true);
mPieChart.setRotationAngle(0);
// 触摸旋转
mPieChart.setRotationEnabled(true);
mPieChart.setHighlightPerTapEnabled(true);
//模拟数据
ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
entries.add(new PieEntry(40, "优秀"));
entries.add(new PieEntry(20, "满分"));
entries.add(new PieEntry(30, "及格"));
entries.add(new PieEntry(10, "不及格"));
//设置数据
loadData(entries,mPieChart,"三年一班");
Legend l = mPieChart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
l.setOrientation(Legend.LegendOrientation.VERTICAL);
l.setDrawInside(false);
l.setXEntrySpace(7f);
l.setYEntrySpace(0f);
l.setYOffset(0f);
// 输入标签样式
mPieChart.setEntryLabelColor(Color.WHITE);
mPieChart.setEntryLabelTextSize(12f);
return mPieChart;
}
//设置数据
private void loadData(ArrayList<PieEntry> entries, PieChart mPieChart,String label) {
PieDataSet dataSet = new PieDataSet(entries, label);
dataSet.setSliceSpace(3f);
dataSet.setSelectionShift(5f);
//数据和颜色
ArrayList<Integer> colors = new ArrayList<Integer>();
for (int c : ColorTemplate.VORDIPLOM_COLORS)
colors.add(c);
for (int c : ColorTemplate.JOYFUL_COLORS)
colors.add(c);
for (int c : ColorTemplate.COLORFUL_COLORS)
colors.add(c);
for (int c : ColorTemplate.LIBERTY_COLORS)
colors.add(c);
for (int c : ColorTemplate.PASTEL_COLORS)
colors.add(c);
colors.add(ColorTemplate.getHoloBlue());
dataSet.setColors(colors);
PieData data = new PieData(dataSet);
data.setValueFormatter(new PercentFormatter());
data.setValueTextSize(11f);
data.setValueTextColor(Color.WHITE);
mPieChart.setData(data);
mPieChart.highlightValues(null);
//刷新
mPieChart.invalidate();
}
/**
* 设置数据的方法
* @param pieData
*/
@UniComponentProp(name = "data")
public void setData(JSONObject pieData) {
String label = pieData.getString("label");
JSONArray data = pieData.getJSONArray("data");
ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
for (int i = 0; i < data.size(); i++) {
JSONObject jsonObject = data.getJSONObject(i);
entries.add(new PieEntry(jsonObject.getIntValue("value"),
jsonObject.getString("name")));
}
//设置数据
loadData(entries, getHostView(),label);
}
/**
* 设置中间显示的文字
* @param data
*/
@UniComponentProp(name = "centerText")
public void setCenterText(String data) {
getHostView().setCenterText(data);
getHostView().invalidate();
}
/**
* 设置标签的颜色
* @param data
*/
@UniComponentProp(name = "labelColor")
public void setLabelColor(String data) {
getHostView().setEntryLabelColor(Color.parseColor(data));
getHostView().invalidate();
}
/**
* 调用让饼图旋转
*/
@UniJSMethod
public void rotate() {
getHostView().spin(1000, getHostView().getRotationAngle(), getHostView().getRotationAngle() + 360, Easing.EaseInCubic);
getHostView().invalidate();
}
}
该组件的调用方式为：
<tPieChart ref="tPieChart" :data="pieData" centerText="tyc饼状图" labelColor="#8A2BE2"
style="width:300;height:300" ></tPieChart>
方法描述
initComponentHostView:使用该组件时，会自动调用该方法,返回一个你要扩展的原生组件
@UniComponentProp(name = "labelColor")：给该组件添加一个属性,类似调用方式的labelColor="#8A2BE2"
@UniJSMethod:声明一个该组件的方法,可以通过this.refs.tPieChart.rotate()，调用aging方法
- 组件注册：这一部很重要，否则你的uniapp调用时根本找不到组件地址
找到demo项目的app下面的assets目录，修改dcloud_uniplugins.json文件，注册自己的插件
image.png
- type:类型module还是component,这里是component
- name:插件名称，这个就是调用时使用的标签名
- class:反射时使用的类，就填写刚才扩展的类的全路径
-
uniapp代码调用，使用HbuilderX打开SDK中得示例工程源码
image.png
-
获取appid:点击manifest.json，不获取打包的时候会提示当前appid不是你的
image.png -
打开 simple下的ext-component扩展，修改代码如下
image.png
<template>
<div>
<!-- 调用饼状图 标签名跟刚才注册的name 一致 -->
<tPieChart ref="tPieChart" :data="pieData" centerText="tyc饼状图" labelColor="#8A2BE2" style="width:300;height:300" ></tPieChart>
<myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="rotatePie()"></myText>
</div>
</template>
<script>
export default {
data() {
return {
// 设置定义的饼状图数据
pieData:{
label:"人口年龄",
data:[
{
value:20,
name:"新生儿"
},
{
value:30,
name:"中年人"
},
{
value:10,
name:"中老年"
},
{
value:40,
name:"老年人"
}
]
}
}
},
onLoad() {
},
methods: {
onTel(e) {
console.log("onTel="+e.detail.tel);
},
myTextClick(e) {
this.$refs.telText.clearTel();
},
// 点击下面的文本扩展时会将饼状图旋转
rotatePie(e) {
this.$refs.tPieChart.rotate();
}
}
}
</script>
-
发布资源进行测试，点击发行，生成本地打包资源
image.png
控制台查看生成状态
image.png
将生成的整个目录，复制到androidstudio中app/assets/apps
image.png -
配置当前使用的是哪个app资源，因为当前apps下有多个uniapp资源，所以要告诉项目使用哪个资源，打开app/assets/data目录下的
dcloud_control.xml,修改为刚才生成的资源的appid,设置与目录同名即可
image.png -
运行项目进行测试
Screenrecorder-2020-12-20-12-47-01-200.gif
进入app后点击扩展component，进入刚才我们修改的页面，然后展示了饼状图，然后用手指按住饼状图进行旋转可以进行旋转(这是控件自带的),然后我点击了下面的文字，执行了自己的旋转方法。
