zoukankan      html  css  js  c++  java
  • listview的条目(item)如何做出卡片效果

    卡片,其实就是一张背景图片,但做也还需要注意一点。

    错误做法:

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:orientation="vertical" >
     6 
     7     <LinearLayout
     8         android:layout_width="wrap_content"
     9         android:layout_height="wrap_content"
    10         android:orientation="vertical"
    11         android:background="@drawable/selector_list_item_bg"
    12         android:padding="5dp"
    13         >
    14 
    15     </LinearLayout>
    16 
    17 </LinearLayout>

    只需要轻轻的把padding改成margin即可。因为卡片其实就是用里面的线性布局跟外面的线性布局之间生成一定的间距才形成。

    正确做法:

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:orientation="vertical" >
     6 
     7     <LinearLayout
     8         android:layout_width="wrap_content"
     9         android:layout_height="wrap_content"
    10         android:layout_margin="5dp"
    11         android:background="@drawable/selector_list_item_bg"
    12         android:orientation="vertical" >
    13     </LinearLayout>
    14 
    15 </LinearLayout>

    完整布局文件:

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:orientation="vertical" 
     6     >
     7 
     8     <LinearLayout
     9         android:layout_width="wrap_content"
    10         android:layout_height="wrap_content"
    11         android:layout_marginLeft="5dp"
    12         android:layout_marginRight="5dp"
    13         android:background="@drawable/selector_list_item_bg"
    14         android:orientation="vertical" >
    15 
    16         <RelativeLayout
    17             android:layout_width="match_parent"
    18             android:layout_height="wrap_content"
    19             android:padding="10dp" >
    20 
    21             <ImageView
    22                 android:id="@+id/iv_icon"
    23                 android:layout_width="45dp"
    24                 android:layout_height="45dp"
    25                 android:layout_centerVertical="true"
    26                 android:layout_marginRight="10dp"
    27                 android:src="@drawable/ic_default" />
    28 
    29             <TextView
    30                 android:id="@+id/tv_name"
    31                 android:layout_width="wrap_content"
    32                 android:layout_height="wrap_content"
    33                 android:layout_toRightOf="@+id/iv_icon"
    34                 android:text="应用名称"
    35                 android:textColor="#000"
    36                 android:textSize="18sp" />
    37 
    38             <RatingBar
    39                 android:id="@+id/rb_bar"
    40                 android:layout_width="wrap_content"
    41                 android:layout_height="15dp"
    42                 android:layout_below="@+id/tv_name"
    43                 android:isIndicator="true"
    44                 android:layout_marginTop="5dp"
    45                 android:layout_toRightOf="@+id/iv_icon"
    46                 android:progressDrawable="@drawable/custom_ratingbar"
    47                 android:rating="2" />
    48 
    49             <TextView
    50                 android:id="@+id/tv_size"
    51                 android:layout_width="wrap_content"
    52                 android:layout_height="wrap_content"
    53                 android:layout_below="@+id/rb_bar"
    54                 android:layout_toRightOf="@+id/iv_icon"
    55                 android:text="3.7MB"
    56                 android:textColor="#5000"
    57                 android:textSize="16sp" />
    58 
    59             <LinearLayout
    60                 android:layout_width="wrap_content"
    61                 android:layout_height="wrap_content"
    62                 android:layout_alignParentRight="true"
    63                 android:layout_centerVertical="true"
    64                 android:gravity="center"
    65                 android:orientation="vertical" >
    66 
    67                 <ImageView
    68                     android:id="@+id/iv_download"
    69                     android:layout_width="wrap_content"
    70                     android:layout_height="wrap_content"
    71                     android:src="@drawable/ic_download" />
    72 
    73                 <TextView
    74                     android:id="@+id/tv_download"
    75                     android:layout_width="wrap_content"
    76                     android:layout_height="wrap_content"
    77                     android:text="下载"
    78                     android:textColor="#000"
    79                     android:textSize="18sp" />
    80             </LinearLayout>
    81         </RelativeLayout>
    82 
    83         <View
    84             android:layout_width="match_parent"
    85             android:layout_height="0.2dp"
    86             android:background="#2000" />
    87 
    88         <TextView
    89             android:id="@+id/tv_des"
    90             android:layout_width="wrap_content"
    91             android:layout_height="wrap_content"
    92             android:padding="5dp"
    93             android:singleLine="true"
    94             android:text="巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉"
    95             android:textColor="#5000" />
    96     </LinearLayout>
    97 
    98 </LinearLayout>
  • 相关阅读:
    elk.postman_collection.json
    win10 env
    run fink local
    run kafka local
    打码util
    DataFormatVerifyUtil
    springboot logging.config=classpath:log4j2.xml -Dlogging.config=config/log4j2.xml
    server.port server.servlet.context-path resources freemarker mybatis mail
    maven-war-plugin
    html头部有一行信息导致所有的css和jss都是 https了
  • 原文地址:https://www.cnblogs.com/johnsonwei/p/5662111.html
Copyright © 2011-2022 走看看