Q

添加一條水平線和一些帶有底部文字的圖標，如Facebook

2017-04-03 32 views -2 likes

-2

我想添加一個頁腳到卡片視圖。添加一條水平線和一些帶有底部文字的圖標，如Facebook

在RecyclerView我目前的XML佈局是這樣的：

（此XML代碼的行爲，如RecyclerView行）

代碼：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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:orientation="vertical"> 

    <android.support.v7.widget.CardView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom" 

     android:layout_margin="@dimen/activity_margin_half" 
     app:cardBackgroundColor="@color/placeholder_grey" 
     app:cardCornerRadius="6dp" 
     app:cardPreventCornerOverlap="false"> 

     <ProgressBar 
      android:id="@+id/movie_progress" 
      style="@style/Widget.AppCompat.ProgressBar" 
      android:layout_width="@dimen/activity_margin" 
      android:layout_height="@dimen/activity_margin" 
      android:layout_gravity="center" 
      android:theme="@style/CircularProgress"/> 

     <ImageView 
      android:id="@+id/movie_poster" 
      android:layout_width="@dimen/poster_thumb_width" 
      android:layout_height="@dimen/poster_thumb_height"/> 



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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="bottom" 
     android:layout_marginTop="@dimen/activity_margin" 
     android:background="@drawable/bg_round_rect" 
     android:orientation="vertical" 
     android:paddingBottom="@dimen/activity_margin" 
     android:paddingEnd="@dimen/activity_margin" 
     android:paddingLeft="@dimen/poster_thumb_width" 
     android:paddingRight="@dimen/activity_margin" 
     android:paddingStart="@dimen/poster_thumb_width" 
     android:paddingTop="@dimen/activity_margin_half"> 

     <TextView 
      android:id="@+id/movie_year" 
      style="@style/TextAppearance.AppCompat.Caption" 

      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="@dimen/activity_margin_content" 
      android:layout_marginStart="@dimen/activity_margin_content" 

      android:alpha="0.38" 
      android:gravity="start" 
      android:maxLines="1" 
      android:textStyle="bold" 
      android:textColor="#f14e4e" 
      tools:text="2009 | EN"/> 

     <TextView 
      android:id="@+id/movie_title" 
      style="@style/TextAppearance.AppCompat.Subhead" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="@dimen/activity_margin_content" 
      android:layout_marginStart="@dimen/activity_margin_content" 
      android:layout_marginTop="@dimen/activity_margin_quarter" 
      android:textColor="#9b92b3" 
      android:maxLines="1" 
      tools:text="Movie Title"/> 

     <TextView 
      android:id="@+id/movie_desc" 
      style="@style/TextAppearance.AppCompat.Caption" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="@dimen/activity_margin_content" 
      android:layout_marginStart="@dimen/activity_margin_content" 
      android:layout_marginTop="@dimen/activity_margin_half" 
      android:ellipsize="end" 
      android:maxLines="2" 
      android:textColor="#9b92b3" 
      tools:text="Nowadays, user engagement is considered one of the most important metrics for the success of your app"/> 

    </LinearLayout> 

</FrameLayout>

現在我想添加更多的東西這個碼。

我想添加一條水平線。（我想我必須查看）和一些圖標與文字像這樣的畫面：

我該怎麼辦呢？

2017-04-03 elma

+0

見我的回答如下。我爲您的預期設計添加了兩個xmls。希望這會解決你的問題。 – FAT

A

回答

1

我爲兩個不同的CardView設計了兩個XML。請參閱附件中的輸出圖像。希望這將幫助你〜

Facebook like CardView與Image，Title和Some Text：

<?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:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/card" 
    android:clickable="true" 
    android:foreground="?android:attr/selectableItemBackground" 
    card_view:cardCornerRadius="4dp" 
    card_view:cardElevation="2dp" 
    card_view:cardUseCompatPadding="false" > 

    <!-- Content --> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:minHeight="88dp"> 

     <!-- Thumbnail :: Image--> 
     <ImageView 
      android:id="@+id/image_thumbnail" 
      android:layout_width="100dp" 
      android:layout_height="110dp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentTop="true" 
      android:layout_marginTop="8dp" 
      android:layout_marginBottom="8dp" 
      android:layout_marginLeft="8dp" 
      android:scaleType="centerCrop" 
      android:src="@mipmap/ic_launcher"/> 

     <!-- Two-Line TextView --> 
     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/image_thumbnail" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp"> 


      <TextView 
       android:id="@+id/text_title" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:layout_marginTop="16dp" 
       android:layout_marginRight="8dp" 
       android:maxLines="2" 
       android:ellipsize="end" 
       android:fontFamily="sans-serif" 
       android:textSize="16sp" 
       android:textStyle="bold" 
       android:textColor="#000000" 
       android:text="This is a title"/> 

      <TextView 
       android:id="@+id/text_subtitle" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:layout_below="@id/text_title" 
       android:layout_marginTop="4dp" 
       android:maxLines="2" 
       android:ellipsize="end" 
       android:fontFamily="sans-serif" 
       android:textSize="14sp" 
       android:textColor="#000000" 
       android:text="Here is Some text" /> 


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

OUTPUT：

Facebook like CardView與Image，Title，Some Text和Like，Comment，Share操作：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/card" 
    android:clickable="true" 
    android:foreground="?android:attr/selectableItemBackground" 
    card_view:cardCornerRadius="4dp" 
    card_view:cardElevation="2dp" 
    card_view:cardUseCompatPadding="false" > 

    <!-- Content --> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:minHeight="88dp"> 

     <!-- Thumbnail :: Image--> 
     <ImageView 
      android:id="@+id/image_thumbnail" 
      android:layout_width="100dp" 
      android:layout_height="110dp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentTop="true" 
      android:layout_marginTop="8dp" 
      android:layout_marginBottom="8dp" 
      android:layout_marginLeft="8dp" 
      android:scaleType="centerCrop" 
      android:src="@mipmap/ic_launcher"/> 

     <!-- Two-Line TextView --> 
     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/image_thumbnail" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp"> 


      <TextView 
       android:id="@+id/text_title" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:layout_marginTop="16dp" 
       android:layout_marginRight="8dp" 
       android:maxLines="2" 
       android:ellipsize="end" 
       android:fontFamily="sans-serif" 
       android:textSize="16sp" 
       android:textStyle="bold" 
       android:textColor="#000000" 
       android:text="This is a title"/> 

      <TextView 
       android:id="@+id/text_subtitle" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:layout_below="@id/text_title" 
       android:layout_marginTop="4dp" 
       android:maxLines="2" 
       android:ellipsize="end" 
       android:fontFamily="sans-serif" 
       android:textSize="14sp" 
       android:textColor="#727272" 
       android:text="Here is Some text" /> 


     </RelativeLayout> 

     <!-- Bottom line with actions --> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:layout_below="@id/image_thumbnail"> 

      <!-- Horizontal line --> 
      <View 
       android:layout_width="match_parent" 
       android:layout_height="2dp" 
       android:background="#ababab"> 

      </View> 

      <!-- Like + Comment + Share --> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="40dp" 
       android:orientation="horizontal" 
       android:weightSum="4"> 

       <!-- Like --> 
       <LinearLayout 
        android:id="@+id/layout_like" 
        android:layout_width="0dp" 
        android:layout_height="match_parent" 
        android:layout_weight="1.2" 
        android:orientation="horizontal" 
        android:paddingLeft="8dp" 
        android:paddingRight="8dp" 
        android:gravity="center_vertical"> 

        <ImageView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:src="@drawable/ic_action_like"/> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_marginLeft="4dp" 
         android:maxLines="1" 
         android:ellipsize="end" 
         android:fontFamily="sans-serif" 
         android:textSize="16sp" 
         android:textColor="#727272" 
         android:text="Like" 
         android:textStyle="bold"/> 

       </LinearLayout> 

       <!-- Comment --> 
       <LinearLayout 
        android:id="@+id/layout_comment" 
        android:layout_width="0dp" 
        android:layout_height="match_parent" 
        android:layout_weight="1.6" 
        android:orientation="horizontal" 
        android:paddingLeft="8dp" 
        android:paddingRight="8dp" 
        android:gravity="center_vertical"> 

        <ImageView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:src="@drawable/ic_action_comment"/> 

        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginLeft="4dp" 
         android:maxLines="1" 
         android:ellipsize="end" 
         android:fontFamily="sans-serif" 
         android:textSize="16sp" 
         android:textColor="#727272" 
         android:text="Comment" 
         android:textStyle="bold"/> 

       </LinearLayout> 

       <!-- Share --> 
       <LinearLayout 
        android:id="@+id/layout_share" 
        android:layout_width="0dp" 
        android:layout_height="match_parent" 
        android:layout_weight="1.2" 
        android:orientation="horizontal" 
        android:paddingLeft="8dp" 
        android:paddingRight="16dp" 
        android:gravity="center_vertical|right"> 

        <ImageView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:src="@drawable/ic_action_share"/> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_vertical" 
         android:layout_marginLeft="4dp" 
         android:maxLines="1" 
         android:ellipsize="end" 
         android:fontFamily="sans-serif" 
         android:textSize="16sp" 
         android:textColor="#727272" 
         android:text="Share" 
         android:textStyle="bold"/> 

       </LinearLayout> 

      </LinearLayout> 

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

