Quelle(s) solution(s) pour des interfaces graphiques plus avancées ?

Version imprimable

10/02/2017, 16h12
AndroidNewbie

2 pièce(s) jointe(s)

Quelle(s) solution(s) pour des interfaces graphiques plus avancées ?

Bonjour,

Je développe en ce moment une application sous Android.
Je n'utilise actuellement rien de plus que le glisser-déposer pour réaliser mes interfaces (voir ci dessous).
Pièce jointe 243393

Or, j'aimerais pouvoir réaliser des interfaces avec des graphismes différents, comme pour cette image (dont chaque partie serait un bouton)
Pièce jointe 243398

en dehors de ce besoin spécifique; sauriez vous me conseiller sur la démarche à adopter pour avoir des objets graphiques personnalisés, ou au moins plus avancé que ceux fournis de base par android studio ?

Merci d'avance
11/02/2017, 10h34
grunk

Il va te falloir créer tes propres widget en héritant soit d'un widget proche soit directement de View pour tout personnaliser toi même et donc dessiner chaque élément de ta vue.

Tu peux regarder ces deux tuto qui aborde le sujet :

http://davy-leggieri.developpez.com/...tion-boussole/
http://vogella.developpez.com/tutori...e-et-composee/
13/02/2017, 14h28
AndroidNewbie

Merci de votre réponse, je vais essayer de me familiariser avec les Canvas afin de pouvoir personnaliser mes bouttons.

Cependant, sauf erreur de ma part, je n'ai trouvé nul part mention d'une solution permettant à mes boutons de ne pas adopter une forme rectangulaire. Quand bien même j'arriverai à obtenir la forme souhaitée via le Canvas, je ne veux pas que si l'utilisateur clique sur une partie à cote, la méthode onClick soit appelée.

Sauriez vous me conseiller de nouvelles sources documentaire complémentaires ?

Merci d'avance
13/02/2017, 15h22
grunk

Le canvas te permet de dessiner exactement ce que tu veux.

Le canvas de ta vue est forcément un rectangle. Sur ce canvas tu dessines ce que tu veux (un rond , un arc de cercle , un carré ...). C'est ce dessin qui représente ta vue.

Pour la gestion des événement , tu peux avoir un simple onCLick sur l'ensemble de la vue (le rectangle englobant) ou alors customiser l'événement pour n'accepter que les événement si le doigt est posé dans une zone bien particulière du dessin :
https://developer.android.com/traini...viewgroup.html

Dans ton cas , si il sagit simplement de bouton il est peut être plus simple de faire des imagebutton et de gérer si le click est au bon endroit ou pas
13/02/2017, 16h21
AndroidNewbie

Effectivement, je suis entre temps parti pour cette solution d'avoir des imagebutton et de vérifier ou le click s'opère.
Il n'y a donc aucune autre solution qui permettrait d'avoir une vue non rectangulaire ?

Merci pour l'aide apportée, j'éditerai mon post initial avec la démarche et le code, si cela peut servir à d'autre.
13/02/2017, 16h41
Hephaistos007

Pour compléter, regardes du coté des Drawable : http://vogella.developpez.com/tutori...tion-drawable/
14/02/2017, 00h11
grunk

Citation:

Envoyé par AndroidNewbie

Il n'y a donc aucune autre solution qui permettrait d'avoir une vue non rectangulaire ?

une vue à une largeur et une hauteur , donc à partir de là elle à un rectangle englobant.
Ca ne veux pas pour autant dire que ce qui est affiché est rectangulaire ;)

1 pièce(s) jointe(s)

J'ai jeté un oeil à la documentation sur l'interception d’événement onTouch, mais je n'ai pas d'idée sur comment savoir si oui ou non, l'utilisateur appuie sur une partie "valide" du bouton.

