制作安卓皮膚參攷

我收集的，雜七雜八，有些方法可能失效，以供參攷。


滑动上屏

滑动是按某个字母的同时手指滑动=按下了该字母之后再按空格。操控有难度，需要适应。

keyboard.html文件中，找：function movePress，在最后加：move=1。
在function endPress靠后的地方加入： if(move==1){ App.select(0); move=0;} break; }



-----------------------------
滑动输出长按


全选、剪切、复制、粘贴不能滑动

/* 垂直划动可输出长按字符，横向划动解除 */
const FLICK_SENSITIVITY_X = 20;  /* 划动的横向灵敏度，单位像素，距离越短越容易解除 */
const FLICK_SENSITIVITY_Y = 20;  /* 划动的竖向灵敏度，单位像素，距离越短越容易触发 */

        flick=false;

      if(x>FLICK_SENSITIVITY_X) {
      touchedKeys[touchId].x = touch.pageX;
      touchedKeys[touchId].y = touch.pageY;
      var target = document.elementFromPoint(touch.pageX, touch.pageY);
      movePress(target, touch, touchId);
      flick=false;
      } else if(y>FLICK_SENSITIVITY_Y) {
        flick=true;
      }

          // touchedKeys[touchId].x = touch.pageX;
          // touchedKeys[touchId].y = touch.pageY;
          // var target = document.elementFromPoint(touch.pageX, touch.pageY);
          // movePress(target, touch, touchId);
        });
      }

      function onTouchEnd(evt) {
        evt.preventDefault();
        touchCount = evt.touches.length;

        handleTouches(evt, function handleTouchEnd(touch, touchId) {
          if (!touchedKeys[touchId]) return;
          var target = touch.target;
          if(flick) {
        // Render.showUppers(target);失败的思路

        //临时上档输出大写
        // Render.setShifted(!Render.isShifted());

        Render.showAlternatives(target);
        flick=false;
      }

空格左右滑动移动光标

            flick = false;          var keycode = Render.getCode(target);  
         if(keycode == KEYCODE_SPACE){
            skipKey=true;
            clearTimeout(menuTimeout);
            if(x>0)App.key(KEYCODE_LEFT);
             if(x<0)App.key(KEYCODE_RIGHT);}

         else{movePress(target, touch, touchId);}


----------------------------------
切换输入法

切换输入法可以定制，也可以在码表里配置命令直通车实现。

安卓系统切换输入法可以用：
1、系统自带的方法，比如有些系统默认右下角就是切换输入法的按键（非常方便），或者屏幕顶部下滑菜单中；
2、也可以自定义小小输入法的皮肤，按键布局或功能都可以自己改，实现某些按键动作调用这个功能：App.action("switchInputMethod")

我们以长按 b 来举例说明。

在 keyboard.html 中找到 “ /* keyboard layout */ ” 这里，在 alt 下面的按键对应关系中添加一行：
"b":'⌨',
然后往下找到 “ function getCode(key) ”，在 else if(label=="M") 下面添加一个else if，类似这样：
else if(label=="M")     return KEYCODE_MENU;
else if(label=="⌨")    return App.action("switchInputMethod");
保存后，重新切换到这个皮肤，或者切换到别的输入法再切换回来，试下长按 b 应该就会出现选择输入法的画面。

外观css


如何调整键盘高度
keyboar.css文件
/* Visible keys */
.keyboard-key > .visual-wrapper {
  display: inline-block;
  height: 4.0rem;                 该行85
  margin-bottom: 0.2rem;          该行86
85行调整按键高度　86行调整两行间隙


修改整个界面长度和宽度(最下面，上面的可以不管）

keyboard.html

changescale=window.innerwidth/72;
else
changescale=window.innerwidth/30;

上面的72是高度，下面的30是宽度，改为40比较好

只想改一下键盘布局的话，找到keyboard.html中Keyboards对象，看一下，就应该明白怎么改了
只想改一下字体大小的话，找到Render对象中的draw方法，找到
    changeScale = window.innerWidth / 30
    changeScale = window.innerWidth / 72
这样的语句，修改一下30和72这两个数字就可以了

————————————————————————————
keyboar.css文件：
52行调整首行按键与键盘上端间隙
70、77行调整两行间隙
76行调整按键高度
88行调整按键圆角
114、115行调整键内字符高度

非控制符按键部分：
129行调整高亮块下半部高度
166行调整高亮块上半部高度
168、169行调整高亮块外展大小

控制符按键部分，同理调整之
232行调整高亮块下半部高度
269、270行调整高亮块高度
271、272行调整高亮块外展大小
308行调整空格键高亮块高度

候选框部分
352行调整候选框高度
374行调整候选框内字的高度
375行调整一个候选项宽度

-------------------------------
英数和表情键盘的高度不一致，要改哪里呢？（表情键盘较高些，我想调低一些和英数一致）回到原帖
.emoji button{
  background: #f9f9f9;
  color: #000000;
  font: 1.6rem/2.8rem Sans-serif;
看图片不能确定。可以试试把emoji键盘字体大小和keyboard的字体大小调一致
.emoji{
position: absolute;
border-top: 1px solid transparent;
试试把solid后面改成transparent

改transparent好像无效？
.emoji{
position: absolute;
border-top: 1px solid rgb(176, 174, 168);


#keyboard-candidate-panel {
  height: 3rem;
  overflow: auto;
  white-space: nowrap;
  color: black;
  background: rgb(176, 174, 168);

.emoji{
position: absolute;
border-top: 1px solid rgb(176, 174, 168);

要把候选栏的背景色 和 emoji的上边框改成同一个颜色，我刚试是ok的。输入编码后长按enter是Esc效果，取消编码用的。

我这里的观察是，英数键盘上面被padding了0.3rem，但是emoji没有。若把0.3rem拿掉就和emoji等高了。
但反过来，我不知道如何在emoji上方padding 0.3rem，使它和英数键盘等高。


.keyboard-row.first-row {
  /* dgod 0.5 is too big, 0.3 may better */
  padding-top: 0.3rem;
  border-top: solid 1px #000;
}

你说的是这样啊，好像没办法。非要如此，只能取消英文键盘padiing-top：英文键盘和emoji的上边框了。

————————————————————
如何更改“输入候选栏”的颜色？
keyboard.css里面改

#keyboard-candidate-panel {
  height: 4.9rem;
  overflow: auto;
  white-space: nowrap;
  color: black;
  background: rgb(176, 174, 168);
  border-top: 1px solid #e8e8ff;
  border-bottom: 1px solid #808098;
  display: none;
}

修改候選首選項字詞顏色
#keyboard-candidate-panel span.first {
 color: #008ae0;
}
修改非首選項字詞編碼的顏色
#keyboard-candidate-panel span label.codetip {
 color: #008ae0;
}

————————————————————————————
按键间距与圆角是调节哪个参数？
间距
搜logic keys，调下面的padding参数。
圆角
搜visible keys，调下面的border-radius参数

按键上标的颜色在哪里修改？
搜索alt-note, 定位到第二处，修改color颜色值

----------------------------------------------------

数字、符号、退格、回车的字体位置：
.keyboard-key.special-key > .visual-wrapper > span {
  color: #000000;
  font: 1.9rem/3.2rem 'Keyboard Symbols', Sans-serif;
}

中英文切换的字体位置：

.keyboard-key[data-keycode='-2'] > .visual-wrapper > span {
  font: 600 1.9rem/3.2rem Sans-serif;
--------------------------------------------------------------
键盘点按、按住为色块
.keyboard-key.highlighted2 >.visual-wrapper {
  background: rgba(72, 118, 255, 1);
}

.keyboard-key.highlighted2.alt-show >.visual-wrapper {
  background: rgba(0,0,255,.3);
}

键盘点按、按住为边框色
.keyboard-key.highlighted2 >.visual-wrapper {
  border: solid 0.1rem #009E95;
}

.keyboard-key.highlighted2.alt-show >.visual-wrapper {
  border: solid 0.1rem #E35900;
}
--------------------------------------------

修改指南



小小输入法手机版本使用c语言开发了输入法引擎，使用java作为和系统的胶合层，用html,js,css技术开发了用户界面，使用起来的感觉只能说凑合。
html主要修改键盘布局和功能
css改外观（键高颜色字体大小等）
精通js和html

安卓上，修改了keyboard.css，要重启才能生效？
重启输入法即可
来回切换不同的输入法么？这个用于keyboard.html是可行的，但keyboard.css不行啊
在系统设置的应用里面强制关闭应用即可

—————————————————————————————


————————————————————————————
/* timer */
const MENU_TIMEOUT = 250;//长按设定从原500ms缩短为250ms
const TIP_TIMEOUT = 130;//提示弹出时长设定为130ms

输入提示的弹出时间有点长啊。
提示弹出框会遮住上面的按键，导致输入快时，按上方按键会导致错误的输出为下方按键，这个问题能否改进一下？那是两百毫秒，你在手机上能达到5的手速？
需要的话，你改一下皮肤好了，或者在输入法设置里面把按键提示去了

在九宫格时，按96这两数字时很容易触发。
怎么改皮肤？不想没有按键提示，还是挺有用的，能知道是否按对了键。
找到那个200，改小点好了
在不影响显示和输入的情况下，加了一句 const TIP_TIMEOUT = 140;
————————————————————————————
希望小小安卓版皮肤左右手控制的键盘区中间有条分隔线
由于使用全键盘，双手操作输入，如能将键盘左右手控制的分隔线用粗线或其他颜色线显示，将有助于左右手找准键位。
就是T、Y和G、H之间的竖线。

可以这样，在keyboard.html里找这个

            [{v:'q'},{v:'w'},{v:'e'},{v:'r'},{v:'t'},
             {v:'y'},{v:'u'},{v:'i'},{v:'o'},{v:'p'}],

一个方括号就是一行。你在t后面加一个

{v:'|'},

变成


           [{v:'q'},{v:'w'},{v:'e'},{v:'r'},{v:'t'},{v:'|'},
             {v:'y'},{v:'u'},{v:'i'},{v:'o'},{v:'p'}],

但这一来，就多了一个键，必须缩键宽。这样做：

            [{v:'q',r:0.9},{v:'w',r:0.9},{v:'e',r:0.9},{v:'r',r:0.9},{v:'t',r:0.9},,{v:'|'},
             {v:'y',r:0.9},{v:'u',r:0.9},{v:'i',r:0.9},{v:'o',r:0.9},{v:'p',r:0.9}],

只要所有值加起来比10小,一行就放得下，不然有的键会出去。

可以多试几次，我就是这么改的。

还有个方法，是针对特定键改css的样式，这个比较麻烦，得知道tgb这几个键的编号，知道的话，在css里，用margin限定一下就行，这需要一些html和css的基础。我没这么改过，估计可行。
这个要比上一个看起来自然，上一个多了一个键。

反正会用html和css的，想怎么改都行。只要不怕麻烦就行。

多加一个键不好，还是算了。
嗯，还是先学习一个html/css再搞吧。。我也想搞的，因为有一些按键为防止误按需要和其他键有些距离，以减少误击率。现在的实现是各个键的间距都是一致的，似乎不太方便去单独自定义。

——————————————————————————————————————
安卓下的输入法面板，中英键盘上的标点显示怎么修改？
因为中文输入时，键盘上的标点也是显示英文标点，但实际输入的是中文符号，不直观，不知怎么修改，使得中文时键盘显示为中文字符？
在function setState(state,name)的最后加了
        if (_state==1)
            Render.setKeyboard(Keyboards.english);
        else
            Render.setKeyboard(Keyboards.chinese);
        Render.draw();
然后再加了一个chinese的键盘布局，实现了此功能。不懂html，凑合用用。。
————————————————————————————
怎么实现加入长按a键全选的功能
① 在html文件做了如下更改，偶尔可以实现长按a全选，x剪切，c复制，v粘贴。但有时会出现故障。而且如果长按c键复制“测试”，然后输入了一个字（比如：和），再长按v粘贴会粘贴上“测试和”。
if(keycode==KEYCODE_a || keycode==KEYCODE_A || keycode==KEYCODE_x || keycode==KEYCODE_X || keycode==KEYCODE_c || keycode==KEYCODE_C || keycode==KEYCODE_v || keycode==KEYCODE_V){ skipKey=true;
 switch(keycode){
 case KEYCODE_a:keycode=App.action("selectAll")|0;break;
 case KEYCODE_A:keycode=App.action("selectAll")|0;break;
 case KEYCODE_x:keycode=App.action("cut")|0;break;
 case KEYCODE_X:keycode=App.action("cut")|0;break;
 case KEYCODE_c:keycode=App.action("copy")|0;break;
 case KEYCODE_C:keycode=App.action("copy")|0;break;
 case KEYCODE_v:keycode=App.action("paste")|0;break;
 case KEYCODE_V:keycode=App.action("paste")|0;break;


② 在enter键加入长按esc的功能。在输入编码后，长按enter能清除编码。但如果直接长按enter，会输入一个空格，有点像Tab键的效果。

function getCode(key){
 if(_menuKey){
 var label=getDataset(key,"alt");
 if(label=="→|")
 return KEYCODE_TAB;
 else if(label=="M")
 return KEYCODE_MENU;
else if(label=="☒")
return KEYCODE_ESC;
 else if(label=="符" && getDataset(key,"keycode")==KEYCODE_SWITCH_number)
 return KEYCODE_SWITCH_number2;
 if(label.length!=1)
 return 0;
 var code=label.charCodeAt(0);
 if(code>=255) code=0;
 return code;
 }

——————————————————————————————
安卓键盘如何加入ctrl模拟
const KEYCODE_CTRL=0x11;



key : [
 [{v:'Ctrl',c:KEYCODE_CTRL},


function setCtrled(state){
 if(_layout.ctrled==state)
 return;
 if(state!='locked')
 _layout.ctrled=state;
 
 var key = document.querySelector(KEY_TAG+'[data-keycode="' + KEYCODE_CTRL + '"]');
 if(!key) return;


周大，参照shift键改的，不知道这样对不对，请问这样能添加上ctrl键吗？想达到按一下模拟按住ctrl不动，再按一下取消这样的效果

这样不够，没简单办法，建议有什么功能键要用的话，可以增加相应的按钮专门输出对应的功能

——————————————————————————————
候选栏有个：）符的语音按键，
按了出现“语音识别服务不存在”，不知怎么用？？

安装讯飞语音+ 或同类服务即可
语音自带是有，但是要安装讯飞语记调用才可以，基本不用所以就去掉了。需要语音输入的时候不如直接切讯飞或搜狗输入法
————————————————————————
小小输入法手机版一次只能处理一个按键
如果空格按得太快就会把前一个键吞掉。
而且，在我这边，小小手机版可以一次处理5个按键，但只要有空格键或退格键参与的时候，就不行。
空格键和退格键是按下就即时输出的，字母键是松开才输出的。所以，字母键的输出比空格慢了一点，如果两键相隔时间短到某个值，字母就被吞了。也许是因为这样吧

有什么办法解决吗
改皮肤

找到
        if(keycode==KEYCODE_DEL){
            if(Render.getSelect()==-1) {
                skipKey=true;
                Render.showCandidates([],0,false);
            } else {    
                skipKey=true;
                App.key(keycode);
                deleteTimeout=setTimeout(function(){
                    App.key(keycode);
                    deleteInterval = setInterval(function() {
                        App.key(keycode);
                    }, REPEAT_RATE);
                },REPEAT_TIMEOUT);
            }
        } else if(keycode==KEYCODE_SPACE) {
            skipKey=true;
            App.key(keycode);
        } else {
            setMenuTimeout(target,coords,touchId);
        }
        Render.highlightKey(target);

改为
        if(keycode==KEYCODE_DEL){
            if(Render.getSelect()==-1) {
                skipKey=true;
                Render.showCandidates([],0,false);
            } else {
                setMenuTimeout(target,coords,touchId);
            }
        } else if(keycode==KEYCODE_SPACE) {
            skipKey=true;
            App.key(keycode);
        } else {
            setMenuTimeout(target,coords,touchId);
        }
        Render.highlightKey(target);
———————————————————————————————
手机版按键提示按太快会出错
按键提示按太快会覆盖上方的按键。比如，迅速按JU两个键，会变成JJ
delayTimeout=undefined;
},200-diff);
html这行200改为120-diff就好了


把主题按钮也移到键盘敢底下
是指菜单按钮吗？html里面改：
document.getElementById("leftId1").ontouchstart=function (){
        App.key(KEYCODE_MENU);
      }


    明暗主题这个，要移动就把这些必要但不常用的都移下来。
    有劳，有劳！
这下真改好了


<button id="theme" class="bottom-button" style="width:12%;">暗</button>



     var skin = document.getElementById("css");
     skinX = document.getElementById("theme");
     if (skin.href.substr(-12) == "keyboard.css") {
       skinX.innerHTML = "暗";
     } else {
       skinX.innerHTML = "明";
     }

     document.getElementById("theme").ontouchstart = function () {
       if (skinX.innerHTML == "暗") {
         skin.href = skin.href.substr(0, skin.href.length - 12) + "keyboardl.css";
         console.log(skin.href);
         skinX.innerHTML = "明";
       } else {
         skin.href = skin.href.substr(0, skin.href.length - 13) + "keyboard.css";
         console.log(skin.href);
         skinX.innerHTML = "暗";
       }
     }

-----------------------------------------
    flatF2023_01_09这个皮肤，候选词上移下移是如何使用的？我在候选词时点按↟↡没有效果。还有请问自造词是否也可以上移下移调整次序？
    回到原帖

html 搜索230,找到下面内容，加上ctrl_up和ctrl_down
```
        if ((keyCode >= 230 && keyCode != KEYCODE_DEL_F && keyCode != KEYCODE_LEFT && keyCode != KEYCODE_RIGHT && keyCode != CTRL_UP && keyCode != CTRL_DOWN) || isNaN(keyCode)) keyCode = 0;


    能不能让符号上屏后返回字母键盘
 这个功能来自JadeHua的皮肤， const KEYCODE_SWITCH_sf = -18;
在html里搜索所有KEYCODE_SWITCH_sf，看看数字键盘的@怎么实现的，然后参照修改应该就行了

---------------------------------------------------------
可以预览到候选栏组件
    var debug=false;//navigator.userAgent.indexOf("Android")<=0;

只看到候选栏候选项
    var debug=navigator.userAgent.indexOf("Android")<=0;

---------------------------------------------------------