Ce billet fait suite à http://www.insideandroid.fr/post/2009/04/15/Android-%3A-Creation-d-un-HiveLayout-premiere-etape

Nous disposons donc maintenant de notre HiveLayout et d'un système permettant d'ajouter nos cellules au bon endroit, mais il nous faut encore créer lesdites cellules.

On va donc étendre une View. Il faut commencer par définir la zone qu'occupera la cellule en surchargeant la méthode onMeasure.
On sait que l'hexagone est contenu dans un carré de largeur 2*size et de hauteur calculée précédemment (2*halfHeight).

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),
                measureHeight(heightMeasureSpec));
    }

    private int measureWidth(int measureSpec) {
        return 2 * size;
    }

    private int measureHeight(int measureSpec) {
        int height = 2 * ((int) Math.sqrt((double) (size * size - (size / 2)
                * (size / 2))));
        return height;
    }

Maintenant que l'on dispose de notre surface de dessin, nous allons créer le contour en utilisant le Path suivant :

        Path path = new Path();
        path.moveTo(size / 2, 0);
        path.lineTo(0, halfHeight);
        path.lineTo(size / 2, 2 * halfHeight);
        path.lineTo(size * 3 / 2, 2 * halfHeight);
        path.lineTo(size * 2, halfHeight);
        path.lineTo(size * 3 / 2, 0);
        path.lineTo(size / 2, 0);
        path.close();


On peut vérifier si le point est bien à l'intérieur de l'hexagone avec la fonction suivante :


    public boolean checkPointInside(float x, float y) {
        if (y < (-(halfHeight * 2) / size) * x + halfHeight)
            return true;
        if (y > ((halfHeight * 2) / size) * x + halfHeight)
            return true;
        if (y > (-(halfHeight * 2) / size) * x + 5 * halfHeight)
            return true;
        if (y < ((halfHeight * 2) / size) * x - 3 * halfHeight)
            return true;
        return false;
    }


Et on dessine la cellule de la manière suivante :

    protected void onDraw(Canvas canvas) {
        canvas.clipPath(path);
        canvas.drawColor(0xFFFF0000);
    }

Ce sont les bases nécessaires à l'affichage et l'utilisation optimale de nos cellules, mais ce n'est qu'une base, il reste beaucoup à faire.

Pour utiliser ce layout, vous pourrez par exemple vouloir associer vos objects à une cellule, mettre en place un système de configuration xml pour les cellules, etc...

Les sources d'un exemple sont fournies en pièce jointe, avec thème XML, gestion du touch sur la cellule et menu pour ajouter des séries de cellules.