Autore Topic: Custom Keyboard View  (Letto 610 volte)

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Custom Keyboard View
« il: 07 Dicembre 2015, 13:16:05 CET »
0
Ciao a tutti! sto provando a creare una tastiera personalizzata, ho letto un pò sul forum ma non ho trovato nulla che facesse al caso mio (ho visto anche il tutorial proposto, ma non descrive la parte che mi occorre) in pratica dopo aver scoperto che Horizontal Gap ha un bug come suggerito in http://www.anddev.it/index.php?topic=17317.msg85599#msg85599 e quindi non è possibile utilizzarlo (qualcuno mi smentisca nel caso sbaglio) sto provando a modificare la classe KeyboardView come proposto qui https://android.googlesource.com/platform/development/+/master/samples/SoftKeyboard/src/com/example/android/softkeyboard/SoftKeyboard.java tuttavia se provo a modificare lo sfondo impostando
Codice (XML): [Seleziona]
android:background:"@color/coral" ottengo questa immagine (come vedete in allegato) in pratica ci sono dei fili neri, attorno alle key che non fanno parte del background, qualcuno sa qual'è la parte di codice corrispondente per modificarla? io non sono riuscita a trovarla :-( ho letto questo topic http://stackoverflow.com/questions/18224520/how-to-set-different-background-of-keys-for-android-custom-keyboard ma qui i filetti vengono solo coperti con un altro colore! in pratica dovrei ottenere una keyoard più o meno così (come in allegato: da ottenere), qualsiasi metodo e consiglio è ben accetto vorrei capire come si fa perchè proprio non riesco!
« Ultima modifica: 07 Dicembre 2015, 13:32:58 CET da jox »

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #1 il: 08 Dicembre 2015, 14:15:24 CET »
0
A giudicare dall'allegato hai bisogno di cambiare il drawable utilizzato per disegnare lo "sfondo" dei tasti.

Puoi farlo utilizzando l'attributo android:keybackground=@drawable/xxx nell'XML che definisce la keyboardview.

Purtroppo però in questo modo tutti i tasti hanno lo stesso aspetto, ed a giudicare dalla tua anteprima alcuni dovrebbero essere più scuri.

Per risolvere questo problema è necessario eseguire l'override del metodo onDraw della KeyboardView.

Dettagli ed esempi li trovi qui: how to change key background of any key in Android soft keyboard
Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Re:Custom Keyboard View
« Risposta #2 il: 12 Dicembre 2015, 12:44:59 CET »
0
Ho disegnato la mia tastiera facendo override del metodo ondraw così
Codice (XML): [Seleziona]
    @Override
    public void onDraw(Canvas canvas) {
       // super.onDraw(canvas);

        List<Key> keys = getKeyboard().getKeys();
        for (Key key : keys) {

           
                Log.e("KEY", "Drawing key with code 32 " + key.codes[0]);
                Drawable dr = (Drawable) context.getResources().getDrawable(R.drawable.key_done);
                dr.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
                dr.draw(canvas);

         
        }
    }
dove disegno un bottone attraverso un xml come questo
Codice (XML): [Seleziona]
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Action keys. -->
    <item  android:state_pressed="false">


        <layer-list>

            <item android:top="2dp"

               android:left="2dp"
               android:right="2dp">
                <shape>
                    <solid android:color="@color/spacebar_text_shadow_color_holo"/>
                    <corners android:radius="5dp"/>
                </shape>
            </item>

            <item
               android:top="2dp"
               android:bottom="2dp"
               android:left="2dp"
               android:right="2dp">
                <shape android:shape="rectangle" >


                    <corners android:radius="5dp"/>
                    <gradient android:type="radial"
                       android:gradientRadius="250"
                       android:startColor="@color/green"
                       android:endColor="#B2B2B2"
                       />
                    <padding
                       android:left="10dp"
                       android:top="10dp"
                       android:right="10dp"
                       android:bottom="10dp"/>

                </shape>
            </item>

        </layer-list>




    </item>
