Question

我试图在我的Android应用程序中实现以下复杂布局，但没有运气 enter image description here

为此我写了以下布局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 给出的解决方案，我得到了以下布局，这很好，但仍然有帖子图像的问题，因为它必须缩小到类似于截图上显示的红色框 enter image description here

另外，我认为布局填充，边距不如材料设计标准

您能否帮助我了解如何实现类似于附图中的布局？

谢谢

Answer 1

查看这张cardview

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

xml layout：

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

Answer 2

我没有使用卡片视图，但我认为你可以在卡片视图中粘贴RelativeLayout，并且以下XML布局应该可以工作。

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

<ImageView
    android:layout_width="90dp"
    android:layout_height="72.0dp"
    android:id="@+id/imageView2"
    android:src="@drawable/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:src="@drawable/ic_launcher"
    android:id="@+id/imageButton2"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/imageView2" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView3"
    android:layout_alignBottom="@+id/imageButton2"
    android:layout_toRightOf="@+id/imageButton2"
    android:layout_toEndOf="@+id/imageButton2" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Thing1"
    android:ellipsize="end"
    android:maxLines="3"
    android:minLines="1"
    android:textIsSelectable="false"
    android:textSize="@dimen/abc_text_size_subhead_material"
    android:paddingTop="4dp"
    android:layout_below="@+id/imageButton2"
    android:layout_toRightOf="@+id/imageView2"
    android:layout_toEndOf="@+id/imageView2"
    android:id="@+id/" />

<ImageButton
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:id="@+id/imageButton3"
    android:src="@drawable/ic_launcher"
    android:layout_alignBottom="@+id/imageView2"
    android:layout_toRightOf="@+id/imageView2"
    android:layout_toEndOf="@+id/imageView2" />

<ImageButton
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:id="@+id/imageButton4"
    android:src="@drawable/ic_launcher"
    android:layout_alignBottom="@+id/imageButton3"
    android:layout_alignLeft="@+id/textView3"
    android:layout_alignStart="@+id/textView3" />

<ImageButton
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:id="@+id/imageButton5"
    android:src="@drawable/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView6"
    android:layout_alignBottom="@+id/imageButton5"
    android:layout_toLeftOf="@+id/imageButton5"
    android:layout_toStartOf="@+id/imageButton5" />
</RelativeLayout >

enter image description here

Android ui具有复杂的布局

2 个答案: