閱讀401 返回首頁    go 阿裏雲 go 技術社區[雲棲]


Android開發之ListView頁眉頁腳效果VS android背景漸變

大家都知道,在我們調用ListView的addFooterView()方法給List增加一個頁腳時,如果列表內容很多,超過了屏幕大小,那麼頁腳就看不到了,可我們一般想要的效果是如下圖所示的,在ListView的內容超過屏幕時,頁腳還在屏幕的底部。 
本文將介紹上圖所示的ListView效果,同時介紹一下在android中如何實現漸變效果,就像上圖中的頁眉頁腳的背景色一樣。

實現上麵的效果主要使用幾個RelativeLayout標簽和ListView組合即可
轉自 https://www.ideasandroid.com/archives/316


本文將介紹上圖所示的ListView效果,同時介紹一下在android中如何實現漸變效果,就像上圖中的頁眉頁腳的背景色一樣。

實現上麵的效果主要使用幾個RelativeLayout標簽和ListView組合即可,代碼如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<RelativeLayout android:
		android:background="@drawable/jbshape" android:layout_alignParentTop="true"
		android:gravity="center_horizontal" android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<TextView android:text="IdeasAndroid 列表演示" android:textColor="#000000"
			android:textSize="18dip" android:layout_width="wrap_content"
			android:layout_height="wrap_content"></TextView>
	</RelativeLayout>
	<RelativeLayout android:
		android:background="@drawable/jbshape" android:gravity="center_horizontal"
		android:layout_alignParentBottom="true" android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<Button android: android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="上一頁"
			android:layout_alignParentLeft="true"></Button>
		<Button android:layout_width="wrap_content"
			android:layout_gravity="right" android:layout_height="wrap_content"
			android:text="下一頁" android:layout_toRightOf="@id/prePage"></Button>
	</RelativeLayout>
	<ListView android: android:layout_width="fill_parent"
		android:layout_height="fill_parent" android:layout_below="@id/listHeader"
		android:layout_above="@id/listFooter">
	</ListView>
</RelativeLayout>

幾個關鍵點:
1、在頁眉(id為listHeader)使用屬性android:layout_alignParentTop=”true”
聲明頁眉部分與父視圖的頂部對齊。
2、在頁腳(id為listFooter)使用屬性android:layout_alignParentBottom=”true” 聲明其與父視圖的底部對齊。
3、在 ListView中使用屬性android:layout_below=”@id/listHeader” android:layout_above=”@id/listFooter” 聲明ListView位於listHeader的下方,位於listFooter的上方。

這樣我們的頁眉頁腳效果就實現了。

再來看看是怎麼實現漸變的?

我們在res/drawable目錄下新建一個叫jbshape.xml的文件,內容如下所示:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:andro
	android:shape="rectangle">
	<gradient android:startColor="#509245" android:centerColor="#3e8532"
		android:endColor="#509245" android:type="linear" android:angle="90"
		android:centerX="0.5" android:centerY="0.5" />
	<padding android:left="7dp" android:top="7dp" android:right="7dp"
		android:bottom="7dp" />
	<corners android:radius="4dp" />
</shape>

這裏就不多講了,相信你一看就能看懂,android:shape 配置的是圖形的形式,主要包括方形、圓形等,本例中為方形。gradient節點主要配置起點顏色、終點顏色、中間點的坐標、中間點的顏色、漸變角度(90度為上下漸變,0為左右漸變),padding節點主要配置上下左右邊距,corners節點配置四周園角的半徑。更詳細的配置參見https://www.ideasandroid.com/android/sdk/docs/guide/topics/resources/drawable-resource.html 。

使用漸變就更簡單了,如第一部分代碼中所示的,直接用android:background=”@drawable/jbshape” 配置背景為剛才配置的漸變圖形即可。

好了,本文就介紹到這。如果還有不明白的地方請下載下麵的代碼,然後在本地測試一下就明白了。

代碼下載:https://www.ideasandroid.com/android/demo/HeaderBottomListDemo.rar

最後更新:2017-04-02 16:47:37

  上一篇:go [Android]將應用崩潰信息匯報給開發者並重新啟動應用
  下一篇:go [Android]代碼實現ColorStateList及StateListDrawable