两种颜色背景Android

Question

我正在编写一个 Android 活动，它的上侧应该有一种颜色的背景，而它的下侧应该有另一种颜色的背景。

使用的相对布局被填充。

我通常做的是使用非填充相对布局并将其分为上下相对布局，这些u/l分为其他填充相对布局。

这向我保证所有活动区域都具有它应该具有的背景颜色。 填充区域确保小部件围绕活动的中心。

但现在我有一个已经编程的活动，并且上面的小部件和底部的小部件相互关联，所以我不能轻易划分相对布局。

有什么建议吗？

Answer 1

查看您的活动的此布局。只有一个RelativeLayout 有两种背景。一个设置为布局本身，另一个设置为位于顶部视图下方的空View。唯一的缺点是您必须从 RelativeLayout 中删除 padding 并将其替换为设置为您的视图的 margin。我想这没什么大不了的。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#59C2F2">

    <!-- This is the last TextView of top part, below it the bg will be different -->
    <TextView
        android:id="@+id/top_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This represents top elements"/>

    <!-- This View must be placed before any elements from the bottom part -->
    <View
        android:id="@+id/bottom_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top_text"
        android:layout_alignParentBottom="true"
        android:background="#004892" />

    <!-- Now you can place your bottom elements and align them with the to ones -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/bottom_background"
        android:layout_alignLeft="@+id/top_text"
        android:layout_marginTop="16dp"
        android:textColor="#fff"
        android:text="This is the bottom part"/>

</RelativeLayout>

Answer 2

首先将此添加到您的/values/attrs.xml。如果文件不存在，请将其创建为资源类型。

<declare-styleable name="TwoColoredView">
    <attr name="topColor" format="color"/>
    <attr name="bottomColor" format="color"/>
    <attr name="topColorHeightPercent" format="integer"/>
</declare-styleable>

接下来创建一个TwoColoredView 类并将其放在您保留自定义视图的地方

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

import your.package.R;

/**
 * Created by Bojan on 27.4.2015.
 */

public class TwoColoredView extends View {

    private int measuredWidth, measuredHeight;
    private Paint topPaint, bottomPaint;
    final int defaultTopColor = 0xFFFF0000;
    final int defaultBottomColor = 0xFF0000FF;
    private int topHeight = 40;

    public TwoColoredView(Context context) {
        super(context);
        init(context, null, 0);
    }

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

    public TwoColoredView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attributeSet, int style) {

        TypedArray typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.TwoColoredView, style, style);

        int topColor = typedArray.getColor(R.styleable.TwoColoredView_topColor, defaultTopColor);
        int bottomColor = typedArray.getColor(R.styleable.TwoColoredView_bottomColor, defaultBottomColor);
        topHeight = typedArray.getInteger(R.styleable.TwoColoredView_topColorHeightPercent, 40);

        typedArray.recycle();

        topPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        topPaint.setStyle(Paint.Style.FILL);
        topPaint.setColor(topColor);

        bottomPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        bottomPaint.setStyle(Paint.Style.FILL);
        bottomPaint.setColor(bottomColor);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(0, 0, measuredWidth, measuredHeight * 0.01f * topHeight, topPaint);
        canvas.drawRect(0, measuredHeight * 0.01f * topHeight, measuredWidth, measuredHeight, bottomPaint);
    }
}

现在为您的片段/布局创建一个布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <your.package.TwoColoredView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:topColorHeightPercent="40"
        app:topColor="#FFFF0000"
        app:bottomColor="#FF0000FF"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Other stuff goes here -->

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:text="Hehe.. I'm the middle bro!"/>

    </RelativeLayout>

</FrameLayout>

这是最终的结果