Center the text in the circle

Viewed 7002

I have to draw a circle with a number in each piece of my circle. My problem is i can't center the text where i want. Why the center to draw the text is not the same than the center to draw the line ???

sfdzqgs fsdgf dsbfd ds ds fdg sfgnfhggdf wdvfbdfsf dsgfhdr sdgfdshstqrssgqg sqfgshdf dgerfztiaruhis rguhtrqiorgeuqzengoh bçzioqrgethriZQGEHOQRAGIRGOGfjfn fgkjkjvfrejn eofnbfoig vjlj vvjfndbjfdnj figsn

/*enter code here
 * Author : 
 * date : 06/12/2013
 * 
 * 
 * enter code here
 */

package com.example.ando_dessin_test;

//merci a http://supertos.free.fr/supertos.php?page=1066

import java.util.Random;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.Style;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Desactiver la barre de titre de notre application
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    // Passer la fenêtre en full-creen == cacher la barre de notification
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
    WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(new RenderView(this));
    }

    // Création d'une classe interne RenderView pour gérer un affichage simple
    // permettant
    // de montrer que nous occupons bien tout l'écran
    class RenderView extends View {

    public RenderView(Context context) {
    super(context);
    }

    // Dessinons sur la totalité de l'écran
    protected void onDraw(Canvas canvas) {
    canvas.drawRGB(0, 0, 0);

    // Instance de Paint pour définir l'attribut couleur de notre point,
    // ainsi que
    // sa taille.
    Paint paint = new Paint();

    // Nous allons dessiner nos points par rapport à la résolution de
    // l'écran
    int iWidth = canvas.getWidth(); // Largeur
    int iHeight = canvas.getHeight(); // Hauteur
    // float radius = 0;//Radius caused an error so I initialized this
    // variable

    Random rand = new Random();
    // j'ai l'impression detre dans les etoiles avec ces petits points
    // Affichons 10000 points de toutes les couleurs
    for (int i = 0; i < 10000; i++) {
    // Affecter une couleur de manière aléatoire
    paint.setARGB(255, rand.nextInt(256), rand.nextInt(256),
    rand.nextInt(256));
    // Puis dessiner nos points dans le canevas
    canvas.drawPoint(rand.nextInt(iWidth), rand.nextInt(iHeight),
    paint);
    }

    // aficchons notre fameux cercle
    // Canvas canvas = new Canvas();
    Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    circlePaint.setColor(Color.RED);
    circlePaint.setStyle(Style.STROKE);
    circlePaint.setStrokeWidth(10);
    float rayonDuCercle = canvas.getWidth() / 2;
    canvas.drawCircle((float) canvas.getWidth() / 2,
    (float) canvas.getHeight() / 2, rayonDuCercle, circlePaint);
    float rayonDuCerclePetit = canvas.getWidth() / 6;
    canvas.drawCircle((float) canvas.getWidth() / 2,
    (float) canvas.getHeight() / 2, rayonDuCerclePetit,
    circlePaint);

    /*
    * // Random rand = new Random(); //Affichons 100 segments de toutes
    * les couleurs for (int i=0; i < 100; i++) { // Affecter une
    * couleur de manière aléatoire paint.setARGB(255,
    * rand.nextInt(256), rand.nextInt(256), rand.nextInt(256)); //
    * Définir l'épaisseur du segment paint.setStrokeWidth
    * (rand.nextInt(10)); // Puis dessiner nos points dans le cavenas
    * canvas.drawLine(rand.nextInt(iWidth), rand.nextInt(iHeight),
    * rand.nextInt(iWidth), rand.nextInt(iHeight), paint); }
    */
    paint.setARGB(255, rand.nextInt(256), rand.nextInt(256),
    rand.nextInt(256));
    // Définir l'épaisseur du segment
    paint.setStrokeWidth(2);
    // Puis dessiner nos points dans le cavenas
    // okcanvas.drawLine((float)((float)Math.cos(0)*rayonDuCerclePetit)+canvas.getWidth()/2,
    // canvas.getHeight()/2,canvas.getWidth()/2+rayonDuCercle,
    // canvas.getHeight()/2, paint);
    // okcanvas.drawLine((float)((float)Math.cos(Math.PI/2)*rayonDuCerclePetit)+canvas.getWidth()/2,
    // ((float)Math.sin(Math.PI/2)*rayonDuCerclePetit)+canvas.getHeight()/2,canvas.getWidth()/2+rayonDuCercle*(float)Math.cos(Math.PI/2),
    // rayonDuCercle*(float)Math.sin(Math.PI/2)+canvas.getHeight()/2,
    // paint);
    // okkk
    // canvas.drawLine((float)((float)Math.cos(Math.PI/4)*rayonDuCerclePetit)+canvas.getWidth()/2,
    // ((float)Math.sin(Math.PI/4)*rayonDuCerclePetit)+canvas.getHeight()/2,canvas.getWidth()/2+rayonDuCercle*(float)Math.cos(Math.PI/4),
    // rayonDuCercle*(float)Math.sin(Math.PI/4)+canvas.getHeight()/2,
    // paint);

    // initPaint(paint,);

    // pourquoi j'utilise 2 boucles ? Parce que pour limiter l'espace
    // memoire j'utilise le même canva et la seul difference entre ces
    // deux element est la couleur.
    // cette boucle affiche des rayons
    for (int i = 0; i < 8; i++) {

    setRayon(canvas, (Math.PI / 4) * i, paint, rayonDuCercle,
    rayonDuCerclePetit);
    }

    paint.setTextAlign(Align.RIGHT);

    // cette boucle affichage du texte
    for (int i = 1; i < 9; i++) {
    setText(canvas, paint, String.valueOf(i), (Math.PI / 4) * i,
    rayonDuCercle * 0.7, 80);
    // si je suis le dernier element j'affiche le 9 du centre
    if (i == 8) {
    paint.setTextAlign(Align.CENTER);
    setText(canvas, paint, String.valueOf(i + 1), (Math.PI / 4)
    * i, rayonDuCercle * 0, 80);
    }
    }

    }

    /*
    * info pour unen raison que j'ai pas chercher a comprendre l'angle
    * positif s'affiche comme si c'été un ange negatif . Donc je bidouille
    * en multipliant l'angle par -1
    */
    void setRayon(Canvas canvas, double angleRad, Paint paint,
    float rayonDuCercle, float rayonDuCerclePetit) {
    // angleRad=angleRad*-1;
    angleRad = (Math.toRadians((double) 70) + angleRad) * -1;
    canvas.drawLine(
    (float) ((float) Math.cos(angleRad) * rayonDuCerclePetit)
    + canvas.getWidth() / 2,
    ((float) Math.sin(angleRad) * rayonDuCerclePetit)
    + canvas.getHeight() / 2,
    canvas.getWidth() / 2 + rayonDuCercle
    * (float) Math.cos(angleRad),
    rayonDuCercle * (float) Math.sin(angleRad)
    + canvas.getHeight() / 2, paint);
    }

    /*
    * info pour unen raison que j'ai pas chercher a comprendre l'angle
    * positif s'affiche comme si c'été un ange negatif . Donc je bidouille
    * en multipliant l'angle par -1
    */
    void setText(Canvas canvas, Paint paint, String Txt, double angleRad,
    double rayonTxt, int sizeText) {
    paint.setColor(Color.WHITE);
    paint.setTextSize(sizeText);
    angleRad = (Math.toRadians((double) 50) + angleRad) * -1;

    // axe des ordonees enhaut a gauche -> canvas.drawText(Txt, (float)
    // Math.cos(angleRad)*(float) rayonTxt,
    // (float)Math.sin(angleRad)*(float) rayonTxt, paint);
    // ligne suivante j'ai centree l'axe
    canvas.drawText(Txt, (float) Math.cos(angleRad) * (float) rayonTxt
    + canvas.getWidth() / 2, (float) Math.sin(angleRad)
    * (float) rayonTxt + canvas.getHeight() / 2, paint);

    }

    /*
    * private void initPaint(Paint paint, Drawable drawable, float
    * textHeight, float baselineOffset) { paint = new Paint();
    * paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.BLUE); paint
    * = new Paint(); paint.setStyle(Paint.Style.FILL_AND_STROKE);
    * paint.setAntiAlias(true); paint.setColor(Color.WHITE);
    * paint.setTextSize(30); paint.setTextAlign(Align.CENTER); FontMetrics
    * fontMetrics = paint.getFontMetrics(); baselineOffset =
    * fontMetrics.bottom; // bottom is the maximum amount that the text
    * descends // I'm not sure why this is different from descent...
    * textHeight = fontMetrics.bottom - fontMetrics.top; // drawable =
    * getResources().getDrawable(R.drawable.ic_launcher); }
    */

    }
}
6 Answers

I found this to be a simpler solution for most purposes.

<?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:layout_width="32dp"
            android:layout_height="32dp"
            android:background="@drawable/shape_circle_white">

<TextView
    android:id="@+id/text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:textAlignment="center"
    tools:text="7777"
    android:textSize="14dp"
    android:textStyle="bold"
    android:textColor="@color/darkBlue"
     />

</RelativeLayout>

using the circle layout:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <solid android:color="@color/pureBlack" />
</shape>
Related