CornerViewLayout & CornerVie
2017-07-25 本文已影响147人
niiiiiK
右下角角标文本，斜体文本，标签文本，使用CornerViewLayout作为父布局，则在该父布局右下角绘制三角形角标以及旋转的文本，或单独使用CornerView作为一个子控件，放置在某个布局右下角实现三角形角标和旋转文本
2017-7-26更新
为使角标绘制在顶层，调整至dispatchDraw方法中绘制；同时调整了一下字号，当字体个数小于3时字体减小5，如果不减小的话有点偏大不大好看。
调整前效果图
调整后效果图
可自定义角标大小，文本大小自适应
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.forens.xuan.forkit.CornerActivity">
<com.forens.xuan.forkit.view.CornerViewLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_horizontal_margin"
android:background="#f1f1f1"
app:cornerColor="#a4a4a4"
app:cornerSize="30dp"
app:cornerText="已过期">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优惠券名称"
android:textColor="@android:color/black"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="优惠券使用日期" />
</LinearLayout>
</LinearLayout>
</com.forens.xuan.forkit.view.CornerViewLayout>
<com.forens.xuan.forkit.view.CornerViewLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_horizontal_margin"
android:background="#f1f1f1"
app:cornerColor="#a4a4a4"
app:cornerSize="50dp"
app:cornerText="已过期">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优惠券名称"
android:textColor="@android:color/black"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="优惠券使用日期" />
</LinearLayout>
</LinearLayout>
</com.forens.xuan.forkit.view.CornerViewLayout>
<com.forens.xuan.forkit.view.CornerViewLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_horizontal_margin"
android:background="#f1f1f1"
app:cornerColor="@color/colorAccent"
app:cornerSize="50dp"
app:cornerText="有效">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优惠券名称"
android:textColor="@android:color/black"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="优惠券使用日期" />
</LinearLayout>
</LinearLayout>
</com.forens.xuan.forkit.view.CornerViewLayout>
<RelativeLayout
android:background="#f1f1f1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="@dimen/activity_horizontal_margin"
android:orientation="horizontal">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/image"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优惠券名称"
android:textColor="@android:color/black"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="优惠券使用日期" />
</LinearLayout>
<com.forens.xuan.forkit.view.CornerView
android:layout_alignParentBottom="true"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
app:cornerColor="@color/colorAccent"
app:cornerText="可用"/>
</RelativeLayout>
</LinearLayout>
CornerViewLayout.java
package com.forens.xuan.forkit.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.AttrRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.FrameLayout;
import com.forens.xuan.forkit.R;
/**
* Project_Name:
* Copyright:
* Created: dake.xuan on 2017/7/25 11:47
* E-mail: 1129305620@qq.com
* Desc: (说明描述)
*/
public class CornerViewLayout extends FrameLayout{
private String cornerContent;
private int cornerColor;
private float cornerSize;
public CornerViewLayout(@NonNull Context context) {
super(context);
}
public CornerViewLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initCornerViewLayout(context,attrs);
}
public CornerViewLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);
initCornerViewLayout(context,attrs);
}
private void initCornerViewLayout(Context context,AttributeSet attrs){
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CornerView);
cornerContent=a.getString(R.styleable.CornerView_cornerText);
cornerColor=a.getColor(R.styleable.CornerView_cornerColor, Color.parseColor("#a4a4a4"));
cornerSize=a.getDimensionPixelSize(R.styleable.CornerView_cornerSize,50);
a.recycle();
setWillNotDraw(false);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if(cornerContent==null)return;
int height=getHeight();
if(height<cornerSize){
getLayoutParams().height= (int) cornerSize;
getLayoutParams().width= (int) cornerSize;
}
//先填充右下角三角形颜色
Path path1=new Path();
path1.moveTo(getWidth(),getHeight()-cornerSize);
path1.lineTo(getWidth()-cornerSize,getHeight());
path1.lineTo(getWidth(),getHeight());
Paint paint1=new Paint();
paint1.setColor(cornerColor);
canvas.drawPath(path1,paint1);
//沿路径绘制文本
Path path=new Path();
path.moveTo(getWidth()-cornerSize/2,getHeight());
path.lineTo(getWidth(),getHeight()-cornerSize/2);
Paint textPaint=new Paint();
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setAntiAlias(true);
textPaint.setColor(Color.WHITE);
double m=(Math.sqrt(2)*cornerSize)/2;
float size= (float) (m/cornerContent.length());//根据实际路径长度求得字体大小
textPaint.setTextSize(cornerContent.length()<3?size-5:size);
canvas.drawTextOnPath(cornerContent,path,0, 0,textPaint);
}
}
CornerView.java
package com.forens.xuan.forkit.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import com.forens.xuan.forkit.R;
/**
* Project_Name:
* Copyright:
* Created: dake.xuan on 2017/7/25 14:17
* E-mail: 1129305620@qq.com
* Desc: (说明描述)
*/
public class CornerView extends View{
private String cornerContent;
private int cornerColor;
public CornerView(Context context) {
super(context);
}
public CornerView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initCornerView(context,attrs);
}
public CornerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initCornerView(context,attrs);
}
private void initCornerView(Context context,AttributeSet attrs){
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CornerView);
cornerContent=a.getString(R.styleable.CornerView_cornerText);
cornerColor=a.getColor(R.styleable.CornerView_cornerColor, Color.parseColor("#a4a4a4"));
a.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//以宽度限定宽高
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(cornerContent==null)return;
//先填充右下角三角形颜色
Path path1=new Path();
path1.moveTo(getWidth(),0);
path1.lineTo(0,getHeight());
path1.lineTo(getWidth(),getHeight());
Paint paint1=new Paint();
paint1.setColor(cornerColor);
canvas.drawPath(path1,paint1);
Paint textPaint=new Paint();
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setAntiAlias(true);
textPaint.setColor(Color.WHITE);
double m=(Math.sqrt(2)*getHeight())/2;
float size= (float) (m/cornerContent.length());//根据实际路径长度求得字体大小
textPaint.setTextSize(size);
//沿路径绘制文本
Path path=new Path();
path.moveTo(getHeight()/2,getHeight());
path.lineTo(getHeight(),getHeight()/2);
canvas.drawTextOnPath(cornerContent,path,0, 0,textPaint);
}
}
styleable
<declare-styleable name="CornerView">
<attr name="cornerSize" format="dimension" />
<attr name="showCorner" format="boolean"/>
<attr name="cornerColor" format="color"/>
<attr name="cornerText" format="string"/>
</declare-styleable>
