如何使用 textview 或任何布局制作横幅或丝带
How make a banner or ribbon with textview or any layout
嘿,我想用 textview 或 中的任何布局 制作一个类似于给定照片的 横幅或丝带 android 使用 xml 或 java。我不知道该怎么做。
所以请帮助我解决它真正需要的问题。
要创建这样的横幅,您需要做这些事情
- 通过调整 this code
创建倒直角三角形的可绘制形状
- 将 textView 的背景设置为此形状
- 将 textView 重力更改为 right/end 对齐
这是一个简单的 imageview,角落里有文字横幅,是我自己写的。相同的结构可以应用于任何类型的视图。
public class BannerImageView extends ImageView {
private Paint mRibbonPaint;
private Paint mTextPaint;
private Paint mBoxPaint;
private float mScale;
private String mBannerText;
public BannerImageView(Context context, AttributeSet attrs) {
super(context, attrs);
initPainters(attrs);
}
public BannerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initPainters(attrs);
}
private void initPainters(AttributeSet attrs) {
TypedArray attributes = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.BannerImageView, defStyleAttr, 0);
mBannerText = attributes.getString(R.styleable.BannerImageView_label);
mBoxPaint = new Paint();
int white = ContextCompat.getColor(getContext(), R.color.white);
mBoxPaint.setColor(white);
mBoxPaint.setAlpha(156);
mRibbonPaint = new Paint();
mRibbonPaint.setColor(ContextCompat.getColor(getContext(), R.color.banner_color));
mRibbonPaint.setAntiAlias(true);
mRibbonPaint.setStyle(Paint.Style.STROKE);
mRibbonPaint.setStrokeCap(Paint.Cap.BUTT);
mScale = getResources().getDisplayMetrics().density;
mRibbonPaint.setStrokeWidth(dp(16));
mTextPaint = new Paint();
mTextPaint.setColor(white);
mTextPaint.setTextSize( dp(12) );
}
/**
* Converts dp to px
* @param dp
* @return
*/
private float dp(float dp) {
return dp * mScale + 0.5f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if ( !TextUtils.isEmpty(mBannerText) ) {
canvas.drawRect(0, 0, getRight(), getBottom(), mBoxPaint);
canvas.drawLine(-dp(16), dp(64), dp(64), -dp(16), mRibbonPaint);
canvas.save();
canvas.rotate(-45, 0, 0);
canvas.drawText(mBannerText, -dp(24), dp(38), mTextPaint);
canvas.restore();
}
}
然后在values/attrs.xml
中声明你想使用的额外属性
<declare-styleable name="BannerImageView">
<attr name="label" format="string"/>
</declare-styleable>
当然,您像往常一样在 XML 布局中使用,但请记住自定义属性的应用命名空间
<com.my.package.BannerImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:label="Sold Out" />
嘿,我想用 textview 或 中的任何布局 制作一个类似于给定照片的 横幅或丝带 android 使用 xml 或 java。我不知道该怎么做。
所以请帮助我解决它真正需要的问题。
要创建这样的横幅,您需要做这些事情
- 通过调整 this code 创建倒直角三角形的可绘制形状
- 将 textView 的背景设置为此形状
- 将 textView 重力更改为 right/end 对齐
这是一个简单的 imageview,角落里有文字横幅,是我自己写的。相同的结构可以应用于任何类型的视图。
public class BannerImageView extends ImageView {
private Paint mRibbonPaint;
private Paint mTextPaint;
private Paint mBoxPaint;
private float mScale;
private String mBannerText;
public BannerImageView(Context context, AttributeSet attrs) {
super(context, attrs);
initPainters(attrs);
}
public BannerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initPainters(attrs);
}
private void initPainters(AttributeSet attrs) {
TypedArray attributes = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.BannerImageView, defStyleAttr, 0);
mBannerText = attributes.getString(R.styleable.BannerImageView_label);
mBoxPaint = new Paint();
int white = ContextCompat.getColor(getContext(), R.color.white);
mBoxPaint.setColor(white);
mBoxPaint.setAlpha(156);
mRibbonPaint = new Paint();
mRibbonPaint.setColor(ContextCompat.getColor(getContext(), R.color.banner_color));
mRibbonPaint.setAntiAlias(true);
mRibbonPaint.setStyle(Paint.Style.STROKE);
mRibbonPaint.setStrokeCap(Paint.Cap.BUTT);
mScale = getResources().getDisplayMetrics().density;
mRibbonPaint.setStrokeWidth(dp(16));
mTextPaint = new Paint();
mTextPaint.setColor(white);
mTextPaint.setTextSize( dp(12) );
}
/**
* Converts dp to px
* @param dp
* @return
*/
private float dp(float dp) {
return dp * mScale + 0.5f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if ( !TextUtils.isEmpty(mBannerText) ) {
canvas.drawRect(0, 0, getRight(), getBottom(), mBoxPaint);
canvas.drawLine(-dp(16), dp(64), dp(64), -dp(16), mRibbonPaint);
canvas.save();
canvas.rotate(-45, 0, 0);
canvas.drawText(mBannerText, -dp(24), dp(38), mTextPaint);
canvas.restore();
}
}
然后在values/attrs.xml
中声明你想使用的额外属性<declare-styleable name="BannerImageView">
<attr name="label" format="string"/>
</declare-styleable>
当然,您像往常一样在 XML 布局中使用,但请记住自定义属性的应用命名空间
<com.my.package.BannerImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:label="Sold Out" />