玩转自定义ViewGroup——环形围绕展示图片效果

今天时间有点紧，一会公司组织的德州扑克要去玩，我就不多说什么了。直接先看效果吧：

效果：很简单就是以中间图片为中心环形散开!

核心逻辑：很显然，这次又是设计到了摆放子View的位置，基本和上篇博客技术点基本是一致的，也是采用了自定义Viewgroup的形式，让容器中添加子View，然后在onlayuout里面摆放子View的位置。

算法解析：第一圈的头像：一共有八个头像，每一个头像所取得角度是360/8 = 45度。然后在加上Cos算出X坐标 Sin算出Y坐标，在通过得到自己的宽和高分别算出左上右下几个点。就可摆放位置了。第二圈的头像也是同理的，只不过是改变了一下起始的角度而已。

下面直接上代码了：

/** 在外面直接调用这个方法即可
* 初始化操作
* @param num 要显示的数量
* @param radius 自己定义的第一圈的半径
*/
public void init(int num, int radius) {
mRadius = radius;
this.num = num;
for (int i = 0; i < num; i++) {
if (i == 0) {

ImageView imageView = new ImageView(getContext());
addView(view,MeasureUtil.dip2px(90), MeasureUtil.dip2px(90));
} else {
ImageView imageView = new ImageView(getContext());
imageView.setImageResource(R.mipmap.ic_launcher);
addView(imageView, MeasureUtil.dip2px(40), MeasureUtil.dip2px(40));
}
}
}

PS：得到控件的宽和高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//得到容器的宽和高
sizeWidth = getMeasuredWidth();
sizeHeight = getMeasuredHeight();
}

PS：核心代码

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
for (int i = 0; i < num; i++) {
View child = getChildAt(i);
if (child != null) {
if (i == 0) { //中间大的图片
mX = sizeWidth / 2;
startx = mX;
mY = sizeHeight / 2;
starty = mY;
} else if (i >= 1 && i <= 8) { //大图围绕第一圈图片
//角度
mAngle = 45 * (i - 1);
//根据公式算X Y坐标，mRadius为自己定义的半径
mX = (int) (sizeWidth / 2 + Math.cos(Math.toRadians(mAngle)) * mRadius );
mY = (int) (sizeHeight / 2 + Math.sin(Math.toRadians(mAngle)) * mRadius );
} else { //大图围绕第2圈图片
mAngle = 60 * (i - 9)+23;
mX = (int) (sizeWidth / 2 + Math.cos(Math.toRadians(mAngle)) * (mRadius + 150));
mY = (int) (sizeHeight / 2 + Math.sin(Math.toRadians(mAngle)) * (mRadius + 150));
}
//摆放中间大图片
if (i == 0) {
child.layout(mX - child.getWidth() / 2, mY - child.getHeight() / 2, mX + child.getWidth() / 2, mY + child.getHeight() / 2);
} else { //其他图片
TranslateAnimation translateAnimation = new TranslateAnimation(startx-mX,0,starty- mY ,0);
translateAnimation.setDuration(400);
translateAnimation.setFillAfter(true);
child.setAnimation(translateAnimation);
child.layout(mX - child.getWidth() / 2, mY - child.getHeight() / 2, mX + child.getWidth() / 2, mY + child.getHeight() / 2);
}
}
}
}

OK了！其实挺简单了，下次我会写一些自定义View的东西给大家分享。已经内存管理、分配、泄露的知识等等。希望大家互相学习！有事随时留言

玩转自定义ViewGroup——环形围绕展示图片效果

相关推荐