Android Studio中线性/相对布局下按百分比等距排列4个圆形视图的Java实现方案求助

嗨，我懂你要的效果啦——4个圆形视图在布局里均匀分布，左右到屏幕边缘的距离和每个圆形之间的间距都保持一致，还得是按百分比适配不同屏幕对吧？之前我做项目时也遇到过类似需求，用LinearLayout配合weight属性就能轻松搞定，RelativeLayout实现起来会麻烦些，先给你上能用的代码~

方案一：LinearLayout实现（推荐） #

这个方案不需要动态计算，纯布局就能实现等距效果，适配各种屏幕宽度。

1. 编写布局文件（activity_main.xml） #

我们用横向LinearLayout，通过weight分配View和间隔的空间，保证每个间隔（左、中、右）和圆形View的宽度占比一致：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="9">

    <!-- 左侧间隔 -->
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <!-- 自定义圆形View -->
    <com.example.myapplication.CircleView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@color/teal_200"/>

    <!-- 中间间隔1 -->
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <com.example.myapplication.CircleView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@color/purple_200"/>

    <!-- 中间间隔2 -->
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <com.example.myapplication.CircleView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@color/red"/>

    <!-- 中间间隔3 -->
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <com.example.myapplication.CircleView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@color/yellow"/>

    <!-- 右侧间隔 -->
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

• weightSum="9"是因为4个圆形View + 5个间隔（左、3个中间、右），每个的weight="1"，这样每个元素的宽度都是父布局的1/9，完美实现等距。
• 你可以调整layout_height来改变圆形的大小，或者给CircleView设置layout_height="0dp"+weight来让高度也按比例适配。

2. 自定义圆形View（CircleView.java） #

Android原生没有圆形View，我们自己写一个简单的：

package com.example.myapplication; // 替换成你的项目包名

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class CircleView extends View {
    private Paint paint;

    public CircleView(Context context) {
        super(context);
        init();
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true); // 抗锯齿，让圆形更平滑
        // 默认蓝色，你也可以在布局里用android:background覆盖
        paint.setColor(getContext().getResources().getColor(android.R.color.holo_blue_light));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 取View宽高的最小值作为直径，保证是正圆形
        int size = Math.min(getWidth(), getHeight());
        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;
        // 绘制圆形
        canvas.drawCircle(centerX, centerY, size / 2, paint);
    }

    // 可选：动态修改圆形颜色的方法
    public void setCircleColor(int color) {
        paint.setColor(color);
        invalidate(); // 触发重新绘制
    }
}

方案二：RelativeLayout实现（可选） #

如果一定要用RelativeLayout，需要通过Java代码动态计算每个圆形的位置：

1. 布局文件（activity_main.xml） #

先放4个圆形View，不设置位置：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.example.myapplication.CircleView
        android:id="@+id/circle1"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/teal_200"/>

    <com.example.myapplication.CircleView
        android:id="@+id/circle2"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/purple_200"/>

    <com.example.myapplication.CircleView
        android:id="@+id/circle3"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"/>

    <com.example.myapplication.CircleView
        android:id="@+id/circle4"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/yellow"/>

</RelativeLayout>

2. Activity代码（MainActivity.java） #

在布局加载完成后，计算每个圆形的左边距：

package com.example.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout relativeLayout = findViewById(R.id.relative_layout);
        View circle1 = findViewById(R.id.circle1);
        View circle2 = findViewById(R.id.circle2);
        View circle3 = findViewById(R.id.circle3);
        View circle4 = findViewById(R.id.circle4);

        // 等待布局完成后再计算，避免获取到的宽度为0
        relativeLayout.post(() -> {
            int parentWidth = relativeLayout.getWidth();
            int circleWidth = circle1.getWidth();
            // 计算每个间隔的宽度：(父布局总宽度 - 4个圆形宽度) / 5
            int gap = (parentWidth - 4 * circleWidth) / 5;

            // 设置第一个圆形的左边距
            RelativeLayout.LayoutParams params1 = (RelativeLayout.LayoutParams) circle1.getLayoutParams();
            params1.leftMargin = gap;
            circle1.setLayoutParams(params1);

            // 设置第二个圆形的位置
            RelativeLayout.LayoutParams params2 = (RelativeLayout.LayoutParams) circle2.getLayoutParams();
            params2.leftMargin = gap * 2 + circleWidth;
            circle2.setLayoutParams(params2);

            // 设置第三个圆形
            RelativeLayout.LayoutParams params3 = (RelativeLayout.LayoutParams) circle3.getLayoutParams();
            params3.leftMargin = gap * 3 + circleWidth * 2;
            circle3.setLayoutParams(params3);

            // 设置第四个圆形
            RelativeLayout.LayoutParams params4 = (RelativeLayout.LayoutParams) circle4.getLayoutParams();
            params4.leftMargin = gap * 4 + circleWidth * 3;
            circle4.setLayoutParams(params4);
        });
    }
}

小提示 #

• 推荐用LinearLayout方案，代码更简洁，适配性更好，不需要动态计算。
• 如果想要圆形的大小也按百分比适配，可以把CircleView的layout_height设为0dp，并给LinearLayout设置weightSum时加上高度的分配，或者用android:layout_height="20%"（API 21+支持）。

备注：内容来源于stack exchange，提问作者Naresh Pradhan