Android中逐瓣绘制花朵：ImageView旋转中心偏移问题求助

嗨，这个问题我之前也碰到过！默认情况下，ImageView的旋转中心是它自身的中心，不是你想要的花朵中心点，所以每个花瓣绕着自己转，自然就散得不对了。咱们来改改代码，让所有花瓣都乖乖绕着花朵中心转～

问题根源 #

你之前的代码只设置了花瓣的位置，但没指定旋转的基准点——setRotation()默认用视图自身的中心作为旋转轴，所以每个花瓣都是绕着自己的中心转，而不是整个花朵的中心点。

解决步骤&修改后的代码 #

核心就是两步：

1. 让每个花瓣的「旋转轴点」（比如花瓣的根部）对准花朵中心
2. 给ImageView设置正确的pivotX和pivotY（这两个参数是相对于视图自身的坐标）

假设你的花瓣图片是R.drawable.petal，修改后的代码如下：

// 花朵的中心点坐标
int flowerCenterX = 500;
int flowerCenterY = 500;
RelativeLayout layout = (RelativeLayout) findViewById(R.id.ln1);

// 获取花瓣图片的原始尺寸（如果是网络图片，要等加载完成后获取）
Drawable petalDrawable = getResources().getDrawable(R.drawable.petal);
int petalWidth = petalDrawable.getIntrinsicWidth();
int petalHeight = petalDrawable.getIntrinsicHeight();

// 10个花瓣，每个花瓣的旋转角度增量是36度（360/10）
int angleIncrement = 36;

for (int i = 0; i < 10; i++) {
    ImageView petal = new ImageView(this);
    petal.setImageDrawable(petalDrawable);

    // 第一步：设置花瓣的位置，让花瓣的根部（要绕转的点）对准花朵中心
    // 假设花瓣的根部在自身的底部中心，那么ImageView的左上角坐标应该是：
    int leftMargin = flowerCenterX - petalWidth / 2;
    int topMargin = flowerCenterY - petalHeight;
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(petalWidth, petalHeight);
    params.leftMargin = leftMargin;
    params.topMargin = topMargin;
    petal.setLayoutParams(params);

    // 第二步：设置旋转中心为花瓣的根部（相对于ImageView自身的坐标：底部中心就是宽的一半，高度的位置）
    petal.setPivotX(petalWidth / 2);
    petal.setPivotY(petalHeight);

    // 设置当前花瓣的旋转角度
    petal.setRotation(i * angleIncrement);

    layout.addView(petal);
}

额外注意事项 #

如果你的花瓣图片是动态加载的（比如网络图片），getIntrinsicWidth()可能会返回0，这时候要等视图测量完成后再设置参数：

// 在创建petal之后添加这段代码
petal.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 移除监听，避免重复触发
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            petal.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        } else {
            petal.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }

        int actualWidth = petal.getWidth();
        int actualHeight = petal.getHeight();

        // 重新调整位置和旋转中心
        petal.setPivotX(actualWidth / 2);
        petal.setPivotY(actualHeight);
        
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) petal.getLayoutParams();
        params.leftMargin = flowerCenterX - actualWidth / 2;
        params.topMargin = flowerCenterY - actualHeight;
        petal.setLayoutParams(params);
        
        petal.setRotation(i * angleIncrement);
    }
});

这样改完之后，所有花瓣都会绕着你设定的flowerCenterX和flowerCenterY旋转，完美组成一朵对称的花啦～

内容的提问来源于stack exchange，提问作者MACMAN