e ottengo questa immagine in allegato ora non so se sia il metodo migliore, perchè in realtà io volevo solo colorare i tasti già esistenti e non ridisegnarne la forma, tuttavia dal tutorial che mi hai consigliato l'utente si limita a cprire con un altro colore i tasti, ma così facendo copre anche gli spazi tra i tasti, come puoi vedere dall'immagie nel post che mi hai linkato.
ora però il problema è che non riesco a metterci delle keyicon sopra, ho letto su internet di aggiungere queste righe di codice al metodo ondraw
Codice (XML): [Seleziona]
 Paint paint = new Paint();
//            paint.setTextAlign(Paint.Align.CENTER);
            paint.setTextAlign(Paint.Align.RIGHT);
            paint.setTextSize(15);
            paint.setColor(Color.DKGRAY);

 if (key.label != null) {
                canvas.drawText(key.label.toString(), key.x + (key.width / 2),
                        key.y + (key.height / 2), paint);
            } else {
                key.icon.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
                key.icon.draw(canvas);
            }
tuttavia il font appare definito e chiaro mentre l'immagine che imposto come keyIcon appare molto sfocata ed essendo una ninepatch si deforma in base alla modalità dello schermo (landscape o portrait) mentre io voglio che mantenga la sua forma così come fa il font. qui il codice della tastiera
Codice (XML): [Seleziona]
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
   android:keyWidth="10%p"
   android:horizontalGap="0px"
   android:verticalGap="0px"
   android:keyHeight="@dimen/key_height"
   >

    <Row>
        <Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>
        <Key android:codes="119" android:keyLabel="w"/>
        <Key android:codes="101" android:keyLabel="e"/>
        <Key android:codes="114" android:keyLabel="r"/>
        <Key android:codes="116" android:keyLabel="t"/>
        <Key android:codes="121" android:keyLabel="y"/>
        <Key android:codes="117" android:keyLabel="u"/>
        <Key android:codes="105" android:keyLabel="i"/>
        <Key android:codes="111" android:keyLabel="o"/>
        <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/>
    </Row>

    <Row>
        <Key android:codes="97" android:keyLabel= "a"" android:horizontalGap="5%p"
               android:keyEdgeFlags="left"/>

        <Key android:codes="115" android:keyLabel="s"/>
        <Key android:codes="100" android:keyLabel="d"/>
        <Key android:codes="102" android:keyLabel="f"/>
        <Key android:codes="103" android:keyLabel="g"/>
        <Key android:codes="104" android:keyLabel="h"/>
        <Key android:codes="106" android:keyLabel="j"/>
        <Key android:codes="107" android:keyLabel="k"/>
        <Key android:codes="108" android:keyLabel="l" android:keyEdgeFlags="right"/>
    </Row>

    <Row>
        <Key android:codes="-1" android:keyIcon="@drawable/sym_keyboard_shift"
               android:keyWidth="15%p" android:isModifier="true"
               android:isSticky="true" android:keyEdgeFlags="left"/>
        <Key android:codes="122" android:keyLabel="z"/>
        <Key android:codes="120" android:keyLabel="x"/>
        <Key android:codes="99" android:keyLabel="c"/>
        <Key android:codes="118" android:keyLabel="v"/>
        <Key android:codes="98" android:keyLabel="b"/>
        <Key android:codes="110" android:keyLabel="n"/>
        <Key android:codes="109" android:keyLabel="m"/>
        <Key android:codes="-5" android:keyIcon="@drawable/sym_keyboard_delete"
               android:keyWidth="15%p" android:keyEdgeFlags="right"
               android:isRepeatable="true"/>
    </Row>

    <Row android:rowEdgeFlags="bottom">
        <Key android:codes="-3" android:keyIcon="@drawable/sym_keyboard_done"
               android:keyWidth="15%p" android:keyEdgeFlags="left"/>
        <Key android:codes="-2" android:keyLabel="123" android:keyWidth="10%p"/>
        <!--
           android:codes: -101 is not a framework-defined key code but a key code that is
           privately defined in com.example.android.softkeyboard.LatinKeyboardView.
       -->
        <Key android:codes="-101" android:keyIcon="@drawable/sym_keyboard_language_switch"
               android:keyWidth="10%p"/>
        <Key android:codes="32" android:keyIcon="@drawable/sym_keyboard_space"
               android:keyWidth="30%p" android:isRepeatable="true"/>
        <Key android:codes="46,44" android:keyLabel=". ,"
               android:keyWidth="15%p"/>
        <Key android:codes="10" android:keyIcon="@drawable/sym_keyboard_return"
               android:keyWidth="20%p" android:keyEdgeFlags="right"/>
    </Row>
