web-dev-qa-db-fra.com

Android: dessiner un cercle avec du texte à l'intérieur

Je dois dessiner trois cercles dans mon fragment, les cercles ont des tailles différentes, je renvoie ce link Le résultat obtenu est le suivant 

enter image description here

Ceci est mon code XML: MISE À JOUR

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:gravity="center" >
         <TextView
             Android:id="@+id/large_volume"
             Android:layout_width="185dp"
             Android:layout_height="185dp"
             Android:background="@drawable/circle"
             Android:gravity="center"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:textSize="10dp" />

         <TextView
             Android:id="@+id/medium_volume"
             Android:layout_width="120dp"
             Android:layout_height="120dp"
             Android:layout_alignTop="@+id/large_volume"
             Android:layout_toRightOf="@+id/large_volume"
             Android:background="@drawable/circle"
             Android:gravity="center"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:textSize="10dp" />

         <TextView
             Android:id="@+id/TextView02"
             Android:layout_width="90dp"
             Android:layout_height="90dp"
             Android:layout_below="@+id/medium_volume"
             Android:layout_toRightOf="@+id/large_volume"
             Android:background="@drawable/circle"
             Android:gravity="center"
             Android:layout_marginTop="-3dp"
             Android:layout_marginLeft="-17dp"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:textSize="10dp" />

    </RelativeLayout>

Mais ce dont j'ai besoin, c'est comme ça enter image description here

Vous pouvez voir que les cercles doivent rester proches les uns des autres, mais lorsque j'utilise la vue XML, je ne peux pas atteindre cet objectif. Comment puis-je atteindre cet objectif, j'ai besoin de onClickListeners dans mon entourage c'est pourquoi j'utilise des vues 

Est-ce que cela peut être réalisé grâce au dessin sur toile, j’ai entendu dire que la toile n’est pas vue, donc cela m’empêchera de donner des écouteurs qui cliquent

METTRE À JOUR :

Je réponds à mes besoins par l’approche XML. Y at-il un moyen d’y parvenir grâce au dessin sur toile, devrais-je poser une autre question à cette fin?

androidandroid-layoutandroid-canvasandroid-view
25
edwin

Essaye ça

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" >

        <RelativeLayout
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" >

            <TextView
                Android:id="@+id/num_txt"
                Android:layout_width="100dp"
                Android:layout_height="100dp"
                Android:layout_marginTop="0dp"
                Android:background="@drawable/bg_red"
                Android:gravity="center"
                Android:text="My name is NON"
                Android:textColor="#FFFFFF"
                Android:textSize="10dp" />

        </RelativeLayout>

    </RelativeLayout>

Enregistrer dans la version imprimable bg_red.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
        Android:shape="oval">
        <corners Android:radius="10dip"/>
        <stroke Android:color="#FF0000" Android:width="5dip"/>
        <solid Android:color="#FF0000"/>
    </shape>

Code édité

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent" >
         <TextView
             Android:id="@+id/num_txt"
             Android:layout_width="185dp"
             Android:layout_height="185dp"

             Android:layout_alignParentTop="true"
             Android:layout_marginTop="163dp"
             Android:background="@drawable/bg_red"
             Android:gravity="center"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:layout_marginLeft="10dp"
             Android:textSize="10dp" />

         <TextView
             Android:id="@+id/TextView02"
             Android:layout_width="90dp"
             Android:layout_height="90dp"
             Android:layout_alignParentRight="true"
             Android:layout_alignTop="@+id/TextView01"
             Android:layout_marginRight="90dp"
             Android:layout_marginTop="122dp"
             Android:background="@drawable/bg_red"
             Android:gravity="center"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:textSize="10dp" />

         <TextView
             Android:id="@+id/TextView01"
             Android:layout_width="120dp"
             Android:layout_height="120dp"
             Android:layout_alignTop="@+id/num_txt"
             Android:layout_toRightOf="@+id/num_txt"
             Android:background="@drawable/bg_red"
             Android:gravity="center"
             Android:text="My name is NON"
             Android:textColor="#FFFFFF"
             Android:textSize="10dp" />

    </RelativeLayout>

ConstraintLayout utiliser pour le nombre de badges.

 enter image description here 

    <Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        xmlns:tools="http://schemas.Android.com/tools"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@Android:color/transparent"
        Android:gravity="center">

        <ImageView
            Android:id="@+id/tab_icon"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:adjustViewBounds="true"
            Android:background="@Android:color/transparent"
            Android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_home"
            tools:layout_constraintBottom_creator="1"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1"
            tools:layout_constraintTop_creator="1" />

        <TextView
            Android:id="@+id/tab_badge"
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="10dp"
            Android:background="@drawable/icon_badge"
            Android:paddingBottom="1dp"
            Android:paddingLeft="6dp"
            Android:paddingRight="6dp"
            Android:paddingTop="1dp"
            Android:text="10"
            Android:textAppearance="@style/TextAppearance.AppCompat.Small"
            Android:textColor="@Android:color/white"
            Android:textSize="12dp"
            app:layout_constraintBottom_toBottomOf="@+id/tab_icon"
            tools:layout_constraintLeft_creator="1"
            Android:layout_marginLeft="14dp"
            app:layout_constraintLeft_toLeftOf="@+id/tab_icon" />
    </Android.support.constraint.ConstraintLayout>
