布局复杂的Android ui

Question

我正在尝试在我的 android 应用程序中实现以下复杂布局，但没有成功

为此，我编写了以下布局 xml:

 <?xml version="1.0" encoding="utf-8"?>
 <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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="6dp"
    card_view:cardCornerRadius="2dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="8dip"
        android:layout_toRightOf="@+id/list_item_title">

            <ImageView
                android:layout_weight="0.6"
                android:id="@+id/list_item_image"
                android:layout_width="90dp"
                android:layout_height="72.0dip"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop" />

        <LinearLayout
            android:layout_weight="0.6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:id="@+id/linearLayout">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="8dp"
                android:paddingLeft="8dp"
                android:layout_alignParentTop="true"
                android:layout_above="@+id/list_item_title" >
                <ImageView
                    android:id="@+id/feedIcon"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:src="@drawable/cnn"
                    android:layout_alignParentLeft="true"
                    android:layout_centerHorizontal="true" />
                <TextView
                    android:id="@+id/feedName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/feedIcon"
                    android:text="CNN International"
                    android:layout_centerHorizontal="true"
                    android:textSize="@dimen/abc_text_size_caption_material"
                    android:paddingLeft="4dp" />
                <ImageButton
                    android:id="@+id/btnOverFlow"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_more_grey"
                    android:layout_alignParentRight="true"
                    android:paddingRight="4dp"
                    android:paddingLeft="8dp" />
                <ImageView
                    android:id="@+id/timeIcon"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:src="@drawable/time"
                    android:layout_toLeftOf="@+id/timeStamp"
                    android:paddingLeft="4dp" />
                <TextView
                    android:id="@+id/timeStamp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toLeftOf="@+id/btnOverFlow"
                    android:text="Yesterday"
                    android:layout_centerHorizontal="true"
                    android:textSize="@dimen/abc_text_size_caption_material"
                    android:paddingLeft="4dp" />
            </RelativeLayout>
            <TextView
                android:id="@+id/list_item_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="8.0dip"
                android:text="Why women's watches are having a moment"
                android:ellipsize="end"
                android:maxLines="3"
                android:minLines="1"
                android:textIsSelectable="false"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:paddingTop="4dp" />
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:layout_below="@+id/list_item_title">
                <ImageButton
                    android:id="@+id/btnComments"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:padding="6dp"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_comment_outline_grey"
                    />
                <ImageButton
                    android:id="@+id/btnLike"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:padding="6dp"
                    android:layout_toRightOf="@+id/btnComments"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_heart_outline_grey"
                    android:layout_centerHorizontal="true" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView >

包含feed source icon、feed source name、timestamp 和ovweflow icon 的最顶层相对布局根本没有出现在 xml 编辑器设计模式中，也没有出现在我的应用程序运行时。 而且，我感觉我的代码不是临时写的。

更新: - 我遵循了 r7v 给出的解决方案，我得到了以下布局，它很好，但帖子图像仍然有问题，因为它必须缩小到类似于屏幕截图中显示的红色框

此外，我认为布局填充、边距不符合 Material 设计标准

你能帮我看看如何实现与附图类似的布局吗？

谢谢

Answer 1

查看卡片 View

 -- linearlayout (horizontal) 
         --- imageview (height match parent , weight 0.4 )
         ---- Linear layout (weight 0.6 , orientation vertical)
              ------ <relative layout>
              ------- textview
              ------- relative layout

xml布局:

<?xml version="1.0" encoding="utf-8"?><!-- item_feed.xml --> <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:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        card_view:cardCornerRadius="2dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_height="match_parent">

            <ImageView
                android:layout_weight="0.4"
                android:id="@+id/list_item_image"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop" />

            <LinearLayout
                android:layout_weight="0.6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/linearLayout">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:layout_alignParentTop="true"
                    android:layout_above="@+id/list_item_title" >
                    <ImageView
                        android:id="@+id/feedIcon"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <TextView
                        android:id="@+id/feedName"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/feedIcon"
                        android:text="CNN International"
                        android:layout_centerHorizontal="true" />
                    <ImageButton
                        android:id="@+id/btnOverFlow"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <ImageView
                        android:id="@+id/timeIcon"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <TextView
                        android:id="@+id/timeStamp"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/feedIcon"
                        android:text="Yesterday"
                        android:layout_centerHorizontal="true" />
                </RelativeLayout>
                <TextView
                    android:id="@+id/list_item_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginLeft="8.0dip"
                    android:text="Why women's watches are having a moment"
                    android:ellipsize="end"
                    android:maxLines="3"
                    android:minLines="2"
                    android:textIsSelectable="false"/>
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:layout_below="@+id/list_item_title">
                    <ImageButton
                        android:id="@+id/btnComments"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <ImageButton
                        android:id="@+id/btnLike"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/btnComments"
                        android:src="@drawable/ic_search_grey"
                        android:layout_centerHorizontal="true" />
                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>

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