</Keyboard>
« Ultima modifica: 12 Dicembre 2015, 16:51:50 CET da jox »

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #3 il: 12 Dicembre 2015, 12:52:46 CET »
0
Se non l'hai già fatto, prova a modificare i nine-patch in modo che l'immagine mantenga la sua forma.

Esempio:
Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Re:Custom Keyboard View
« Risposta #4 il: 12 Dicembre 2015, 12:58:42 CET »
0
Le immagini le genero con Android Asset studio, sinceramente non ho capito bene come si fa a non farle deformare

Post unito: 12 Dicembre 2015, 13:07:53 CET
In ogni caso se inserisco l'immagine nella tastiera di default le proporzioni rimangoo corrette, sembra un problema della mia tastiera
« Ultima modifica: 12 Dicembre 2015, 13:07:53 CET da jox, Reason: Merged DoublePost »

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #5 il: 12 Dicembre 2015, 13:09:44 CET »
+1

In breve: i nine-patch sono comuni PNG il cui bordo (1 pixel sopra, sotto, a destra ed a sinistra) contiene informazioni sul ridimensionamento ed il padding.

Il bordo superiore ed il bordo sinistro contengono le informazioni di ridimensionamento. I pixel neri indicano la parte di immagine da stretchare, i pixel bianchi o trasparenti indicano che quella parte di immagine non va ridimensionata. Immagina una cornice con gli angoli arrotondati: gli angoli non vanno deformati quindi in loro corrispondenza lascio il pixel trasparente.

Il bordo inferiore e destro indicano il padding, ed è utile solo se l'immagine è usata come sfondo. I pixel neri indicano dove posizionare il testo all'interno dell'immagine (ripeto: solo se l'immagine è usata come sfondo in una View).

Per altre info consulta:

Draw 9-patch | Android Developers

A simple guide to 9-patch for Android UI | @radley

Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Re:Custom Keyboard View
« Risposta #6 il: 12 Dicembre 2015, 13:22:08 CET »
0
Comunque il problema si pone anche se inserisco un png, l'immagine a quel punto non si deforma, ma appare tutta sfocata, c'è un metodo adatto per impostare la keyicon da java invece che da xml?

Post unito: [time]12 Dicembre 2015, 13:22:41 CET[/time]
o forse sbaglio la risoluzione????? non so proprio come fare.

Post unito: [time]12 Dicembre 2015, 16:56:26 CET[/time]
Citazione
ora però il problema è che non riesco a metterci delle keyicon sopra, ho letto su internet di aggiungere queste righe di codice al metodo ondraw

 Paint paint = new Paint();
//            paint.setTextAlign(Paint.Align.CENTER);
            paint.setTextAlign(Paint.Align.RIGHT);
            paint.setTextSize(15);
            paint.setColor(Color.DKGRAY);

 if (key.label != null) {
                canvas.drawText(key.label.toString(), key.x + (key.width / 2),
                        key.y + (key.height / 2), paint);
            } else {
                key.icon.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
                key.icon.draw(canvas);
            }
