web-dev-qa-db-ja.com

Android：円形TextViewを作成しますか？

私の現在のシンプルなXMLは以下のとおりですが、その中の3つのTextViewを長方形ではなく円形にしたいと思います。

コードを変更するにはどうすればよいですか？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary2"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary3"
        Android:layout_width="270dp"
        Android:layout_height="60dp" >
    </TextView>

</LinearLayout>

注：実際のcircleは、下に示す曲線のEdge四角形ではありません。

enter image description here

編集：

現在のコード：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:text=" " 
        Android:gravity="left|center_vertical"
        Android:background="@drawable/circle"/>

    <TextView
        Android:id="@+id/tvSummary2"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:background="@drawable/circle" >
    </TextView>

    <TextView
        Android:id="@+id/tvSummary3"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:background="@drawable/circle" >
    </TextView>

</LinearLayout>

現在の出力：

enter image description here

javaandroidtextviewxml-layout
49
codeme2020

また、この問題の解決策を探していましたが、簡単で快適なことがわかったのは、長方形のTextViewの形状を円形に変換することでした。この方法で完璧になります：

  1. 「circle.xml」という名前のドローアブルフォルダーに新しいXMLファイルを作成し（たとえば）、次のコードを入力します。

    <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">

    <solid Android:color="#9FE554" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

このファイルを使用して、TextViewの新しいフォームを作成します。この場合、緑色の円を作成しました。境界線を追加する場合は、前のファイルに次のコードを追加する必要があります。

    <stroke
        Android:width="2dp"
        Android:color="#FFFFFF" />

  1. 次のコードを使用して、描画可能フォルダーに別のXMLファイル（「rounded_textview.xml」）を作成します。

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/circle" />
</selector>

このファイルは、TextViewの方法を変更するのに役立ちます。

  1. 最後に、方法セクションを変更するTextViewプロパティで、「バックグラウンド」に移動し、作成された2番目のXMLファイル（「rounded_textview.xml」）を選択します。

    <TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="H"
    Android:textSize="30sp"
    Android:background="@drawable/rounded_textview"
    Android:textColor="@Android:color/white"
    Android:gravity="center"
    Android:id="@+id/mark" />

これらの手順を使用すると、TextViewを使用する代わりに、TextViewが円形になります。 TextViewの機能ではなく、形状を変更するだけです。結果は次のようになります。

enter image description here

また、これらの手順は、プロパティに「バックグラウンド」オプションがある他のコンポーネントに適用できることを言わなければなりません。

幸運！！

81
Vicky Vicent

典型的な解決策は、形状を定義して背景として使用することですが、桁数が変わると完全な円ではなくなり、丸い縁のある長方形または楕円形に見えます。だから私はこのソリューションを開発しました、それはうまく機能しています。それが誰かを助けることを願っています。

Circular Text View

Here is the code of custom TextView 

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);

}
}

次に、xmlでパディングを行い、重力が中心であることを確認します

<com.app.tot.customtextview.CircularTextView
        Android:id="@+id/circularTextView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="11"
        Android:gravity="center"
        Android:padding="3dp"/>

そして、あなたはストローク幅を設定することができます

circularTextView.setStrokeWidth(1);
circularTextView.setStrokeColor("#ffffff");
circularTextView.setSolidColor("#000000");
65
umerk44

texview_design.xmlファイルを作成し、次のコードを入力します。 res/drawableに入れます。

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

        <solid Android:color="#98AFC7" />

        <stroke
            Android:width="2dp"
            Android:color="#98AFC7" />

        <corners
            Android:bottomLeftRadius="20dp"
            Android:bottomRightRadius="20dp"
            Android:topLeftRadius="20dp"
            Android:topRightRadius="20dp" />

    </shape>

次に、メインのXMLファイルで、TextViewごとに次の行を追加します。

  Android:background="@drawable/texview_design"

2番目の方法（非推奨）： circle このサークルをダウンロードして、drawableフォルダーに配置し、TextView'sバックグラウンドにします。 gravityをcenterに設定します。

それは次のようになります：

enter image description here

42
Tushar Gogna

これは、楕円形の背景が円形にならないようにする長方形です。
ビューを正方形にすると、すべてが修正されます。

このソリューションはきれいで、さまざまなテキストサイズとテキスト長で機能することがわかりました。

public class EqualWidthHeightTextView extends TextView {

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

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int r = Math.max(getMeasuredWidth(),getMeasuredHeight());
        setMeasuredDimension(r, r);

    }
}


使用法

<com.commons.custom.ui.EqualWidthHeightTextView
    Android:id="@+id/cluster_count"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:text="10+"
    Android:background="@drawable/oval_light_blue_bg"
    Android:textColor="@color/white" />


oval_light_blue_bg.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"<br>
       Android:shape="oval">
   <solid Android:color="@color/light_blue"/>
   <stroke Android:color="@color/white" Android:width="1dp" />
</shape>
20
Javanator

