自定义组合控件——通用带标识头像

相信很多人都看到过，右下角带V标的头像，他们与众不同，代表着一个和大众不同的身份。他们背后也许是一个公司，也许是个段子手，也许是个明星……

不多说，先上效果:

Paste_Image.png
Paste_Image.png Paste_Image.png

是不是还不错呢。由于项目中头像几乎无处不在。如果每个都自己写一遍代码，那恐怕要累死了，所以我想到了自定义组合控件。这样，每次只需要调用一行代码就可以实现上图效果了。

---

1. 看图即知，这个组合控件需要两个ImageView，其中头像是居中于父布局，V标居于父布局的右下方。也就是说，这是一个相对布局。这个布局不习惯用代码写的也可以用xml哦。下面是代码展示：

    RoundImageView avatar;
    ImageView icon;
    private void initViews(Context context) {
        avatar = new RoundImageView(context);
        RelativeLayout.LayoutParams paramsAvatar = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        paramsRoundAvatar.addRule(CENTER_IN_PARENT);
        addView(avatar, paramsAvatar);
        icon= new ImageView(context);
        RelativeLayout.LayoutParams paramsIcon = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        paramsGradeIcon.addRule(ALIGN_PARENT_BOTTOM);
        paramsGradeIcon.addRule(ALIGN_PARENT_RIGHT);
        addView( icon, paramsIcon);
    }

2.写完了布局之后，我们还需要做什么呢？我们的头像在不同的位置展示是有大有小的，有的可点击，有的不可点击，有的有边框，有的无边框，所以呢，下一步，我们需要设置这个组合控件的属性。
打开attrs.xml文件，声明属性:

 <declare-styleable name="CommonAvatarView">
        <!--V标宽-->
        <attr name="gradeIconWidth" format="dimension" />
        <!--V标高-->
        <attr name="gradeIconHeight" format="dimension" />
        <!--是否可点击-->
        <attr name="clickable" format="boolean" />
        <!--边框的厚度-->
        <attr name="mBorderThickness" format="dimension" />
        <!--外边框的颜色-->
        <attr name="mBorderOutsideColor" format="color" />
        <!--内边框的颜色-->
        <attr name="mBorderInsideColor" format="color" />
        <!--V标的右外边距-->
        <attr name="gradeIconMarginRight" format="dimension" />
    </declare-styleable>

3.属性已经准备好了，下一步和我们的控件联系起来吧。在CommonAvatarView的构造里写入：

public CommonAvatarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        initViews(context);
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CommonAvatarView);
        int gradeIconWidth = (int) mTypedArray.getDimension(R.styleable.CommonAvatarView_gradeIconWidth, ScreenUtils.dp2px(context, 10));
        int gradeIconHeight = (int) mTypedArray.getDimension(R.styleable.CommonAvatarView_gradeIconHeight, ScreenUtils.dp2px(context, 10));
        int gradeIconMarginRight = (int) mTypedArray.getDimension(R.styleable.CommonAvatarView_gradeIconMarginRight, 0);
        Boolean clickable = mTypedArray.getBoolean(R.styleable.CommonAvatarView_clickable, false);
        int mBorderThickness = (int) mTypedArray.getDimension(R.styleable.CommonAvatarView_mBorderThickness, 0);
        int mBorderInsideColor = mTypedArray.getColor(R.styleable.CommonAvatarView_mBorderInsideColor, defaultColor);
        int mBorderOutsideColor = mTypedArray.getColor(R.styleable.CommonAvatarView_mBorderOutsideColor, defaultColor);
        avatar.setmBorderThickness(mBorderThickness);
        avatar.setmBorderInsideColor(mBorderInsideColor);
        avatar.setmBorderOutsideColor(mBorderOutsideColor);
        avatar.invalidate();
        LayoutParams params = (LayoutParams) icon.getLayoutParams();
        params.setMargins(0, 0, gradeIconMarginRight, gradeIconMarginRight);
        params.width = gradeIconWidth;
        params.height = gradeIconHeight;
        if (clickable) {
            setOnClickListener(this);
        }
    }

4.到了这一步，整个控件已经完成百分之90了。欢呼_{当然前提是前边的步骤代码你都看懂了哦}最后就开始写我之前说的一行代码实现vip头像效果了~其实很简单，只需要传入需要的参数就可以了呢！将头像地址和用户类型参数传入方法里。
头像标识只有两种状态：黄V，蓝V。

/*userType值：0普通用户  1黄V用户  2蓝v用户*/
  public void setUserAvatar(String avatarUrl, int userType) {
        Glide.with(mContext).load(avatarUrl).asBitmap().error(R.mipmap.user_null_icon).placeholder(R.mipmap.user_null_icon).centerCrop().into(avatar);
        icon.setVisibility(VISIBLE);
        if (userType == 1) {
            icon.setImageResource(R.mipmap.vip);
        } else if (userType == 2) {
            icon.setImageResource(R.mipmap.corp);
        } else {
            icon.setVisibility(GONE);
        }
    }

好了，到此，自定义组合控件——vip头像完成了！是不是没有想象的那么难呢O(∩_∩)O

---

使用方式和普通的控件是一样的，只需要在xml文件引入就好了。下边代码实现的就是上边第三个头像的效果哦~

  <com.luck.app.custom_view.CommonAvatarView
                        android:id="@+id/riv_headPortrait"
                        android:layout_width="@dimen/private_detail_avatar_height_width"
                        android:layout_height="@dimen/private_detail_avatar_height_width"
                        android:layout_centerHorizontal="true"
                        imagecontrol:gradeIconHeight="@dimen/setup_row_right_margin_left_right"
                        imagecontrol:gradeIconMarginRight="5dp"
                        imagecontrol:gradeIconWidth="@dimen/setup_row_right_margin_left_right"
                        imagecontrol:mBorderInsideColor="@color/roung_image_view_border_inside_color"
                        imagecontrol:mBorderOutsideColor="@color/roung_image_view_border_outside_color"
                        imagecontrol:mBorderThickness="@dimen/round_image_view_border_thickness" />