38
Amit Prajapati

Essaye ça

import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.util.AttributeSet;
import Android.widget.TextView;

public class CircularTextView extends TextView
{
private float strokeWidth;
int strokeColor,solidColor;

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

public CircularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
public void draw(Canvas canvas) {

    Paint circlePaint = new Paint();
    circlePaint.setColor(solidColor);
    circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    Paint strokePaint = new Paint();
    strokePaint.setColor(strokeColor);
    strokePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    int  h = this.getHeight();
    int  w = this.getWidth();

    int diameter = ((h > w) ? h : w);
    int radius = diameter/2;

    this.setHeight(diameter);
    this.setWidth(diameter);

    canvas.drawCircle(diameter / 2 , diameter / 2, radius, strokePaint);

    canvas.drawCircle(diameter / 2, diameter / 2, radius-strokeWidth, circlePaint);

    super.draw(canvas);
}

public void setStrokeWidth(int dp)
{
    float scale = getContext().getResources().getDisplayMetrics().density;
    strokeWidth = dp*scale;

}

public void setStrokeColor(String color)
{
    strokeColor = Color.parseColor(color);
}

public void setSolidColor(String color)
{
    solidColor = Color.parseColor(color);

}
}

https://stackoverflow.com/a/34685568/2809351

7
Lalit Jadav
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextView tv = (TextView) findViewById(R.id.tv);
    Button btn = (Button) findViewById(R.id.btn);
    GradientDrawable Gd = new GradientDrawable();
    Gd.setShape(GradientDrawable.OVAL);
    Gd.setColor(Color.TRANSPARENT);
    Gd.setStroke(5, Color.BLUE);
    Gd.setSize(getTextViewHeight(tv),getTextViewHeight(tv));

    tv.setBackground(Gd);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            GradientDrawable Gd = new GradientDrawable();
            Gd.setShape(GradientDrawable.OVAL);
            Gd.setColor(Color.TRANSPARENT);
            Gd.setStroke(5, Color.BLUE);
            Gd.setSize(tv.getHeight(),tv.getHeight());
            Log.d("DB121","Width "+tv.getHeight()+ "Height ="+tv.getHeight());
            tv.setBackground(Gd);
        }
    });
}
public static int getTextViewHeight(TextView textView) {
    WindowManager wm =
            (WindowManager) textView.getContext().getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();

    int deviceWidth;

    if(Android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2){
        Point size = new Point();
        display.getSize(size);
        deviceWidth = size.x;
    } else {
        deviceWidth = display.getWidth();
    }

    int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(deviceWidth, View.MeasureSpec.AT_MOST);
    int heightMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    textView.measure(widthMeasureSpec, heightMeasureSpec);
    return textView.getMeasuredHeight();
}
0
Rahul Chaube
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
         Android:id="@+id/TextView02"
        Android:layout_width="125dp"
        Android:layout_height="125dp"
        Android:layout_alignBottom="@+id/linearLayout1"
        Android:layout_marginBottom="83dp"
        Android:layout_toEndOf="@+id/linearLayout1"
        Android:background="@drawable/circle"
        Android:gravity="center"
        Android:text="TextView"
        Android:layout_marginEnd="5dp"
        Android:orientation="vertical" />

    <TextView
        Android:id="@+id/textView1"
        Android:layout_width="185dp"
        Android:layout_height="185dp"
        Android:layout_marginStart="5dp"
        Android:layout_alignParentLeft="true"
        Android:layout_centerVertical="true"
        Android:background="@drawable/circle"
        Android:gravity="center"
        Android:text="TextView" 
        Android:orientation="vertical" />

    <TextView
        Android:id="@+id/TextView01"
        Android:layout_width="90dp"
        Android:layout_height="90dp"
        Android:layout_alignTop="@+id/linearLayout1"
        Android:layout_marginTop="113dp"
        Android:layout_toEndOf="@+id/linearLayout1"
        Android:background="@drawable/circle"
        Android:gravity="center"
        Android:text="TextView" 
        Android:orientation="vertical" />

</RelativeLayout>

vous pouvez définir directement backroud ou drawable sur le textview . vous pouvez utiliser drawablepadding, etc .....

ou vous pouvez utiliser: Android: drawableStart = "@ drawable/ic_cab_done_holo_dark"

0
dipali

Essayez ce code pour créer de manière dynamique un cercle avec textview

RelativeLayout main_rel_layout = findViewById(R.id.main_rel_layout);
TextView textView = new TextView(this);
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.CENTER_IN_PARENT);
textView.setText("Hello ");
textView.setTextSize(100);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);

final FrameLayout frameLayout = new FrameLayout(this);
FloatingActionButton floatingActionButton = new FloatingActionButton(this);
floatingActionButton.setCustomSize(400);
frameLayout.addView(floatingActionButton);

relativeLayout.addView(frameLayout);
relativeLayout.addView(textView);
main_rel_layout.addView(relativeLayout);
0
Himanshu itmca