1. res/drawableフォルダーに以下のコードを使用してxml circle_text_bg.xmlを作成します

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
     <solid Android:color="#fff" />

    <stroke
        Android:width="1dp"
        Android:color="#98AFC7" />
    <corners
         Android:bottomLeftRadius="50dp"
         Android:bottomRightRadius="50dp"
         Android:topLeftRadius="50dp"
         Android:topRightRadius="50dp" />
    <size
         Android:height="20dp"
         Android:width="20dp" />
</shape>

2. textviewの背景としてcircle_text_bgを使用します。注：完全な円を得るには、テキストビューの高さと幅を同じにする必要があります。 この背景を持つテキスト1、2、3のテキストビューのプレビューは次のようになります

9
Hackman

これは実際に動作するソリューションです

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval"
    >
    <!-- The fill color -->
    <solid Android:color="#ffff" />
    <!-- Just to add a border -->
    <stroke
        Android:color="#8000"
        Android:width="2dp"
    />
</shape>

完全な（伸びていない）円が必要な場合は、TextViewの幅と高さが一致していることを確認してください（dpで同じ）。

テキストを短くするOR円を拡大するORテキストサイズを小さくするORを使用して、テキストが円に収まることを確認します。もしあれば。 OR上記の提案の組み合わせ。

[編集]

私があなたの写真で見ることができるもののために、あなたは、純粋な円のために、行に多くのテキストを追加したいです。
テキストのアスペクトはsquareである必要があるため、ラッピング（\nを使用）するか、数字を円の中に入れて文章を上に置くか、対応する円の下。

8
Fantômas

Drawableフォルダーのround_tv.xmlでこれを試すことができます：

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

    <stroke Android:color="#22ff55" Android:width="3dip"/>

    <corners
        Android:bottomLeftRadius="30dp"
        Android:bottomRightRadius="30dp"
        Android:topLeftRadius="30dp"
        Android:topRightRadius="30dp" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

テキストビューでそのドロウアブルを次のように適用します：

<TextView
    Android:id="@+id/tv"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/round_tv"
    Android:gravity="center_vertical|center_horizontal"
    Android:text="ddd"
    Android:textColor="#000"
    Android:textSize="20sp" />

出力：

enter image description here

お役に立てれば。

編集：テキストが長すぎる場合は、楕円形がより優先されます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">

    <stroke Android:color="#55ff55" Android:width="3dip"/>

    <corners
        Android:bottomLeftRadius="30dp"
        Android:bottomRightRadius="30dp"
        Android:topLeftRadius="30dp"
        Android:topRightRadius="30dp" />

    <size
        Android:height="60dp"
        Android:width="60dp" />

</shape>

出力：

enter image description here

それでも適切な円が必要な場合は、テキストを設定した後に動的に高さを設定する必要があると思います。適切な円を作成するには、新しい高さを新しい幅と同じにする必要があります。

5
MysticMagicϡ

あなたのdrawableでこれを使用してください

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    Android:shape="oval">


    <solid Android:color="#55ff55"/>


    <size Android:height="60dp"
        Android:width="60dp"/>

</shape>

このようにテキストビューの背景を設定します

4
Remees M Syde

ここでの回答の多くは、シェイプドロウアブルへのハックのようですが、Android自体がシェイプ機能でこれをサポートしています。これは私にとって完璧に働いたものです。あなたは2つの方法でこれを行うことができます

固定の高さと幅を使用、以下に示すように、テキストに関係なく同じままです

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">

<solid Android:color="@color/alpha_white" />

    <size Android:width="25dp" Android:height="25dp"/>

<stroke Android:color="@color/color_primary" Android:width="1dp"/>

</shape>

パディングを使用これは、以下に示すように、textview itのテキストに関係なく、形状を再調整します

<solid Android:color="@color/alpha_white" />

<padding
    Android:bottom="@dimen/semi_standard_margin"
    Android:left="@dimen/semi_standard_margin"
    Android:right="@dimen/semi_standard_margin"
    Android:top="@dimen/semi_standard_margin" />

<stroke Android:color="@color/color_primary" Android:width="2dp"/>

semi_standard_margin = 4dp

3
Mushtaq Jameel

私は使用します：/ drawable/circulo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
    <solid Android:angle="270"
        Android:color="@color/your_color" />

</shape>

そして、TextViewで次のように使用します。

Android:background="@drawable/circulo"

複雑にする必要はありません。

2
bheatcoker

以下のドローアブルファイルを試してください。 res/drawableフォルダーに「circle」という名前のファイルを作成し、以下のコードをコピーします。

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval" >

    <solid Android:color="#FFFFFF" />

    <stroke
        Android:width="1dp"
        Android:color="#4a6176" />

    <padding
        Android:left="10dp"
        Android:right="10dp"
        Android:top="10dp"
        Android:bottom="10dp"
         />

    <corners Android:radius="10dp" />

</shape>

次のようにTextViewに適用します。

<TextView
        Android:id="@+id/tvSummary1"
        Android:layout_width="270dp"
        Android:layout_height="60dp"
        Android:text="Hello World" 
        Android:gravity="left|center_vertical"
        Android:background="@drawable/round_bg">

    </TextView>

enter image description here

0
GrIsHu