玩转自定义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的东西给大家分享。已经内存管理、分配、泄露的知识等等。希望大家互相学习！有事随时留言