CornerViewLayout & CornerView（标签）

右下角角标文本，斜体文本，标签文本，使用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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,884评论 22赞 665
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,284评论 25赞 708
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,232评论 4赞 61
  • 新西兰毛利人的医药（一）：草药
    新西兰毛利人的医药（一）：草药 新西兰的土著毛利人据信已经在本地居住超过800年的时间，根据毛利人自己的口传史则可...
    简明空阅读 5,756评论 2赞 2
  • 观影有感
    最近看了一部电视剧《煮妇神探》，由李小璐贾乃亮夫妻俩出演的苟吉祥毛儒毅因为两人的家庭背景、身份地位等相差极大的原因...
    肖小二啊阅读 245评论 0赞 0