如何创建此视图（布局）答案

【问题标题】：How to create this View(layout)如何创建此视图（布局）
【发布时间】：2017-02-15 10:49:22
【问题描述】：

实际上，我正在研究一种布局，我必须将 CardView 放在 ImageView 上，它只覆盖 ImageView 的一半，还添加一个 TextView（检查附加图像）。

注意：

我尝试使用 FrameLayout 以及相对布局... 我实现了它，但我认为它不是正确的方法，因为我主要是硬编码参数。

xml代码：

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    <ImageView
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:layout_gravity="center"
    android:background="@drawable/background"
    android:id="@+id/picture">
</ImageView>

    <TextView
        android:text="TEXT VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="149dp"
        android:layout_marginStart="149dp"
        android:layout_marginTop="24dp"
        android:id="@+id/textView" />
    </FrameLayout>
</LinearLayout>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="120dp"
    app:cardBackgroundColor="@color/textViewBackground"
    card_view:cardUseCompatPadding="true"
    android:layout_centerHorizontal="true"
    card_view:cardElevation="15sp"
    android:layout_marginTop="153dp" />

【问题讨论】：

您尝试过吗？如果是，则发布xml代码
请检查我的代码
嘿兄弟，你在代码中给出了硬编码的边距
详细告诉我您希望它如何实现，我会相应地向您发送代码。我在您编辑之前发布了该代码
实际上我的代码运行良好，但在我的代码中我在cardview中添加了android:layout_marginTop="153dp"...所以当我检查不同的手机时它会产生差异边距...所以有什么办法可以避免这个问题

标签： android xml android-layout android-relativelayout android-framelayout

【解决方案1】：

试试这个：

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@android:color/white"
    android:layout_alignParentTop="true"/>

<TextView
    android:layout_width="250dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:layout_centerHorizontal="true"
    android:background="@color/colorAccent"/>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginTop="100dp"
    card_view:cardCornerRadius="8dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    card_view:cardBackgroundColor="@color/colorPrimary">


</android.support.v7.widget.CardView>
</RelativeLayout>

如果您不想硬编码参数，请参考此链接以在运行时获取设备宽度高度

Get screen dimensions in pixels

然后您可以使用 LayoutParams 动态设置边距。

【讨论】：

其实我不想硬编码参数(android:layout_height="200dp")
好的，所以我有疑问，是否需要创建多个屏幕尺寸的 xml？
@DhruvTyagi 你可以做的是你可以使用两个视图，其中一个将是 match_parent 的宽度和 android:layout_centerVertical="true" 所以这会将你的高度分成两部分然后分成上半部分用同样的方法将上半部分进一步分成两部分。然后你可以让你的 imageview 到 alignParentTop 和你的视图之上，所以你需要对值进行硬编码
@DhruvTyagi 是的，您必须创建多个 xml 文件，如果您希望我将带有视图的 xml 发送给您，那么告诉我我会的。
让我们continue this discussion in chat。

【解决方案2】：

您好，检查一下，我已经编辑了您的代码

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="170dp"
                android:layout_gravity="center"
                android:background="@color/colorPrimary"
                android:id="@+id/picture">
            </ImageView>

            <TextView
                android:text="TEXT VIEW"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="149dp"
                android:layout_marginStart="149dp"
                android:background="@color/colorBlueColor"
                android:layout_marginTop="24dp"
                android:id="@+id/textView" />
        </FrameLayout>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            app:cardBackgroundColor="@color/textViewBackground"
            card_view:cardUseCompatPadding="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="100dp"
            card_view:cardElevation="15sp"
            android:layout_marginTop="100dp" />

    </RelativeLayout>



</LinearLayout>

【讨论】：

【解决方案3】：

试试这个方法就行了

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:arc="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <ImageView
        android:id="@+id/imageView1s"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/done" />

    <android.support.v7.widget.CardView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="-65dp"
        android:layout_below="@+id/imageView1s"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/app_name"
        android:scaleType="center"
      />

</RelativeLayout>

【讨论】：