tuttavia il font appare definito e chiaro mentre l'immagine che imposto come keyIcon appare molto sfocata
io credo che il mio problema sia proprio qui, mentre il font viene impostato bene, la key icon viene disegnata in base alla grandezza dello schermo, quindi è normale che si deformi, c'è un modo per disegnarla con le sue dimensioni reali???

Post unito: 12 Dicembre 2015, 19:35:35 CET
Avrei inoltre un ulteriore domanda, se volessi inserire dei ong nella mia keyboard (con risoluzione adatta ad ogni dispositivo) quanto dovrebbe essere grande la mia immagine? e a che risoluzione? io pensavo di scalare le imagini attraverso questo sito https://romannurik.github.io/AndroidAssetStudio/icons-generic.html#source.space.trim=1&source.space.pad=0&size=24&padding=8&color=33b5e5%2C100&name=ic_example
« Ultima modifica: 12 Dicembre 2015, 19:35:35 CET da jox, Reason: Merged DoublePost »

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #7 il: 12 Dicembre 2015, 23:03:53 CET »
+1
Prova così:

Codice (Java): [Seleziona]
            if (key.label != null) {
                canvas.drawText(key.label.toString(), key.x + (key.width / 2),
                        key.y + (key.height / 2), paint);
            } else {
                //Disegna l'icona con le sue dimensioni
                key.icon.setBounds(key.x, key.y, key.x + key.icon.getIntrinsicWidth(), key.y + key.icon.getIntrinsicHeight());
                key.icon.draw(canvas);
            }

Dovrebbe disegnare le icone con la loro dimensione in alto a sinistra sul tasto.
Per centrare l'icona nel tasto usa

Codice (Java): [Seleziona]
                int top = key.y + (key.height - key.icon.getIntrinsicHeight())/2;
                int left = key.x + (key.width - key.icon.getIntrinsicWidth())/2;
                key.icon.setBounds(left, top, left + key.icon.getIntrinsicWidth(), top + key.icon.getIntrinsicHeight());
Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Re:Custom Keyboard View
« Risposta #8 il: 13 Dicembre 2015, 01:16:08 CET »
0
Si funziona!!!ero riuscita a dargli la dimensione ma non riuscivo a centrarlo, ti ringrazio!! tuttavia..c'è ancora un problema! :/ le immagini continuano ad essere sfocate e ho notato una cosa. prima utilizzavo questa guida
Codice (XML): [Seleziona]
http://code.tutsplus.com/tutorials/create-a-custom-keyboard-on-android--cms-22615 e impostando nel input.xml
Codice (XML): [Seleziona]
android:keyBackground="drawable/keystyle" con keystyle.xml
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2013 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
         http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Action keys. -->
    <item  android:state_pressed="false">
<layer-list>
      <item
       android:top="2dp"
       android:bottom="2dp"
       android:left="1.5dp"
       android:right="1.5dp">
                <shape android:shape="rectangle" >
                <!--<solid android:color="@color/colorAccent" />-->

                <corners android:radius="5dp"/>
                <gradient android:type="radial"
               android:gradientRadius="250"
               android:startColor="#ffff"
               android:endColor="#B2B2B2"
               />
                    <padding
                   android:left="10dp"
                   android:top="10dp"
                   android:right="10dp"
                   android:bottom="10dp"/>

                </shape>
            </item>



    </item>

</layer-list>
</selector>
ottenendo l'immagine nell'allegato 1. Poi su internet ho letto che LatinKeyboard permette una maggiore personalizzazione e così ho preso spunto da questo codice https://android.googlesource.com/platform/development/+/master/samples/SoftKeyboard?autodive=0%2F che è quello che sto utilizzando attualmente, ma se provo semplicemente a prendere il codice e fare la stessa cosa andando a modificare in input.xml e impostando
Codice (XML): [Seleziona]
android:keyBackground="drawable/keystyle" con keystyle.xml ottengo l'immagine nell'allegato 2 che come puoi vedere è tutto sfocato! sapresti spiegarmi perchè accade ciò e sapresti dirmi che differenza c'è tra i due tipi di keyboard ed eventualmente qual è la migliore?

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #9 il: 13 Dicembre 2015, 17:20:38 CET »
0
Le immagini che usi risultano sfuocate perché vengono ridimensionate in automatico per soddisfare la risoluzione del dispositivo.

