仿即刻APP點(diǎn)贊桃心的效果

2016-12-5更新

• 修改測(cè)量邏輯
• 添加了對(duì)齊方式
• 添加了一個(gè)評(píng)論圖形的GraphAdapter
• 修改了已知BUG

先看效果圖

likeview.gif

使用方法

布局配置

<cn.izouxiang.likeview.LikeView
            android:id="@+id/lv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:number="99"
            />

注意,一般不需要直接指定寬高,內(nèi)部會(huì)根據(jù)字體大小自動(dòng)測(cè)量

代碼配置

        //點(diǎn)贊view的設(shè)置
        holder.like.setActivated(entity.isLike);
        holder.like.setNumber(entity.likeNum);
        holder.like.setCallback(new LikeView.SimpleCallback() {
            @Override
            public void activate(LikeView view) {
                Snackbar.make(view, "你覺(jué)得" + entity.name + "很贊!", Snackbar.LENGTH_SHORT).show();
            }

            @Override
            public void deactivate(LikeView view) {
                Snackbar.make(view, "你取消了對(duì)" + entity.name + "的贊!", Snackbar.LENGTH_SHORT).show();
            }
        });
        //評(píng)論view的設(shè)置
        holder.comment.setNumber(entity.commentNum);
        //設(shè)置圖形適配器
        holder.comment.setGraphAdapter(CommentPathAdapter.getInstance());
        holder.comment.setCallback(new LikeView.SimpleCallback(){
            @Override
            public boolean onClick(LikeView view) {
                Snackbar.make(view, "你點(diǎn)擊" + entity.name + "的評(píng)論按鈕", Snackbar.LENGTH_SHORT).show();
                //返回true代表攔截此次點(diǎn)擊,不使用默認(rèn)的點(diǎn)擊事件
                return true;
            }
        });

自定義圖形適配器

public class CommentPathAdapter implements LikeView.GraphAdapter {
    private static CommentPathAdapter instance;
    private static final float xOffsetScale = 0.06f;
    private static final float yOffsetScale = 0.2f;
    //可用單例模式
    public static CommentPathAdapter getInstance() {
        synchronized (CommentPathAdapter.class) {
            if (null == instance) {
                instance = new CommentPathAdapter();
            }
        }
        return instance;
    }
    //這里繪制你想要的圖形
    @Override
    public Path getGraphPath(LikeView view, int length) {
        Path path = new Path();
        int dx = (int) (length * xOffsetScale);
        int dy = (int) (length * yOffsetScale);
        int w = (int) (length * (1 - xOffsetScale * 2));
        int h = (int) (length * (1 - yOffsetScale * 2));
        path.moveTo(dx, dy);
        path.lineTo(dx + w, dy);
        path.lineTo(dx + w, dy + h);
        path.lineTo(dx + (w * 0.35f), dy + h);
        path.lineTo(dx + (w * 0.1f), dy + (h * 1.4f));
        path.lineTo(dx + (w * 0.1f), dy + h);
        path.lineTo(dx, dy + h);
        path.lineTo(dx, dy);
        return path;
    }
}

自定義配置

<resources>
    <declare-styleable name="LikeView">
        <!--當(dāng)前數(shù)值,默認(rèn)0-->
        <attr name="number" format="integer"/>
        <!--數(shù)字顏色,默認(rèn)#888888-->
        <attr name="textColor" format="color"/>
        <!--圖形外邊顏色,默認(rèn)#888888-->
        <attr name="graphColor" format="color"/>
        <!--當(dāng)前激活時(shí)圖形顏色,默認(rèn)#ca5f5f-->
        <attr name="animateColor" format="color"/>
        <!--字體大小,決定控件高度以及圖形大小,默認(rèn)14sp-->
        <attr name="textSize" format="dimension"/>
        <!--動(dòng)畫時(shí)間,默認(rèn)300-->
        <attr name="animateDuration" format="integer"/>
        <!--圖形與數(shù)字間的距離,默認(rèn)3dp-->
        <attr name="distance" format="dimension"/>
        <!--圖形與數(shù)字高度的比例,默認(rèn)1.3-->
        <attr name="graphTextHeightRatio" format="float"/>
        <!--圖形外邊繪制寬度,默認(rèn)3dp-->
        <attr name="graphStrokeWidth" format="dimension"/>
        <!--數(shù)字繪制寬度,默認(rèn)2dp-->
        <attr name="textStrokeWidth" format="dimension"/>
        <!--是否激活,默認(rèn)false-->
        <attr name="isActivated" format="boolean"/>
        <!--是否自動(dòng)測(cè)量數(shù)字修改后的寬度改變,防止更改狀態(tài)時(shí)控件寬度改變,默認(rèn)開啟-->
        <attr name="autoMeasureMaxWidth" format="boolean"/>
        <!--是否不允許取消點(diǎn)贊,默認(rèn)false-->
        <attr name="notAllowedCancel" format="boolean"/>
        <!--對(duì)齊方式,前三種默認(rèn)垂直居中-->
        <attr name="gravity" format="enum">
            <!--居中-->
            <enum name="center" value="1"/>
            <!--左對(duì)齊-->
            <enum name="left" value="2"/>
            <!--右對(duì)齊-->
            <enum name="right" value="3"/>
            <!--開始點(diǎn)-->
            <enum name="start" value="4"/>
        </attr>
    </declare-styleable>
</resources>

接口

/**
     * 事件監(jiān)聽接口
     */
    public interface Callback {
        /**
         * 點(diǎn)擊事件監(jiān)聽
         *
         * @param view 當(dāng)前View
         * @return 返回true則代表不使用默認(rèn)的點(diǎn)擊事件
         */
        boolean onClick(LikeView view);

        /**
         * 變?yōu)榧せ顮顟B(tài)
         *
         * @param view 當(dāng)前View
         */
        void activate(LikeView view);

        /**
         * 變?yōu)椴患せ顮顟B(tài)
         *
         * @param view 當(dāng)前View
         */
        void deactivate(LikeView view);
    }
    
    /**
     * 獲取圖形Path接口
     */
    public interface GraphAdapter {
        /**
         * 獲取圖形的Path
         *
         * @param view   當(dāng)前View
         * @param length 可繪制圖形區(qū)域正方形的邊長(zhǎng)
         * @return 帶有圖形的Path
         */
        Path getGraphPath(LikeView view, int length);
    }

聲明

此項(xiàng)目為練手項(xiàng)目,當(dāng)中可能存在BUG,發(fā)現(xiàn)BUG請(qǐng)指出,謝謝
github地址 歡迎Star