android不规则图形控件显示背景图片以及点击效果，多边形控件实例

我们在开发应用的过程中，经常会遇见美术突发奇想，给你来个狂拽酷炫效果的情况。下面我们就来说一下多边形控件，以及他的点击。

先上图

一、首先定义各种图形

1.菱形

public class DiamondView extends ImageView {
    private Context mContext;
    private int mWidth;
    private int mHeight;

    // 以上方角点所在的点位置为模式名
    public static final int TYPE_LEFT_TOP = 0;

    private int mMode;
    private int mColor;
    private String mText;
    // 四个点的顺序，从leftTop开始计算，顺时针数过去，依次四个点
    private int mPointOne[];
    private int mPointTwo[];
    private int mPointThree[];
    private int mPointFour[];

    private Path mPath;
    private Paint mPaint;

    private boolean isClicked = false; //是否被按下

    public DiamondView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mPath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColor = Color.parseColor("#FFFFFF");
        mPaint.setColor(mColor);
    }

    public void setMode(int model) {
        mMode = model;
        postInvalidate();
    }

    public void setColor(int color) {
        mColor = color;
        postInvalidate();
    }

    public void setText(String text) {
        mText = text;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.clipPath(mPath, Region.Op.INTERSECT);
        super.onDraw(canvas);
        if(!isClicked) {
            mPaint.setColor(Color.argb(180, 0, 0, 0));
            canvas.drawPath(mPath, mPaint);
        }
        if(mText != null) {
            mPaint.setFakeBoldText(true);
            mPaint.setTextSize(sp2px(mContext,13));
            mPaint.setColor(mColor);
            float tw = mPaint.measureText(mText);
            float th = mPaint.measureText(mText)/mText.length();
            switch (mMode) {
                case TYPE_LEFT_TOP:
                    canvas.drawText(mText, (mWidth - tw)/2f, (mHeight+th)/2f, mPaint);
                    break;
            }
        }
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldw, int oldh) {
        super.onSizeChanged(width, height, oldw, oldh);
        mWidth = width;
        mHeight = height;
        switch (mMode) {
            case TYPE_LEFT_TOP:
                mPointOne = new int[] { 0, 0 };
                mPointTwo = new int[] { width*140/250, 0 };
                mPointThree = new int[] { width, height };
                mPointFour = new int[] { width*110/250, height };
                break;
        }

        if (null != mPointOne) {
            mPath.moveTo(mPointOne[0], mPointOne[1]);
            mPath.lineTo(mPointTwo[0], mPointTwo[1]);
            mPath.lineTo(mPointThree[0], mPointThree[1]);
            mPath.lineTo(mPointFour[0], mPointFour[1]);
            mPath.close();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        RectF bounds = new RectF();
        mPath.computeBounds(bounds, true);
        Region region = new Region();
        region.setPath(mPath, new Region((int)bounds.left, (int)bounds.top,(int)bounds.right, (int)bounds.bottom));
        boolean ct =  region.contains((int)event.getX(), (int)event.getY());

        if(event.getAction() == MotionEvent.ACTION_DOWN){
            if(ct){
                isClicked = true;
                invalidate();
                return true;
            }
            return false;
        }else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){
            if(isClicked){
                isClicked = false;
                invalidate();
                if (null != mOnClickListener && ct && event.getAction() != MotionEvent.ACTION_CANCEL) {
                    mOnClickListener.onClick(this);
                    return true;
                }
            }
            return false;
        }else if(event.getAction() == MotionEvent.ACTION_MOVE){
            return isClicked;
        }
        return super.onTouchEvent(event);
    }

    private OnClickListener mOnClickListener;
    public void setOnViewClickListener(OnClickListener clickListener){
        mOnClickListener = clickListener;
    }

    //计算两点的距离
    private int distance(PointF point1, PointF point2) {
        int disX = (int) Math.abs(point1.x - point2.x);
        int disY = (int) Math.abs(point1.y - point2.y);
        return (int) Math.sqrt(Math.pow(disX, 2) + Math.pow(disY, 2));
    }

    //将sp值转换为px值，保证文字大小不变
    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

}

绘制图形主要依靠Path来定义四个点，围成一个菱形。在ondraw的时候再调用

canvas.clipPath(mPath, Region.Op.INTERSECT);来切割画布，使得图片显示范围也在菱形内。

点击的时候靠的是Region 和path配合使用，判断点击的点是否在path勾勒的范围内，从而控制触摸事件。

除了菱形以外，还有其他的形状的类，代码太多不一一列举，文章结尾会附带完整项目包。

各种形状定义好之后就是排布

先写在xml布局文件中

<com.example.lupingshenqi.QiQiaoLayout android:id="@+id/activity_main_qiqiaolayout"  android:orientation="vertical"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:background="@color/white"  android:padding="10dp"> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_1"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_2"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_3"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.DiamondView  android:id="@+id/classify_4"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_5"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.SquareView  android:id="@+id/classify_6"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_7"  android:layout_width="100dp"  android:layout_height="100dp" /> <com.example.lupingshenqi.TriangleView  android:id="@+id/classify_8"  android:layout_width="100dp"  android:layout_height="100dp" /> </com.example.lupingshenqi.QiQiaoLayout>

