两种颜色背景 Android

Question

我正在编写一个 Android activity，它的上侧应该有一种颜色的背景，底部应该有另一种颜色的背景。

使用的相对布局被填充。

我平时做的是非padded relative layout，分上下相对布局，这些u/l分在其他padded relative layout

这让我确信所有 activity 区域都有它应该有的背景颜色。填充区域确保小部件围绕 activity.

的中心

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

有什么建议吗？

Answer 1

首先将此添加到您的 /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 class 并将其放在您保留自定义视图的地方

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);
    }
}

现在为您的 fragment/layout

创建布局

<?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>

这是最终结果

Answer 2

为您的 activity 查看此布局。只有一个 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>

两种颜色背景 Android

Two colors background Android

android

android-layout

android-activity

background

background-color