le code de mon activité

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
public class CercleActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cercle);
    }
 
 
    public void onClickButton(View view) {
        switch (view.getId()) {
            case R.id.buttonCercle1:
                //
                Toast.makeText(this,"BTN1",Toast.LENGTH_SHORT).show();
                break;
            case R.id.buttonCercle2:
                //
                Toast.makeText(this,"BTN2",Toast.LENGTH_SHORT).show();
                break;
            case R.id.buttonCercle3:
                //
                Toast.makeText(this,"BTN3",Toast.LENGTH_SHORT).show();
                break;
            case R.id.buttonCercle4:
                //
                Toast.makeText(this,"BTN4",Toast.LENGTH_SHORT).show();
                break;
        }
    }//onClickButon
 
 
}

le code du layout associé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_cercle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="CercleActivity">
 
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:id="@+id/buttonCercle1"
        android:onClick="onClickButton"
        android:background="@drawable/quartdecercle"/>
 
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/buttonCercle2"
        android:onClick="onClickButton"
        android:background="@drawable/quartdecercle2"/>
 
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/buttonCercle3"
        android:onClick="onClickButton"
        android:background="@drawable/quartdecercle3"/>
 
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:id="@+id/buttonCercle4"
        android:onClick="onClickButton"
        android:background="@drawable/quartdecercle4"/>
</RelativeLayout>

Pièce jointe 244535

J'ai trouvé certaines méthodes prenant en paramètre un "MotionEvent", duquel on peut récupérer les positions x et y. Est-ce une bonne piste pour mon besoin ?

15/02/2017, 09h07
grunk

En passant par une vue que tu aurais dessiné sur un canvas c'est relativement facile puisque pour une coorodonées X,Y tu devrais être capable de savoir si tu es dans ta zone de dessin ou non.

Dans le cas d'un Imagebutton (et non d'un button) tu peux je pense essayer de regarder la couleur du pixel correspondant à l'endroit du clic. Si c'est d'une certaine couleur tu execute ton action sinon il ne se passe rien.

Pour ça il faut ajouter un OnTouchListener à tes vues. Dans ce listener tu pourras récupérer les coordonnées via l'objet MotionEvent et ses méthode getX()/getY(). Ne reste alors plus qu'à récupérer la bitmap de la vue et de vérifier la valeur de couleur du pixel via Bitmap.getPixel.

Niveau performance ça doit pas être fantastique ceci dit.
Perso je laisserai la zone de clic rectangulaire sachant que instinctivement l'utilisateur va cliquer sur le bouton et pas à coté.

Après avoir suivi quelques tutoriels, je reviens vers vous, car je n'arrive pas à trouver l'origine de mon problème.

J'ai, comme conseillé, mis en place un ImageButton avec un onTouchListener, comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class MainActivity extends AppCompatActivity {
 
    private ImageButton b1;
    private ImageButton b2;
    private ImageButton b3;
    private ImageButton b4;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        b1 = (ImageButton) findViewById(R.id.imageButton);
        b2 = (ImageButton) findViewById(R.id.imageButton2);
        b3 = (ImageButton) findViewById(R.id.imageButton3);
        b4 = (ImageButton) findViewById(R.id.imageButton4);
 
        b1.setOnTouchListener(new View.OnTouchListener(){
            public boolean onTouch(View view, MotionEvent event) {
                Bitmap bitmap = view.getDrawingCache();
                int i = bitmap.getPixel((int) view.getX(), (int) view.getY());
                return true;
            }
 
            }
        );
    }
}

Or, lorsque j'appui sur l'ImageButton en question, mon application plante.

16/02/2017, 16h53
grunk

Quel est le message d'erreur dans le logcat ? "Ca plante" ca n'avance à rien ;)

De plus je pense qu'il vaut mieux récupérer la bitmap avec quelque chose du genre :

Code:

((BitmapDrawable)view.getDrawable()).getBitmap();
17/02/2017, 11h00
AndroidNewbie

Citation:

De plus je pense qu'il vaut mieux récupérer la bitmap avec quelque chose du genre :

