Question

如何创建一个像上面那样的彩色矩形。是否可以从java代码控制每个彩色矩形的长度？（上图中有一个矩形，里面有4个彩色）。几个小时后我就一直在寻找答案。无法找到解决方案。

编辑：我正在使用AppCompatActivity和这里的content_main.xml＆amp; activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.MainActivity"
    tools:showIn="@layout/activity_main">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:id="@+id/parentis"
        android:orientation="horizontal">
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight=".25"
            android:background="#dc3838"/>
        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight=".25"
            android:background="#c4c11f"/>
        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight=".25"
            android:background="#2c64e7"/>

        <View
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight=".25"
            android:background="#a11a7d"/>

    </LinearLayout>

</RelativeLayout>

activity_main.xml中

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

最后java代码：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

     View child1= new View(this);
    View child2= new View(this);
    View child3= new View(this);
    View child4= new View(this);

    LinearLayout parent = (LinearLayout) findViewById(R.id.parentis);
    LinearLayout.LayoutParams childParam1 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
    childParam1.weight = 0.15f;
    child1.setLayoutParams(childParam1);

    LinearLayout.LayoutParams childParam2 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
    childParam2.weight = 0.15f;
    child2.setLayoutParams(childParam2);

    LinearLayout.LayoutParams childParam3 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
    childParam3.weight = 0.20f;
    child3.setLayoutParams(childParam3);

    LinearLayout.LayoutParams childParam4 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT);
    childParam4.weight = 0.50f;
    child4.setLayoutParams(childParam4);

    parent.setWeightSum(1f);
    parent.addView(child1);
    parent.addView(child2);
    parent.addView(child3);
    parent.addView(child4);
}

Answer 1

使用 android：weightsum =“1”进行线性布局。然后使用 android：weight =“在线性布局中创建4个不同的视图。 “

为每个视图设置所需的颜色。

不要忘记将线性布局的方向设置为水平

示例代码：

<?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:weightSum="1" android:orientation="horizontal"> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".25" android:background="@color/your_color"/> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".25" android:background="@color/your_color"/> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".25" android:background="@color/your_color"/> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".25" android:background="@color/your_color"/> </LinearLayout>

这将平均分配每种颜色。如果您不想平均分配每种颜色，则可以为每个视图重新分配权重。

设置包含每种颜色的视图长度：

首先在xml文件中创建一个空白线性布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dp" android:layout_height="wrap_content" android:weightSum="1" android:id="@+id/ll_parent" android:orientation="horizontal"> </LinearLayout>

然后在java文件中：

LinearLayout parent=(LinearLayout)findViewById(R.id.ll_parent)‌; View child1= new View(this); View child2= new View(this); View child3= new View(this); View child4= new View(this); LinearLayout.LayoutParams childParam1 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); childParam1.weight = 0.25f; child1.setLayoutParams(childParam1); LinearLayout.LayoutParams childParam2 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); childParam2.weight = 0.25f; child2.setLayoutParams(childParam2); LinearLayout.LayoutParams childParam3 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); childParam3.weight = 0.25f; child3.setLayoutParams(childParam3); LinearLayout.LayoutParams childParam4 = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); childParam4.weight = 0.25f; child4.setLayoutParams(childParam4); parent.setWeightSum(1f); parent.addView(child1); parent.addView(child2); parent.addView(child3); parent.addView(child4);

Answer 2

只需设置imageviews的背景颜色，即可在屏幕上显示彩色矩形： imageview.SetBackground(R.color.mycolor);

然后，您只需将ImageViews中的4个放入LinearLayout并以编程方式更改其大小。

Answer 3

将它用于相同尺寸的矩形。

rectangle.xml

   <?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="match_parent"
    android:orientation="horizontal">

    <View
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:background="#dc3838"/>
    <View
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:background="#c4c11f"/>
    <View
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:background="#2c64e7"/>


    <View
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:background="#a11a7d"/>



</LinearLayout>

和这个不同大小的矩形......

<?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="match_parent"
    android:orientation="horizontal">

    <View
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:background="#dc3838"/>
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#c4c11f"/>
    <View
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:background="#2c64e7"/>


    <View
        android:layout_width="90dp"
        android:layout_height="100dp"
        android:background="#a11a7d"/>



</LinearLayout>

输出就像.......

注意： - 设置每个ID并使用LayoutPrams更改其大小....

Answer 4

首先，你应该得到屏幕尺寸：

private Point getScreenSize(){

    WindowManager windowManager = (WindowManager) YamsaferApplication.getContext().getSystemService(Context.WINDOW_SERVICE);

    Display display = windowManager.getDefaultDisplay();

    Point size = new Point();

    display.getSize(size);

}

然后编写以下代码：

int width = getScreenSize().x;

int redWidth = width / 4;

int orangeWidth = width / 4;

int greenWidth = width / 4; 

int cyanWidth = width / 4;

LinearLayout container = new LinearLayout(getContext());

container.setOrientation(LinearLayout.HORIZONTAL);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT,70);

container.setLayoutParams(params);

// create the red area:
View redView = new View(getContext());

redView.setBackgroundColor(Color.RED);

redView.setLayoutParams(new LinearLayout.LayoutParams(redWidth,70));

container.addView(redView);

// create the orangeArea:

View orangeView = new View(getContext());

orangeView.setBackgroundColor(Color.RED);

orangeView.setLayoutParams(new LinearLayout.LayoutParams(orangeWidth,70));

container.addView(orangeView);

//create the green area
View greenView = new View(getContext());

greenView.setBackgroundColor(Color.RED);

greenView.setLayoutParams(new LinearLayout.LayoutParams(greenWidth,70));

container.addView(greenView);

create the cyan area:

View cyanView = new View(getContext());

cyanView.setBackgroundColor(Color.RED);

cyanView.setLayoutParams(new LinearLayout.LayoutParams(cyanWidth,70));

cyanainer.addView(cyanView);

Answer 5

如果您希望只有一个视图的简单布局，并且能够动态更改矩形的大小，则可以创建一个简单的自定义视图。覆盖onDraw（Canvas canvas）方法，你可以在里面执行以下操作：

int rectWidth = getWidth() / 4;
canvas.drawRect(0, 0, rectWidth, getHeight(), redPaint);
canvas.drawRect(rectWidth, 0, 2 * rectWidth, getHeight(), orangePaint);
canvas.drawRect(2 * rectWidth, 0, 3 * rectWidth, getHeight(), greenPaint);
canvas.drawRect(3 * rectWidth, 0, getWidth(), getHeight(), pinkPaint);

你可以创建这样的颜料：

redPaint = new Paint();
redPaint.setColor(*Your red color here*);

如果您需要较小矩形周围的黑色边框，您可以在上面的drawRect（...）调用中添加一些边距，并在它们上方添加canvas.drawARGB（255,0,0,0）。对于圆形矩形，您可以使用drawRoundRect（...）方法。

Android创建了四种不同颜色的矩形

activity_main.xml中

5 个答案: