如何使用多个项目的通用背景?

时间:2013-09-07 17:04:06

标签: android background

如果我想看看如下,我该怎么办?更具体地说,如何在多个项目周围设置白色背景? 修改 灰色是整个屏幕的背景,白色就像放在灰色背景上的“盒子”,以及按钮,分隔符和文本视图。

Example of what I want to get

我这样想:

<TableLayout
android:background="#eae8e8>
...
<WhiteBox
    android:layout_width="fill_parent"
    android:layout_height="300dp"
    android:layout_margin="16dp"
    android:background="#FFFFFF/>

    <TextView>
    ...
    <Divider>
    ...
    <Button>
    ...
    <Button>
    ...

</WhiteBox>
</TableLayout>

“WhiteBox”当然是别的东西,但是可以这样做吗?

3 个答案:

答案 0 :(得分:1)

我建议尽可能多地保留透明元素以防止透支问题,但这取决于您的整体需求。通过使用@null背景,您可以更改基本背景元素,并且在其上绘制的所有内容都会相应更改(真正透明)。

布局

<?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="@color/white" 
    android:padding="10dp">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:ems="10"
        android:gravity="center"
        android:inputType="text"
        android:text="Test"
        android:textColor="#CCC" >

        <requestFocus />
    </EditText>

    <View
        android:id="@+id/divider"
        android:layout_below="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#CCC" />

    <LinearLayout
        android:id="@+id/buttons"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@drawable/testbutton"
            android:text="BUTTON 1"
            android:textColor="#CCC" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@drawable/testbutton"
            android:text="BUTTON 2"
            android:textColor="#CCC" />
    </LinearLayout>

</RelativeLayout>

按钮样式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@null" />
            <stroke android:width="1dp" android:color="#CCC" />
        </shape>    
    </item>
    <item>
        <shape>
            <solid android:color="@null" />
            <stroke android:width="1dp" android:color="#CCC" />
        </shape>
    </item>
</selector>

答案 1 :(得分:0)

默认情况下,当您创建没有应用于父布局的背景的xml时,如果内部的小部件也没有任何背景图像/颜色设置。在屏幕上呈现白色。只是不添加任何图像/颜色作为背景。您也可以将背景设置为白色。

android:background="#FFFFFF" set this to your widgets in xml. like button or text view etc to have it appear white.

答案 2 :(得分:0)

是的,您可以继续使用您的方法。只需为您的背景设置为白色的内部布局提供边距。您还可以将背景设置为白色,以便在内部布局中使用文本视图和按钮。将文本颜色设置为灰色,用于文本视图和button.eg:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eae8e8">

<RelativeLayout 
    android:layout_width="200dp"
    android:layout_margin="30dp"
android:layout_height="200dp"
android:background="#FFFFFF"

    >
<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text"
    android:layout_margin="50dp"
    android:text="TextView"
    android:textColor="@android:color/darker_gray"
    android:background="#FFFFFF"
    />
<Button 
    android:layout_marginTop="20dip"
    android:text="Button"
    android:textColor="@android:color/darker_gray"
    android:layout_below="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button1"
    android:background="#FFFFFF"
    />


</RelativeLayout>

</LinearLayout>