jside吧 关注:886贴子:5,709
  • 13回复贴,共1

【教程】简析GUI——不再依赖生成器

取消只看楼主收藏回复

本帖讲解如何纯手打代码制作GUI =_=
♦适合人群:
1.懂得JS;
2.知道JS的面向对象;
3.有制作GUI的需求;
4.Android用户。
♦如果你满足下面的条件,那么你会学的比较轻松:
1.懂得JS调用Java;
2.知道Android中View机制;
3.背过了一些GUI代码。←_←
♦看完本帖,您将学会:
1.长期停留在屏幕上的按钮;
2.类似错误报告时的对话框;
3.占满整个屏幕的信息提示;
4.自己创新实现的其他界面。
♦本帖会教你使用控件:
很多(◍•ᴗ•◍)
♦本人承诺:
1.教程绝对原创;
2.代码绝对可用;
3.不含木马病毒;
4.更新时间不定。┻╰(‵□′)╯


IP属地:上海来自Android客户端1楼2017-08-14 13:03回复
    第一讲 什么是GUI?
    GUI全称:Graphical User Interface,即图形用户界面。
    好了,剩下的自行百度
    https://wapbaike.baidu.com/item/GUI/479966?fr=aladdin


    IP属地:上海来自Android客户端2楼2017-08-14 13:05
    回复
      第二讲 创建GUI
      要创建GUI,首先要获取上下文。
      const ctx = com.mojang.minecraftpe.MainActivity.currentMainActivity.get();
      用JsIDE创建一个新的JS文件,就会自动添加这句代码。
      如果看不惯const,可以自己改成var←_←
      它为什么能获取上下文?
      因为这是启动器留给我们的接口←_←


      IP属地:上海来自Android客户端4楼2017-08-14 13:08
      回复
        创建GUI前,要先知道主线程。
        主线程又称UI线程,这个线程用来处理程序的主要功能(?),自带Looper(android.os.Looper)。如果要创建GUI,就必须要Looper。所以,一般来讲,只有UI线程才能创建GUI。
        要在UI线程中执行代码,需要这样做:
        ctx.runOnUiThread(new java.lang.Runnable({run:function() {
        /** 要执行的代码 */
        }}));
        ——
        不知道线程是什么的,自行百度←_←


        IP属地:上海来自Android客户端5楼2017-08-14 13:14
        回复
          现在写个简单的GUI举个例子
          ctx.runOnUiThread(new java.lang.Runnable({run:function() {
          var window = new android.widget.PopupWindow();
          window.setContentView(new android.view.View(ctx));
          window.setWidth(100);
          window.setHeight(100);
          window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.BLACK));
          window.showAtLocation(ctx.getWindow().getDecorView(),0,0,0);
          }}));
          GUI效果如图所示


          IP属地:上海来自Android客户端6楼2017-08-14 13:22
          回复
            这是我们要学的第一种GUI,我们用它来做长期停留在屏幕上的按钮。
            首先,我们需要创建PopupWindow对象,因为我们要通过它在屏幕上实现内容。
            var window = new android.widget.PopupWindow();
            然后,要设置它的宽高,也就是占据屏幕的大小。单位:px(像素)
            window.setWidth(100);
            window.setHeight(100);
            然后我们可以设置它的背景颜色,当然这不是必须的。
            window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.BLACK));
            如果用其他的颜色,可以把BLACK改成那种颜色的英文。(当然,需要系统支持)或者可以用这个把BLACK换下来:
            argb(alpha,red,green,blue)
            其中括号内容分别是你透明度、红、绿、蓝。
            最后一步就是展示GUI,它会把GUI显示在屏幕左上角
            window.showAtLocation(ctx.getWindow().getDecorView(),0,0,0);
            最后的三个0分别对应三个参数:重心,xy偏移量。
            常用的重心有:
            android.view.Gravity.LEFT
            偏左(3)
            android.view.Gravity.RIGHT
            偏右(5)
            android.view.Gravity.TOP
            偏上(48)
            android.view.Gravity.BOTTOM
            偏下(80)
            android.view.Gravity.CENTER
            居中(17)
            如果要靠右下,可以这样写
            android.view.Gravity.RIGHT | android.view.Gravity.BOTTOM
            如果填0,默认为靠左上


            IP属地:上海来自Android客户端7楼2017-08-14 13:32
            回复
              window.setContentView那句为什么没讲?
              因为这是下次更新的内容
              来人再更~_~


              IP属地:上海来自Android客户端8楼2017-08-14 13:34
              回复
                第三讲 View与ViewGroup
                这才是重点!
                什么是View?
                View指android.view.View,是所有控件的基类。
                ViewGroup指android.view.ViewGroup,是所有布局的基类。
                构造它们,都需要传入参数ctx。即new android.view.View(ctx);
                注意:
                我们可以直接创建View,但不能直接创建ViewGroup。也就是说:
                new android.view.View(ctx)正确
                new android.view.ViewGroup(ctx)报错


                IP属地:上海来自Android客户端13楼2017-08-14 16:39
                回复
                  android中View的结构是什么呢?
                  首先,必须有一个根布局(继承自ViewGroup),它包含了很多个View。其中可以有一个或多个View继承自ViewGroup,这样它又能包含很多View……这样循环下去,形成树形图。
                  将一个View添加到ViewGroup的方法是:
                  ViewGroup.addView(View);
                  注意:一个View只能被添加到一个ViewGroup


                  IP属地:上海来自Android客户端14楼2017-08-14 16:57
                  回复
                    我们一般不会直接使用View,而是使用View的子类,但这并不表示View没有任何用处。
                    View提供了控件的大多数功能,下面来介绍这些功能。
                    [假设view是一个View类的实例]
                    view.setEnabled()
                    设置该View是否有效。
                    传参:boolean(true-有效,false-无效)
                    view.isEnabled()
                    判断控件是否有效
                    view.setClickable()
                    设置控件能否点击
                    传参:boolean
                    view.isClickable()
                    判断控件能否点击
                    view.setLongClickable()
                    设置控件能否长按
                    传参:boolean
                    view.isLongClickable()
                    判断控件能否长按
                    view.setPadding(left,top,right,bottom)
                    设置控件内间距
                    传参:四周的间距,单位:px,整数
                    view.setId()
                    设置View的id
                    传参:ID(整数)
                    view.getId()
                    得到View的id
                    view.findViewById()
                    寻找View中包含的ID是xx的View
                    传参:ID
                    view.setBackgroundColor()
                    设置View的背景颜色
                    传参:颜色
                    view.setBackgroundDrawable()
                    设置控件背景
                    传参:Drawable
                    好吧什么是Drawable以后再说
                    view.setTag(tag)
                    view.setTag(key,tag)
                    给View设置标签。
                    传参:key必须为整数,tag任意
                    可以通过这种方式为每一个View加一些不同的数据,方便后期处理。
                    view.getTag()
                    view.getTag(key)
                    得到View的标签
                    view.invalidate()
                    强制View进行刷新。
                    view.postInvalidate()
                    让View在下次显示刷新时刷新
                    显示刷新一般为60帧(吧?)
                    view.requestLayout()
                    强制View所在的布局进行刷新
                    view.getWidth()
                    view.getHeight()
                    获取控件宽高


                    IP属地:上海来自Android客户端15楼2017-08-14 17:05
                    回复
                      View控件的监听:
                      一般情况下,设置监听为
                      view.setOnXxxListener(xxx);
                      括号中为监听回调,不同的监听写法大同小异(自己找规律喽(ー_ー)!!)
                      ◆点击事件:OnClickListener
                      设置:view.setOnClickListener(new android.view.View.OnClickListener({onClick:function(view) {
                      /** 点击回调 */
                      /** 此处view指被点击的View */
                      }}));
                      ◆长按回调OnLongClickListener
                      设置:view.setOnLongClickListener(new android.view.View.OnLongClickListener({onLongClick:function(view) {
                      /** 长按回调 */
                      /** 此处view指被长按的View */
                      return true;//★
                      }}));
                      长按回调经常会闪退,因为它要求我们返回一个boolean,在GUI中,与事件有关的布尔值通常有这样的含义:
                      true-表示已经完全处理该事件,不需要经过其他回调处理。
                      false-表示未完全处理该事件,需要经过其他回调处理。
                      在长按回调中,return false会引起点击回调。
                      ◆触摸回调:OnTouchListener
                      设置:setOnTouchListener(new android.view.View.OnTouchListener({onTouch:function(view, event) {
                      /** 触摸回调 */
                      return true;
                      }}));
                      event表示触摸事件,所属类android.view.MotionEvent,通常使用他们这些类:
                      event.getAction()
                      获取事件行为
                      event.getX()
                      event.getY()
                      获取事件发生位置
                      行为(action)有三种:DOWN、MOVE和UP,分别表示按下、停留和抬起。
                      注意:
                      1.与touch有关的boolean,如果返回false,那么接下来这次触摸产生的一系列事件都不会产生回调
                      2.MOVE本意是移动,但是实际上不移动也会调用,而且调用速率很快
                      3.DOWN:android.view.MotionEvent.ACTION_DOWN(0)
                      MOVE:android.view.MotionEvent.ACTION_MOVE(2)
                      UP:android.view.MotionEvent.ACTION_UP(1)


                      IP属地:上海来自Android客户端18楼2017-08-14 17:21
                      回复
                        ViewGroup:
                        常用的有这些:
                        线性布局LinearLayout
                        关系布局RelativeLayout
                        单帧布局FrameLayout
                        表格布局TableLayout
                        滑动布局ScrollView
                        横向滑动布局HorizontalScrollView
                        记得前面加android.widget.


                        IP属地:上海来自Android客户端19楼2017-08-14 17:26
                        回复
                          【番外】简化代码
                          可以看到,我们在写GUI时做了太多的无用功。
                          无用功是什么?我就问你android.view、android.widget这些你写了几遍?
                          可以不写这些东西吗?
                          当然可以!
                          这需要用到一些小技巧。
                          首先,JS开头写下这个声明:
                          const ANDROID_GUI = JavaImporter(android.view,android.widget);
                          这是什么?
                          这是一个ModPE才有的一个特殊函数。
                          然后我们在生成GUI的函数里加上
                          with(ANDROID_GUI) {
                          // 这里写生成GUI的代码
                          }
                          这样,我们就可以把android.view.View写成View了!当然,其他类同理。
                          这样可以大大减少工作量。
                          原理是什么?你猜~


                          IP属地:上海来自Android客户端20楼2017-08-14 17:32
                          收起回复
                            【番外】颜色
                            Android中的颜色是由一个32位整数表示的。
                            一般在Java中,我都这样写:
                            0x[不透明度][红色分量][绿色分量][蓝色分量]
                            每一个分量都可以是00-ff中的任何一个二位十六进制数
                            但是在js中会出问题。
                            那么,在JS中要这样写:
                            android.graphics.Color.argb(不透明度, 红色分量, 绿色分量, 蓝色分量);
                            每一个分量都必须在0-255之间。
                            Android中提供的可以直接用的颜色(前加android.graphics.Color.):
                            BLACK
                            BLUE
                            CYAN
                            DKGRAY
                            GRAY
                            GREEN
                            LTGRAY
                            MAGENTA
                            RED
                            TRANSPARENT
                            WHITE
                            YELLOW
                            具体是什么颜色,你们自己试吧,反正我分不出来(||๐_๐)


                            IP属地:上海来自Android客户端21楼2017-08-14 17:47
                            收起回复