listview的条目(item)如何做出卡片效果

时间:2023-03-09 19:57:26
listview的条目(item)如何做出卡片效果

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

错误做法:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@drawable/selector_list_item_bg"
android:padding="5dp"
> </LinearLayout> </LinearLayout>

listview的条目(item)如何做出卡片效果

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

正确做法:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/selector_list_item_bg"
android:orientation="vertical" >
</LinearLayout> </LinearLayout>

listview的条目(item)如何做出卡片效果

完整布局文件:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@drawable/selector_list_item_bg"
android:orientation="vertical" > <RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp" > <ImageView
android:id="@+id/iv_icon"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="@drawable/ic_default" /> <TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/iv_icon"
android:text="应用名称"
android:textColor="#000"
android:textSize="18sp" /> <RatingBar
android:id="@+id/rb_bar"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_below="@+id/tv_name"
android:isIndicator="true"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/iv_icon"
android:progressDrawable="@drawable/custom_ratingbar"
android:rating="2" /> <TextView
android:id="@+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/rb_bar"
android:layout_toRightOf="@+id/iv_icon"
android:text="3.7MB"
android:textColor="#5000"
android:textSize="16sp" /> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="vertical" > <ImageView
android:id="@+id/iv_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_download" /> <TextView
android:id="@+id/tv_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下载"
android:textColor="#000"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout> <View
android:layout_width="match_parent"
android:layout_height="0.2dp"
android:background="#2000" /> <TextView
android:id="@+id/tv_des"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:singleLine="true"
android:text="巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉巴拉巴拉拉"
android:textColor="#5000" />
</LinearLayout> </LinearLayout>