In pratica l'immagine che hai creato va bene per un dispositivo con (esempio) 160 dpi (punti per pollice). In questo dispositivo per fare un disegno di un pollice di larghezza serve un'immagine di 160 pixel.

Un dispositivo con risoluzione maggiore ha, ad esempio, 320 dpi. In questo caso per fare un disegno di un pollice di larghezza serve un'immagine di 320 pixel.

Se la seconda immagine non viene fornita, Android in automatico utilizza la prima ridimensionandola, ma questa operazione la fa apparire sfuocata.

La soluzione consiste nel creare immagini di diversa risoluzione da piazzare in drawable-hdpi, drawable-xhdpi, ecc.

Vedi: Supporting Multiple Screens | Android Developers
Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.

Offline jox

  • Nuovo arrivato
  • *
  • Post: 34
  • Respect: 0
    • Mostra profilo
Re:Custom Keyboard View
« Risposta #10 il: 13 Dicembre 2015, 17:29:03 CET »
0
I due screen che ti ho allegato sono sullo stesso dispositivo, e con le stesse identiche immagini (create nelle varie cartelle con varie risoluzioni) quello che sembra è che se uso l'estensione LatinKeyboard come suggerito qui https://android.googlesource.com/platform/development/+/master/samples/SoftKeyboard/src/com/example/android/softkeyboard/SoftKeyboard.java il risultato è sfocato (anche senza implementare il metodo ondraw ma semplicemente impostando un keybackground), probabilmente è qualcosa nel codice che lo fa sfocare, ma non riesco proprio a capire cosa sia, se invece uso questo codice http://code.tutsplus.com/tutorials/create-a-custom-keyboard-on-android--cms-22615 e imposto lo stesso keybackground con le stesse keyIcon, le immagini appaiono nitide (come puoi vedere dai due allegati). Non riesco a capire..

Post unito: [time]13 Dicembre 2015, 17:40:04 CET[/time]
In ogni caso non sono sfocate solo le keyLabel che sono immagini, ma lo stesso keybackground che è impostato attraverso un xml utilizzando le shape, tutta l'immagine appare offuscata

Post unito: 13 Dicembre 2015, 18:15:20 CET
Io comunque attualembte sto creando delle immagini di 70 x 70 pixel di tipo 9.png ad una risoluzione di 400 dpi che poi scalo automaticamente con android asset studio https://romannurik.github.io/AndroidAssetStudio/index.html e imposto come keyIcon e come ti dicevo usando i due progetti la risoluzione è differente. Sbaglio qualcosa nell'immagine??
« Ultima modifica: 13 Dicembre 2015, 18:15:20 CET da jox, Reason: Merged DoublePost »

Offline Ohmnibus

  • Utente senior
  • ****
  • Post: 582
  • Respect: +130
    • Google+
    • @ohmnibus
    • Mostra profilo
    • Lords of Knowledge GdR
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    Ohmnibus
  • Sistema operativo:
    Windows 7 x64
Re:Custom Keyboard View
« Risposta #11 il: 14 Dicembre 2015, 10:31:20 CET »
0
Non so dirti perché la seconda tastiera risulti sfocata, nel post precedente mi riferivo unicamente ai simboli sulla tastiera (shift, del, ecc.)

Asset studio va bene, ma devi usare in partenza un'immagine di grandi dimensioni per le alte risoluzioni e rimpiccolirle per le altre risoluzioni. 70x70 mi sembra un po' poco... prova con immagini di 192 x 192
Ohmnibus
Le mie app su Play Store

È stata trovata una soluzione al tuo problema? Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato.