Android ListView实现某些item被盖上一层蒙版的效果

       最近做项目,产品和UI出的一个效果图是这样的:有一个产品列表,可以购买的正常显示,已售罄的产品item被灰掉(即:看起来像是被盖上一层半透明的蒙版)。
其实要实现这个效果,想一想也不难。
基本思路:
1、ListView的每个item是一个单独的布局,给这个布局设置前景色来实现。
一般都是用LinearLayout、RelativeLayout实现,那么这两种布局有设置背景色(background)的属性,那有没有设置前景色(foreground)的属性呢?最终发现,这两种布局没有设置前景色的属性。
2、item的原始布局设置前景色走不通,就需要在原始布局上加一层新布局,且此新布局的width、height需和原始布局的width、height一致。此时,大家都会想到FrameLayout,对,没错,就是它,并且发现FrameLayout是有设置前景色(foreground)属性的。
到此,这个问题就可以实现了。

这里贴上item最终的布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@+id/fl_item"
             xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:foreground="@color/transparent">

	<LinearLayout android:id="@+id/head_contentLayout"
	              xmlns:android="http://schemas.android.com/apk/res/android"
	              android:layout_width="fill_parent"
	              android:layout_height="wrap_content"
	              android:gravity="center_horizontal"
	              android:orientation="vertical">

		<View
			android:layout_width="fill_parent"
			android:layout_height="1px"
			android:layout_marginTop="@dimen/dp_10"
			android:background="@drawable/separation_line"/>

		<LinearLayout
			android:layout_width="match_parent"
			android:layout_height="40dp"
			android:background="@color/white"
			android:gravity="center_vertical"
			android:orientation="horizontal">

			<TextView
				android:id="@+id/tv_type"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginLeft="10dp"
				android:background="@drawable/img_invest_paper"
				android:gravity="center"
				android:paddingBottom="2dp"
				android:paddingLeft="3dp"
				android:paddingRight="3dp"
				android:paddingTop="2dp"
				android:text="@string/txt_invest_paper"
				android:textColor="@color/white"
				android:textSize="@dimen/sp_13"
				android:visibility="gone"/>

			<TextView
				android:id="@+id/tv_title"
				android:layout_width="1dp"
				android:layout_height="wrap_content"
				android:layout_marginLeft="6dp"
				android:layout_marginRight="5dp"
				android:layout_weight="1"
				android:ellipsize="end"
				android:singleLine="true"
				android:textColor="@color/text_514647"
				android:textSize="@dimen/sp_15"/>

			<TextView
				android:id="@+id/tv_hint"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_marginRight="@dimen/dp_15"
				android:text="@string/txt_fund_hint"
				android:textColor="@color/gray_9"
				android:textSize="@dimen/sp_14"
				android:visibility="gone"/>

			<ImageView
				android:id="@+id/iv_icon"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:adjustViewBounds="true"
				android:src="@drawable/img_label_dcard"
				android:visibility="gone"/>
		</LinearLayout>

		<View
			android:layout_width="fill_parent"
			android:layout_height="1px"
			android:background="@drawable/separation_line"/>

		<LinearLayout
			android:id="@+id/ll_item"
			android:layout_width="match_parent"
			android:layout_height="110dp"
			android:background="@color/white"
			android:orientation="horizontal"
			android:padding="@dimen/dp_10">

			<LinearLayout
				android:layout_width="1dp"
				android:layout_height="63dp"
				android:layout_weight="1.1"
				android:gravity="bottom"
				android:orientation="vertical">

				<TextView
					android:id="@+id/tv_profit"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:textColor="@color/color_txt_red1"
					android:textSize="24sp"/>

				<TextView
					android:id="@+id/tv_profit_tips"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:text="@string/txt_prd_profit_rate"
					android:textColor="@color/gray_9"
					android:textSize="@dimen/sp_12"/>
			</LinearLayout>

			<LinearLayout
				android:layout_width="1dp"
				android:layout_height="63dp"
				android:layout_weight="1.3"
				android:gravity="bottom"
				android:orientation="vertical">

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

					<TextView
						android:id="@+id/tv_limit"
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:textColor="@color/color_txt_red1"
						android:textSize="@dimen/sp_18"/>

					<TextView
						android:id="@+id/tv_transfer"
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:layout_margin="4dp"
						android:background="@drawable/bg_trans"
						android:gravity="center"
						android:text="可变现"
						android:textColor="@color/default_text_color"
						android:textSize="@dimen/sp_14"
						android:visibility="gone"/>
				</LinearLayout>

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:layout_marginTop="3dp"
					android:text="@string/txt_prd_limit"
					android:textColor="@color/gray_9"
					android:textSize="@dimen/sp_12"/>
			</LinearLayout>

			<LinearLayout
				android:id="@+id/ll_presale"
				android:layout_width="1dp"
				android:layout_height="60dp"
				android:layout_weight="1.1"
				android:gravity="center_vertical|right"
				android:orientation="vertical"
				android:visibility="gone">

				<TextView
					android:id="@+id/tv_buy_time"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:singleLine="true"
					android:textColor="@color/text_eb4a19"
					android:textSize="@dimen/sp_14"
					android:visibility="gone"/>

				<LinearLayout
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:layout_marginTop="@dimen/dp_5"
					android:orientation="horizontal">

					<TextView
						android:id="@+id/tv_hour"
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:background="@drawable/shape_presale_bg"
						android:padding="2dp"
						android:text="15"
						android:textColor="@color/black6"
						android:textSize="@dimen/sp_12"/>

					<TextView
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:padding="2dp"
						android:text=":"
						android:textColor="@color/black6"
						android:textSize="@dimen/sp_12"/>

					<TextView
						android:id="@+id/tv_minutes"
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:background="@drawable/shape_presale_bg"
						android:padding="2dp"
						android:text="28"
						android:textColor="@color/black6"
						android:textSize="@dimen/sp_12"/>

					<TextView
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:padding="2dp"
						android:text=":"
						android:textColor="@color/black6"
						android:textSize="@dimen/sp_12"/>

					<TextView
						android:id="@+id/tv_seconds"
						android:layout_width="wrap_content"
						android:layout_height="wrap_content"
						android:background="@drawable/shape_presale_bg"
						android:padding="2dp"
						android:text="45"
						android:textColor="@color/black6"
						android:textSize="@dimen/sp_12"/>
				</LinearLayout>
			</LinearLayout>

			<LinearLayout
				android:id="@+id/ll_buy"
				android:layout_width="1dp"
				android:layout_height="75dp"
				android:layout_marginRight="@dimen/dp_5"
				android:layout_weight="1.1"
				android:gravity="center_vertical|right"
				android:orientation="vertical"
				android:visibility="visible">

				<Button
					android:id="@+id/btn_buy"
					android:layout_width="95dp"
					android:layout_height="30dp"
					android:background="@drawable/btn_buy_new"
					android:text="@string/txt_prd_buy_now"
					android:textColor="@color/white"
					android:textSize="@dimen/sp_15"/>

			</LinearLayout>
		</LinearLayout>

	</LinearLayout>
</FrameLayout>


猜你喜欢

转载自blog.csdn.net/weiren1101/article/details/52211269
今日推荐