Code : ((BitmapDrawable)view.getDrawable()).getBitmap();

Il n'y a pas de méthode getDrawable() pour la classe View. Seul getForeground() retourne un objet de type Drawable. Est la bonne méthode pour mon besoin ?

Pour le "plantage", je teste directement mon application sur mon téléphone, je n'ai donc droit qu'à "monAppli s'est arrêté".
Il y a t'il moyen d'avoir des logs d'erreurs ?

[EDIT]
j'ai réussi, à force patience, à lancer l'application sur un virtual device et à récupérer ceci :

--------- beginning of crash
E/AndroidRuntime: FATAL EXCEPTION: main
Process: package.canvaslearning, PID: 2421
java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getPixel(int, int)' on a null object reference
at package.canvaslearning.MainActivity$1.onTouch(MainActivity.java:30)
at android.view.View.dispatchTouchEvent(View.java:9939)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2669)
at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2301)
at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:411)
at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1810)
at android.app.Activity.dispatchTouchEvent(Activity.java:3061)
at android.support.v7.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:71)
at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:373)
at android.view.View.dispatchPointerEvent(View.java:10163)
at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4434)
at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4302)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3902)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3868)
at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:3995)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3876)
at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4052)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3902)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3868)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3876)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3849)
at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:6210)
at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:6184)
at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:6145)
at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6313)
at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185)
at android.os.MessageQueue.nativePollOnce(Native Method)
at android.os.MessageQueue.next(MessageQueue.java:323)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:6077)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:865)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755)
Application terminated.

Il semblerai donc que le problème soit le même : je n'arrive pas récupérer l'image du mon ImageButton à partir de la vue passer en paramètre de onTouch.
Je me demande si c'est bien sur l'ImageButton que je doit SetOnTouchListener() ?
17/02/2017, 13h37
grunk

Imagebutton dérive de ImageView qui dispose bien d'une fonction getDrawable :

Il faut juste caster la variable view dans le bon type avant de l'utiliser.

Citation:

Pour le "plantage", je teste directement mon application sur mon téléphone, je n'ai donc droit qu'à "monAppli s'est arrêté".
Il y a t'il moyen d'avoir des logs d'erreurs ?

A partir du moment ou ton téléphone est en débug et qu'il est branché à ton pc tu vois les journaux dans le logcat au même titre qu'un émulateur

Super !

J'ai réussi à faire ce que je souhaitais !
Je cast donc ma View en ImageButton, pour ensuite récupérer la couleur du pixel sur lequel on appui et déclencher ou non mon action !

Merci pour l'aide apportée !

Maintenant, il ne me reste plus qu'à arriver à composer un cercle avec huit boutons en plaçant correctement des vues carrées !

[EDIT CODE FINAL]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
public class MainActivity extends AppCompatActivity {
 
    private ImageButton b1;
    private ImageButton b2;
    private ImageButton b3;
    private ImageButton b4;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        b1 = (ImageButton) findViewById(R.id.imageButton);
        b2 = (ImageButton) findViewById(R.id.imageButton2);
        b3 = (ImageButton) findViewById(R.id.imageButton3);
        b4 = (ImageButton) findViewById(R.id.imageButton4);
 
        b1.setOnTouchListener(new View.OnTouchListener(){
            public boolean onTouch(View view, MotionEvent event) {
                ImageButton ib = (ImageButton) view;
                Bitmap bitmap = ((BitmapDrawable)ib.getDrawable()).getBitmap();
                int i = bitmap.getPixel((int) event.getX(), (int) event.getY());
 
               if (i== -6697729){ // -6697729 correspond à la valeur de la couleur bleue du botton, j'aurai très bien pu utiliser la condition i != 0 )
                   Toast.makeText(getApplicationContext(),"bravo",Toast.LENGTH_SHORT).show();
               }
 
                return true;
            }
 
            }
        );
    }
}