RelativeLayout 对齐父底部不对齐底部

Question

我有一个使用相对布局的自定义圆形布局：

public class CircularLayout extends RelativeLayout implements OnDragListener {
    private DropCallback onDrop = null;
    private ImageButton imageButton = null;
    private ImageView imageViewBackgroundWave = null;
    private int radius = -1;
    private double step = -1;
    private double angle = -1;
    private static final int CENTER_ID = 111;

    public CircularLayout(Context context, DropCallback onDrop, int radius, List<View> views) {
        super(context);

        this.onDrop = onDrop;
        this.radius = radius;
        this.step = (2 * Math.PI) / views.size();

        this.initView(context, views);
    }

    private void initView(Context context, List<View> views) {
        RelativeLayout.LayoutParams layoutParamsView = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

        this.setLayoutParams(layoutParamsView);

        RelativeLayout.LayoutParams layoutParamsImageview = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        layoutParamsImageview.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        layoutParamsImageview.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

        this.imageViewBackgroundWave = new ImageView(this.getContext());
        this.imageViewBackgroundWave.setLayoutParams(layoutParamsImageview);
        this.imageViewBackgroundWave.setImageDrawable(this.getResources().getDrawable(R.drawable.background_wave));

        this.addView(this.imageViewBackgroundWave);

        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
        layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);

        this.imageButton = new ImageButton(context);
        this.imageButton.setId(CENTER_ID);
        this.imageButton.setLayoutParams(layoutParams);
        this.imageButton.setImageResource(R.drawable.ic_power_on);
        this.imageButton.getBackground().setAlpha(0);
        this.imageButton.setOnDragListener(this);

        this.addView(this.imageButton);

        for(View view : views) {
            this.addView(this.placeView(view));
        }
    }

    private View placeView(View view) {
        view.measure(0, 0);
        this.imageButton.measure(0, 0);

        int x = (int)((view.getMeasuredWidth() / 2) + this.radius * Math.cos(this.angle));
        int y = (int)((view.getMeasuredHeight() / 2) + this.radius * Math.sin(this.angle));

        this.angle += this.step;

        int deltaX = view.getMeasuredWidth();
        int deltaY = view.getMeasuredHeight();
        int deltaImageX = this.imageButton.getMeasuredWidth() / 2;
        int deltaImageY = this.imageButton.getMeasuredHeight() / 2;
        int xToDraw = ((x - deltaX) - deltaImageX);
        int yToDraw = ((y - deltaY) - deltaImageY);

        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(RelativeLayout.ABOVE, CENTER_ID);
        layoutParams.addRule(RelativeLayout.RIGHT_OF, CENTER_ID);
        layoutParams.setMargins(xToDraw, 0, 0, yToDraw);

        view.setLayoutParams(layoutParams);

        return view;
    }

    @Override
    public boolean onDrag(View view, DragEvent event) {
        return this.onDrop.onDrop(view, event);
    }
}

不幸的是，imageview (imageViewBackgroundWave) 没有在底部对齐。它对齐得更高一点：

所以问题是：如何将图像视图对齐到屏幕底部？ 图像与蓝色条纹一样高和一样宽。没有 填充或白色。它只是上图中显示的蓝色条纹。

编辑：

background_wave.png：

我在MenuFragment 中使用了这个自定义布局，并使用以下代码调用它：

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    // ... init the imagebuttons in the list of views

    this.circleView = new CircularLayout(this.getActivity(), this, 250, views);
    this.circleView.setOnDragListener(this);
    this.circleView.setBackground(this.getResources().getDrawable(R.drawable.background));

    return this.circleView;
}

Answer 1

添加这行代码可以让ImageView贴在底部：

imageView.setScaleType(ScaleType.FIT_END);

奇怪的原因是ImageView的边界是由布局引擎先计算出来的，然后ImageView内部的图像根据缩放类型被缩放以适应分配的区域。

对 ImageView 使用 WRAP_CONTENT 会根据 未缩放 图像位图的大小分配一个区域 - 即使它大于屏幕。您的 background_wave.png 文件比屏幕宽，因此分配了比需要更大的区域。然后，当使用 FIT_CENTER 将图像安装在布局区域内时，它会缩小并居中，因此您最终会在其上方和下方留下空白。

您可以通过将 background_wave.png 调整为大小的 1/4 来验证这一点：即使没有上述代码更改，它也应该与底部对齐。

Answer 2

您使用RelativeLayout.LayoutParams.WRAP_CONTENT 和RelativeLayout.ALIGN_PARENT_BOTTOM 设置宽度和高度两次

试试这个：

private void initView(Context context) {
    RelativeLayout.LayoutParams layoutParamsView = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

    this.setLayoutParams(layoutParamsView);

    RelativeLayout.LayoutParams layoutParamsImageview = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

    this.imageView = new ImageView(this.getContext());
    this.imageView.setLayoutParams(layoutParamsImageview);
    this.imageView.setImageDrawable(this.getResources().getDrawable(R.drawable.background_wave));

    this.addView(this.imageView);
}

我还推荐你使用带有 XML 的可视化设计器来测试布局的规则和参数，然后，如果你需要，你可以在代码中设置这些规则以获得相同的结果。