然后是在onSizeChanged的时候进行重新排布

public class QiQiaoLayout extends RelativeLayout{ private ArrayList<CategoryBean> mClassifyList = new ArrayList<>(); public QiQiaoLayout(Context context, AttributeSet attrs) { super(context, attrs); } public void setDate(ArrayList<CategoryBean> list){ mClassifyList.clear(); if(list!=null){ mClassifyList.addAll(list); } if(mClassifyList!=null){ for (int i=0;i<mClassifyList.size() && i<getChildCount();i++) { CategoryBean bean = mClassifyList.get(i); if(getChildAt(i) instanceof TriangleView){ TriangleView view = (TriangleView)getChildAt(i); GlideImageLoadUtils.displayImage(getContext(), bean.categoryIconUrl, view, GlideImageLoadUtils.getIconNormalOptions()); view.setText(bean.categoryName); view.setOnViewClickListener(new OnClickListener() { @Override  public void onClick(View view) { Toast.makeText(getContext(),"点击了按钮!",Toast.LENGTH_SHORT).show(); } }); }else if(getChildAt(i) instanceof DiamondView) { DiamondView view = (DiamondView)getChildAt(i); GlideImageLoadUtils.displayImage(getContext(), bean.categoryIconUrl, view, GlideImageLoadUtils.getIconNormalOptions()); view.setText(bean.categoryName); view.setOnViewClickListener(new OnClickListener() { @Override  public void onClick(View view) { Toast.makeText(getContext(),"点击了按钮!",Toast.LENGTH_SHORT).show(); } }); }else if(getChildAt(i) instanceof SquareView) { SquareView view = (SquareView)getChildAt(i); GlideImageLoadUtils.displayImage(getContext(), bean.categoryIconUrl, view, GlideImageLoadUtils.getIconNormalOptions()); view.setText(bean.categoryName); view.setOnViewClickListener(new OnClickListener() { @Override  public void onClick(View view) { Toast.makeText(getContext(),"点击了按钮!",Toast.LENGTH_SHORT).show(); } }); } } } postInvalidate(); } @Override  protected void onFinishInflate() { super.onFinishInflate(); TriangleView mClassifyView1 = (TriangleView) findViewById(R.id.classify_1); mClassifyView1.setMode(TriangleView.TYPE_LEFT_TOP); TriangleView mClassifyView2 = (TriangleView) findViewById(R.id.classify_2); mClassifyView2.setMode(TriangleView.TYPE_RIGHT_BOTTOM); TriangleView mClassifyView3 = (TriangleView) findViewById(R.id.classify_3); mClassifyView3.setMode(TriangleView.TYPE_RIGHT_MIDDLE); DiamondView mClassifyView4 = (DiamondView) findViewById(R.id.classify_4); mClassifyView4.setMode(DiamondView.TYPE_LEFT_TOP); TriangleView mClassifyView5 = (TriangleView) findViewById(R.id.classify_5); mClassifyView5.setMode(TriangleView.TYPE_RIGHT_BOTTOM_SMAILL); SquareView mClassifyView6 = (SquareView) findViewById(R.id.classify_6); TriangleView mClassifyView7 = (TriangleView) findViewById(R.id.classify_7); mClassifyView7.setMode(TriangleView.TYPE_LEFT_BOTTOM); TriangleView mClassifyView8 = (TriangleView) findViewById(R.id.classify_8); mClassifyView8.setMode(TriangleView.TYPE_RIGHT_TOP); } @Override  protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); } @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); w = w - getPaddingRight() - getPaddingLeft(); float scale = w/660f; QiQiaoLayout.LayoutParams params = new QiQiaoLayout.LayoutParams((int)(230*scale),(int)(230*scale)); params.setMargins(0,0,(int)(10*scale),(int)(10*scale)); getChildAt(0).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(230*scale),(int)(230*scale)); params.setMargins((int)(10*scale),(int)(10*scale),0,0); getChildAt(1).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(120*scale),(int)(240*scale)); params.setMargins((int)(253*scale),0,0,0); getChildAt(2).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(250*scale),(int)(110*scale)); params.setMargins((int)(270*scale),0,0,(int)(10*scale)); getChildAt(3).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(120*scale),(int)(120*scale)); params.setMargins((int)(270*scale),(int)(120*scale),0,0); getChildAt(4).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(120*scale),(int)(120*scale)); params.setMargins((int)(400*scale),(int)(120*scale),0,0); getChildAt(5).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(120*scale),(int)(120*scale)); params.setMargins((int)(530*scale),(int)(120*scale),0,0); getChildAt(6).setLayoutParams(params); params = new QiQiaoLayout.LayoutParams((int)(230*scale),(int)(230*scale)); params.setMargins((int)(430*scale),0,0,0); getChildAt(7).setLayoutParams(params); }

话不多说，看整个项目的代码更容易明白，项目地址是

https://pan.baidu.com/s/1bFvakI