相信很多人都看到过，右下角带V标的头像，他们与众不同，代表着一个和大众不同的身份。他们背后也许是一个公司，也许是个段子手，也许是个明星……
不多说，先上效果:
Paste_Image.png
Paste_Image.png
Paste_Image.png
是不是还不错呢。由于项目中头像几乎无处不在。如果每个都自己写一遍代码，那恐怕要累死了，所以我想到了自定义组合控件。这样，每次只需要调用一行代码就可以实现上图效果了。
- 看图即知，这个组合控件需要两个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" />
