我如何使用形状而不是图像创建条纹背景

Question

我想知道如何在不实际添加背景图像的情况下使用不同颜色的线条创建背景。 我想用java中的任何形状或代码来解决它。

非常感谢！

Answer 1

这是我的9补丁（我称之为/res/drawable/stripes_vert_4.9.png）：

＆lt; = 看！它在这里！它的 14 * 5 px 大小，包括边框。重量： 205字节

这是设置为背景时的结果：

现在是一个半透明的渐变（我称之为/res/drawable/bg_stripes_vert_gradient）：

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#0000"
        android:endColor="#8000"
        android:gradientRadius="180"
        android:type="linear"
        android:angle="-90"
    />
</shape>

使用start | center | endColor进行游戏以获得最佳平衡 现在，布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/stripes_vert_4"
    >
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_stripes_vert_gradient"
    />
</RelativeLayout>

最终结果：

Answer 2

您可以在布局文件中使用虚拟视图。虚拟视图很简单＆＃34; view＆＃34; xml布局文件中的对象。你可以在这些视图上设置宽度，高度，背景颜色，填充......在android中创建水平/垂直分隔线或条纹时，它们特别有用。 这就是你如何使用它们来实现背景，就像你问题中的图像一样。这个视图的背景不是颜色，你可以在你的drawable文件夹中将渐变定义为xml文件：

在这里，我使用线性布局将4个视图放在垂直方向，而每个视图占据屏幕宽度不动产的25％，在任何屏幕尺寸上。

   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:weightSum="1">

       <View 
         android:id="@+id/stripe_one"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/red"  />

       <View 
         android:id="@+id/stripe_two"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/orange"  />

       <View 
         android:id="@+id/stripe_three"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/velvet"  />

       <View 
         android:id="@+id/stripe_four"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="0.25"
         android:background="@color/green"  />

  <LinearLayout />

Answer 3

这里有很好的答案。这个方法旨在表明，如果您了解一些技巧，使用自定义视图解决这些问题并不太难。详细信息可以在本文中找到：

https://developer.android.com/guide/topics/graphics/2d-graphics.html

以下是代码：

package com.example;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
Bitmap bitmap;
Paint paint;
Rect dst;

public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

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

void init() {
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL_AND_STROKE);

    bitmap = Bitmap.createBitmap(4, 1, Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(bitmap);

    paint.setColor(Color.parseColor("#c43134"));
    c.drawRect(0, 0, 1, 1, paint);

    paint.setColor(Color.parseColor("#b3632e"));
    c.drawRect(1, 0, 2, 1, paint);

    paint.setColor(Color.parseColor("#ab2463"));
    c.drawRect(2, 0, 3, 1, paint);

    paint.setColor(Color.parseColor("#8e9e34"));
    c.drawRect(3, 0, 4, 1, paint);
}

protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(bitmap, (Rect) null, dst, paint);
}

protected void onSizeChanged(int x, int y, int ox, int oy) {
    dst = new Rect(0, 0, x, y);
}
}

我们的想法是使用基本的2d绘图命令将一个简单的形状预先绘制成一个小的位图，该位图将在绘制时自动按比例缩放以适合视图的尺寸。

根据链接的文章，drawBitmap()方法中的onDraw()调用很快，因此此方法与动态或动画显示兼容。

编辑：截图：

编辑：我没有指出如何在布局中包含自定义视图。这是一个基本的例子。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<com.example.CustomView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</FrameLayout>