两种不同颜色的布局答案

【问题标题】：Layouts with two different colors两种不同颜色的布局
【发布时间】：2015-08-05 14:28:11
【问题描述】：

我正在尝试获得这样的东西：

通过使用带有浅灰色 (#EEEEEE) 的 RelativeLayout 和带有稍深灰色 (`#9E9E9E) 的 LinearLayout，但尽管颜色不同，但我没有获得明显的对比度...

我的代码：

<?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:orientation="vertical" >
    <!--android:background="@mipmap/background_poly"-->
    <RelativeLayout  android:id="@+id/account_det"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="#EEEEEE">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/usrAvatar"
            android:layout_width="90dp" android:layout_height="90dp"
            android:src="@mipmap/aka"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="38dp" />

        <TextView android:id="@+id/usrName"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
            android:layout_marginTop="2dp"
            android:text="Cris"
            android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
            android:layout_toEndOf="@id/usrAvatar"
            android:layout_toRightOf="@id/usrAvatar"
            android:layout_alignTop="@id/usrAvatar" />
            <!--android:layout_alignBaseline="@id/usrAvatar"-->

        <TextView android:id="@+id/usrEmail"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="normal"
            android:text="nickname@email.com"
            android:layout_alignLeft="@id/usrName"
            android:layout_alignStart="@id/usrName"
            android:layout_below="@id/usrName" />
    </RelativeLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:background="#BDBDBD"
        android:layout_below="@+id/account_det">

    </LinearLayout>
</RelativeLayout>

结果：

在此处输入图片说明

如何获得目标设计？

【问题讨论】：

尝试将 CircleImageView 放到它的父级相对布局 account_det 中，然后拖放进行调整。
设置线性布局的高度 =(90/2+38) 即圆形图像视图的边缘顶部+圆形图像视图的一半高度。

标签： android android-layout layout background-color

【解决方案1】：

使用layer-list 创建自定义Drawable 的一种可能解决方案：

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

    <item android:top="128dp">
        <shape android:shape="rectangle" >   
            <solid android:color="#66C2C2C2" />
            <size android:height="128dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle" >   
            <solid android:color="#66EEEEEE" />
        </shape>
    </item>

</layer-list>

并使用此Drawable 作为布局的背景。

【讨论】：

在 dp 中设置高度的方式在这里不一致，矩形在大屏幕设备中可能看起来很小
我知道，但是因为您使用固定的 ImageView 值（高度和宽度均为 90dp）并且您使用 38dp 制作固定的 marginTop 这是最好的方法使矩形在 ImageView 的中间中断
例如，我认为除了这个之外别无他法，因为在视图组中添加View 时不可能发生溢出，因此在所有情况下ImageView 都将在矩形中
抱歉耽搁了。我刚刚在我的drawable 文件夹中创建了一个drawable-list：pastie.org/private/sneftipnm8dk4rhinyxq，并在我的xml 布局文件中引用了它：pastie.org/private/n4nvwtmeatawcdtujkfjta，但我看不到任何颜色！背景只是纯白色......
我会尽快自己试一试，我会给你结果

【解决方案2】：

我认为这会对您有所帮助。文件名为 layout_background.xml 你会这样调用 android:background="@drawable/layout_background"

xml 文件在这里 ->

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorDefClickEffect"
tools:targetApi="lollipop"> 

 <item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/white" />
        <corners android:radius="@dimen/radius_btn_credential" />
    </shape>
</item>

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/radius_btn_credential" />
        <gradient android:endColor="@color/colorBtnWhiteFg"
            android:startColor="@color/colorBtnPrimaryBg"
            android:angle="45" />
    </shape>
</item>

【讨论】：