形状上的文字

时间:2013-02-07 18:04:17

标签: android android-widget

我想要实现这样的事情:

enter image description here

如果我们谈论被包围的那个。我猜25将是TextView,2将是该文本视图的背景图片。这里,2表示当天的事件数。但事件的数量可能是动态的。

如何创建包含动态文字的背景形状? 有可能吗?

修改

Mission Accomplished: - )

通过扩展 NPike的代码,我实现了所需的设计。虽然我在脑子里开始了其他的事情。但是在努力的时候我改变了主意,现在我认为我的设计比我原先计划的要好。

现在是我的设计:

enter image description here

这是我的代码:

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

public class MonthlyCalTextView extends TextView {
    private Paint mPaint;
    private String strNoOfEvents;


    public MonthlyCalTextView(Context context, AttributeSet attrs, String noOfEvents) {
        super(context, attrs); 

        strNoOfEvents = ( Integer.parseInt(noOfEvents)>100 )? "100+":noOfEvents;
        strNoOfEvents = (strNoOfEvents.equals("0")) ? "":strNoOfEvents;
        mPaint = new Paint();
        mPaint.setTypeface( Typeface.defaultFromStyle(Typeface.BOLD) );
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.rgb(223, 223, 223));
    }

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


    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setTextSize(35);
        canvas.drawText(strNoOfEvents, getMeasuredWidth()-mPaint.measureText(strNoOfEvents)-3, getMeasuredHeight()-3, mPaint);


        super.onDraw(canvas);
    }

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

        // grow view dimensions to account for circle
        setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());
    }

}

这就是我所说的:

Random rand = new Random();
// Just for demo assuming that the no. of events will be between 0-125
int min=0, max=125;
String randomNum = String.valueOf( rand.nextInt(max - min + 1) + min );
MonthlyCalTextView tvData=new MonthlyCalTextView(CalendarMonthlyFragment.activity, null, randomNum);

2 个答案:

答案 0 :(得分:3)

尝试这样的事情:

<?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"
android:clickable="true" >

<RelativeLayout
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_centerInParent="true"
    android:layout_margin="5dp"
    android:background="@drawable/sample_image" >

    <TextView
        android:id="@+id/some_title"
        android:layout_width="10dp"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:gravity="center"
        android:textColor="@android:color/white" />
</RelativeLayout>

并在java类中将相对布局膨胀到视图中,并将textView扩展为膨胀视图的findById。

这是原生日历应用的方式。显示今日视图。

答案 1 :(得分:3)

您可以创建自己的TextView扩展,覆盖onDraw以绘制圆圈。

这是一个简短的例子:

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

public class CircleTextView extends TextView {

    private static final int PADDING = 15;
    private Paint mCirclePaint;


    public CircleTextView(Context context, AttributeSet attrs) {
        super(context, attrs); 

        mCirclePaint = new Paint();
        mCirclePaint.setStyle(Style.FILL);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(Color.GREEN); 
    }


    @Override
    protected void onDraw(Canvas canvas) {
        // draw circle at center of canvas
        canvas.drawCircle(getMeasuredWidth()/2, getMeasuredHeight()/2, PADDING, mCirclePaint);
        super.onDraw(canvas);
    }

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

        // grow view dimensions to account for circle
        setMeasuredDimension(resolveSize(getMeasuredWidth()+(PADDING*2), widthMeasureSpec), resolveSize(getMeasuredHeight()+(PADDING*2), heightMeasureSpec));
    }

}