我想爲列表製作卡片視圖。但我沒有得到正確的看法

Question

我想製作卡片視圖的列表。但我沒有得到正確的看法。

我想在左側顯示圖像。在圖像的右側，我想顯示酒店名稱，面積，評分，美食。

但是現在通過這段代碼，所有的東西都變得重疊了。

任何人都可以幫助我嗎？我正在上傳圖片我正在使用這段代碼。

查看圖片酒店名稱，面積，評分，菜系重疊。如何解決這個問題？ 這是屏幕截圖，我想通過卡片視圖

。

list_row.xml

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    > 
<!--<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/list_row_selector" 
    android:padding="8dp" >--> 

    <!-- Thumbnail Image --> 
    <android.support.v7.widget.CardView 
     android:id="@+id/ly_root" 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     xmlns:tools="http://schemas.android.com/tools" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#FEFEFE" 
     android:layout_margin="8dp" 
     app:cardCornerRadius="4dp"> 


    <!--<android.support.v7.widget.CardView 
     xmlns:card_view="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/card_view" 
     android:layout_gravity="center" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     card_view:cardCornerRadius="4dp">--> 
    <com.android.volley.toolbox.NetworkImageView 
     android:id="@+id/thumbnail" 
     android:layout_width="120dp" 
     android:layout_height="80dp" 
     android:scaleType="centerCrop" 
     android:layout_marginRight="8dp" /> 

    <!-- Restaurant name --> 
    <TextView 
     android:id="@+id/name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 

     android:layout_toRightOf="@+id/thumbnail" 
     android:textSize="@dimen/title" 
     android:textStyle="bold" /> 

    <TextView 
     android:id="@+id/area" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/name" 
     android:textColor="#D2691E" 
     android:layout_toRightOf="@+id/thumbnail" 
     android:textSize="@dimen/rating" /> 

    <!-- Rating --> 
    <TextView 
     android:id="@+id/average_ratings" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/area" 
     android:textColor="#D2691E" 
     android:layout_toRightOf="@+id/thumbnail" 

     android:textSize="@dimen/rating" /> 

    <TextView 
     android:id="@+id/cuisine" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/average_ratings" 
     android:textColor="#D2691E" 
     android:layout_toRightOf="@+id/thumbnail" 
     android:textSize="@dimen/rating" /> 

    <!-- Genre --> 
    <!-- <TextView 
     android:id="@+id/genre" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/rating" 
     android:layout_marginTop="5dp" 
     android:layout_toRightOf="@+id/thumbnail" 
     android:textColor="@color/genre" 
     android:textSize="@dimen/genre" />--> 
<!-- 
    &lt;!&ndash; Release Year &ndash;&gt; 
    <TextView 
     android:id="@+id/releaseYear" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:textColor="@color/year" 
     android:textSize="@dimen/year" />--> 
    </android.support.v7.widget.CardView> 
</LinearLayout> 

Answer 1

使用CardView RelativeLayout的

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/ly_root" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="8dp" 
    android:background="#FEFEFE" 
    app:cardCornerRadius="4dp"> 
    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"> 
     <com.android.volley.toolbox.NetworkImageView 
      android:id="@+id/thumbnail" 
      android:layout_width="120dp" 
      android:layout_height="80dp" 
      android:layout_marginRight="8dp" 
      android:scaleType="centerCrop" /> 

     <!-- Restaurant name --> 
     <TextView 
      android:id="@+id/name" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 

      android:layout_toRightOf="@+id/thumbnail" 
      android:textStyle="bold" /> 

     <TextView 
      android:id="@+id/area" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/name" 
      android:layout_toRightOf="@+id/thumbnail" 
      android:textColor="#D2691E"/> 

     <!-- Rating --> 
     <TextView 
      android:id="@+id/average_ratings" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/area" 
      android:layout_toRightOf="@+id/thumbnail" 
      android:textColor="#D2691E" /> 

     <TextView 
      android:id="@+id/cuisine" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@id/average_ratings" 
      android:layout_toRightOf="@+id/thumbnail" 
      android:textColor="#D2691E" /> 
    </RelativeLayout> 

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

Answer 2

的孩子一般你CardView應該只包含一個佈局 - 在RelativeLayout您以前使用過。 CardView本身無法按照您的要求定位項目。

如果你看看documentation，你會看到CardView擴展了FrameLayout，它應該只包含一個孩子，因此它不能控制CardView內的定位。

Answer 3

CardView就像一個FrameLayout。佈局中cardView中的連續項目將放置在前一個項目的頂部。

您可以將layout_gravity設置爲TextView的「右」。 這不是一個完美的方式來做到這一點。因此，我建議將TextView封裝在Linear =「vertical」的Linear Layout中，並將LinearLayout的layout_gravity設置爲正確。