最新消息:

blockly-android模块化/可视化编程(二)——深入理解

Blockly 少儿编程 2078浏览 0评论
首先我们看一下两个依赖分别是什么作用:
        Blocklylib-core    核心库。可以运行没有UI(例如,用于代码操作和生成)的情况下运行Blockly所需的所有内容
        blocklylib-vertical    此模块包含VerticalBlockViewFactory Blockly的默认垂直堆叠块的视觉样式
然后我们进入我们目前已知的唯一类AbstractBlocklyActivity,看看它有什么重要的线索。
在我们集成时发现,即便我们没有重写Activity的onCreate方法设置布局,我们依然可以正常显示。
我们先看一下AbstractBlocklyActivity的onCreate方法做了些什么
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. onCreateActivityRootView();
  5. mBlocklyActivityHelper = onCreateActivityHelper();
  6. if (mBlocklyActivityHelper == null) {
  7. throw new IllegalStateException(“BlocklyActivityHelper is null. “
  8. + “onCreateActivityHelper must return a instance.”);
  9. }
  10. resetBlockFactory(); // Initial load of block definitions, extensions, and mutators.
  11. configureCategoryFactories(); // After BlockFactory; before Toolbox
  12. reloadToolbox();
  13. // Load the workspace.
  14. boolean loadedPriorInstance = checkAllowRestoreBlocklyState(savedInstanceState)
  15. && (getController().onRestoreSnapshot(savedInstanceState) || onAutoload());
  16. if (!loadedPriorInstance) {
  17. onLoadInitialWorkspace();
  18. }
  19. }
我们发现,它除了通过onCreateActivityRootView方法加载布局外,还有一些初始化、配置、加载工具箱和工作空间等操作。
在onCreateActivityRootView方法中,添加了DrawerLayout和ActionBar。重点是调用了一个onCreateContentView来实现了主要布局的加载:
  1. protected View onCreateContentView(int containerId) {
  2. return getLayoutInflater().inflate(R.layout.blockly_unified_workspace, null);
  3. }
这个布局就是我们没有重新设置布局而加载的默认布局,当然,我们可以自己定义需要的布局样式
通过R.layout.blockly_unified_workspace布局文件,我们可以搞明白整个布局由哪几部分组成
20180228204837411 20180228205021677
由4个Fragment和4个按钮组成
如下图分别是展开toolbox和trash的截图:
20180228205021677
2018022820502959

看完整个AbstractBlocklyActivity类,我们会发现大部分操作都被BlocklyActivityHelper贯穿。
BlocklyActivityHelper可以让Activity方便的控制Blockly,它可以让我们在工作空间中包含一些按钮来控制工作空间的缩放与重置、删除块等操作。

构造方法如下:

  1. public BlocklyActivityHelper(AppCompatActivity activity, FragmentManager fragmentManager) {
  2. mActivity = activity;
  3. //初始化组成界面的4个Fragment
  4. onFindFragments(fragmentManager);
  5. if (mWorkspaceFragment == null) {
  6. throw new IllegalStateException(“mWorkspaceFragment is null”);
  7. }
  8. //初始化工作空间、块View工厂、代码生成器、加载默认的xml文件
  9. mWorkspaceHelper = new WorkspaceHelper(activity);
  10. mBlockViewFactory = onCreateBlockViewFactory(mWorkspaceHelper);
  11. mClipDataHelper = onCreateClipDataHelper();
  12. mCodeGeneratorManager = new CodeGeneratorManager(activity);
  13. //配置控制器
  14. BlocklyController.Builder builder = new BlocklyController.Builder(activity)
  15. .setClipDataHelper(mClipDataHelper)
  16. .setWorkspaceHelper(mWorkspaceHelper)
  17. .setBlockViewFactory(mBlockViewFactory)
  18. .setWorkspaceFragment(mWorkspaceFragment)
  19. .setTrashUi(mTrashBlockList)
  20. .setToolboxUi(mToolboxBlockList, mCategoryFragment);
  21. mController = builder.build();
  22. //设置参数回调与变量监听
  23. onCreateVariableCallback();
  24. onCreateMutatorListener();
  25. //配置缩放、重置位置、垃圾桶按钮
  26. onConfigureTrashIcon();
  27. onConfigureZoomInButton();
  28. onConfigureZoomOutButton();
  29. onConfigureCenterViewButton();
  30. }

您必须 登录 才能发表评论!