OUTPUT：

2017-04-03 14:03:24 FAT

+0

Thanks.you幫助我很多。我是android的noob。我搜索了幾天，在網上找到一個例子，但我不能。對於網頁設計，你可以找到很多例子。 – elma

0

添加視圖像這樣的cardView下面

<View 
     android:layout_width="match_parent" 
     android:layout_height="1dp" 
     android:background="@color/black"/>

再使用的LinearLayout/RelativeLayout的下方，以保持圖標和文字

2017-04-03 07:39:31 ben10

0

請試試這個....希望可以幫到

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

      <FrameLayout 
       android:layout_width="80dp" 
       android:layout_height="80dp"> 

       <ImageView 
        android:id="@+id/image" 
        android:layout_width="match_parent" 
        android:src="@drawable/ic_launcher" 
        android:layout_height="match_parent" /> 

      </FrameLayout> 

      <android.support.v4.widget.Space 
       android:layout_width="24dp" 
       android:layout_height="match_parent" /> 

      <LinearLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:orientation="vertical" 
       android:layout_height="match_parent"> 

       <TextView 
        android:id="@+id/title" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        tools:text="Title"/> 

       <Space 
        android:layout_width="match_parent" 
        android:layout_height="8dp" /> 

       <TextView 
        android:id="@+id/some_text" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        tools:text="some text"/> 

      </LinearLayout> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

      <FrameLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:padding="4dp" 
       android:layout_height="wrap_content"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:gravity="center" 
        android:drawableLeft="@drawable/ic_launcher" 
        android:text="Like" 
        /> 

      </FrameLayout> 

      <View 
       android:layout_width="1dp" 
       android:layout_height="match_parent" 
       android:layout_marginTop="8dp" 
       android:layout_marginBottom="8dp" 
       android:background="@android:color/black"/> 

      <FrameLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:padding="4dp" 
       android:layout_height="wrap_content"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:gravity="center" 
        android:drawableLeft="@drawable/ic_launcher" 
        android:text="Like" 
        /> 

      </FrameLayout> 

      <View 
       android:layout_width="1dp" 
       android:layout_height="match_parent" 
       android:layout_marginTop="8dp" 
       android:layout_marginBottom="8dp" 
       android:background="@android:color/black"/> 

      <FrameLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:padding="4dp" 
       android:layout_height="wrap_content"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:gravity="center" 
        android:drawableLeft="@drawable/ic_launcher" 
        android:text="Like" 
        /> 

      </FrameLayout> 

     </LinearLayout> 

    </LinearLayout> 

</LinearLayout>

2017-04-03 07:55:36

相關問題