<!-- end header -->
2011年08月12日
RelativeLayout 的使用實(shí)例 類(lèi)似自定義TabHost效果
<script type="text/javascript"><!-- google_ad_client = "pub-1116984446973318"; google_ad_slot = "3592517579"; google_ad_width = 728; google_ad_height = 90; //--> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>
TabHost如果要自定義顯示的效果,有點(diǎn)麻煩,而默認(rèn)的樣式有時(shí)候又與我們程序的風(fēng)格不匹配.今天我們就用RelativeLayout來(lái) 實(shí)現(xiàn)與TabHost相同的功能.上效果圖:
點(diǎn)擊上面的tab,tab自身樣式會(huì)改變,下面內(nèi)容也會(huì)改變,功能完全與TabHost相同.
介紹一下RelativeLayout,RelativeLayout是相對(duì)布局,顧名思義,就是說(shuō)里面的控件位置都是相對(duì)其他控件的位置而確定的.如上 面的效果,Tab相對(duì)于屏幕頂部對(duì)齊,底部按鈕相對(duì)于屏幕底部對(duì)齊.而內(nèi)容則放在頂部的Tab和底部的按鈕中間.
所以所有被其他控件依賴(lài)定位的控件,必須先寫(xiě),也就是說(shuō),要實(shí)現(xiàn)上面的效果,XML中不是從上往下寫(xiě),而是先定上和下,再寫(xiě)中間,因?yàn)橹虚g的內(nèi)容高度,位 置都依賴(lài)于它的上下控件.
實(shí)現(xiàn)TabHost效果的原理也簡(jiǎn)單,點(diǎn)擊tab時(shí)設(shè)置被點(diǎn)擊和沒(méi)被點(diǎn)擊的的tab的背景,字體顏色即可顯示點(diǎn)擊效果.在點(diǎn)擊事件中,用View的 removeAllViews()方法清除中間控件的所有內(nèi)容,再用addView方法添加需要的內(nèi)容.
下面上代碼,布局XML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<?xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:weightSum
=
"1"
android:background
=
"@color/white"
>
<LinearLayout
android:id
=
"@+id/topmenu"
android:orientation
=
"horizontal"
android:layout_alignParentTop
=
"true"
android:layout_width
=
"fill_parent"
android:layout_height
=
"40dip"
android:background
=
"@drawable/topback"
android:gravity
=
"bottom"
>
<!-- android:layout_alignParentTop 與父元素頂部是否對(duì)齊,這里true,就是把這個(gè)topmenu放屏幕頂部 -->
<LinearLayout
android:id
=
"@+id/task"
android:orientation
=
"horizontal"
android:layout_height
=
"35dip"
android:layout_width
=
"100dip"
android:background
=
"@drawable/textback"
>
<TextView
android:layout_width
=
"fill_parent"
android:id
=
"@+id/taskText"
android:layout_height
=
"fill_parent"
android:text
=
"計(jì)劃"
android:gravity
=
"center"
android:textSize
=
"20sp"
android:textColor
=
"@color/white"
/>
</LinearLayout
>
<LinearLayout
android:id
=
"@+id/accounts"
android:orientation
=
"horizontal"
android:layout_height
=
"35dip"
android:layout_width
=
"100dip"
>
<TextView
android:layout_width
=
"fill_parent"
android:id
=
"@+id/accountsText"
android:layout_height
=
"fill_parent"
android:text
=
"帳號(hào)"
android:gravity
=
"center"
android:textSize
=
"20sp"
android:textColor
=
"@color/green"
/>
</LinearLayout
>
<LinearLayout
android:id
=
"@+id/sended"
android:orientation
=
"horizontal"
android:layout_height
=
"35dip"
android:layout_width
=
"100dip"
>
<TextView
android:layout_width
=
"fill_parent"
android:id
=
"@+id/sendedText"
android:layout_height
=
"fill_parent"
android:text
=
"已發(fā)"
android:gravity
=
"center"
android:textSize
=
"20sp"
android:textColor
=
"@color/green"
/>
</LinearLayout
>
</LinearLayout
>
?
?
<Button
android:id
=
"@+id/button"
android:layout_alignParentBottom
=
"true"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:text
=
"底部按鈕"
/>
<!-- layout_alignParentBottom 與父元素底部是否對(duì)齊,這里true,就是把這個(gè)Button放屏幕底部 -->
?
<!-- RelativeLayout必須先寫(xiě)四周的控件,再寫(xiě)中間的,這里先寫(xiě)頂部的Tab和底部的Button,再寫(xiě)中間的Content,因?yàn)橹虚g的內(nèi)容位置是不固定的 -->
<LinearLayout
android:id
=
"@+id/content"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:layout_below
=
"@id/topmenu"
android:layout_above
=
"@id/button"
>
</LinearLayout
>
<!-- layout_below,當(dāng)前控件放在設(shè)定控件下方 .
android:layout_above 當(dāng)前控件放在設(shè)定控件上方
這里配合使用,就是放在頂部tab和底部Button的中間
-->
?
</RelativeLayout
>
|
程序代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
package
com.pocketdigi
;
?
import
android.app.Activity
;
import
android.os.Bundle
;
import
android.view.LayoutInflater
;
import
android.view.View
;
import
android.view.View.OnClickListener
;
import
android.widget.LinearLayout
;
import
android.widget.TextView
;
?
public
class
Main
extends
Activity
{
/** Called when the activity is first created. */
LinearLayout task, accounts, sended, content
;
TextView taskText, accountsText, sendedText
;
?
@Override
public
void
onCreate
(
Bundle savedInstanceState
)
{
super
.
onCreate
(
savedInstanceState
)
;
setContentView
(
R.
layout
.
main
)
;
task
=
(
LinearLayout
)
findViewById
(
R.
id
.
task
)
;
accounts
=
(
LinearLayout
)
findViewById
(
R.
id
.
accounts
)
;
sended
=
(
LinearLayout
)
findViewById
(
R.
id
.
sended
)
;
content
=
(
LinearLayout
)
findViewById
(
R.
id
.
content
)
;
?
taskText
=
(
TextView
)
findViewById
(
R.
id
.
taskText
)
;
accountsText
=
(
TextView
)
findViewById
(
R.
id
.
accountsText
)
;
sendedText
=
(
TextView
)
findViewById
(
R.
id
.
sendedText
)
;
?
LayoutInflater factory
=
LayoutInflater.
from
(
this
)
;
View
taskView
=
factory.
inflate
(
R.
layout
.
task
,
null
)
;
View
accountsView
=
factory.
inflate
(
R.
layout
.
accounts
,
null
)
;
View
sendedView
=
factory.
inflate
(
R.
layout
.
sended
,
null
)
;
//把三個(gè)內(nèi)容視圖的XML文件轉(zhuǎn)化成View
?
content.
addView
(
taskView
)
;
//啟動(dòng)時(shí)默認(rèn)載入taskView
?
task.
setOnClickListener
(
new
TabListener
(
task, taskText, taskView
)
)
;
accounts.
setOnClickListener
(
new
TabListener
(
accounts, accountsText,
accountsView
)
)
;
sended.
setOnClickListener
(
new
TabListener
(
sended, sendedText,
sendedView
)
)
;
//設(shè)置三個(gè)tab的點(diǎn)擊監(jiān)聽(tīng)器
?
}
?
class
TabListener
implements
OnClickListener
{
LinearLayout layout
;
TextView tv
;
View
subView
;
?
TabListener
(
LinearLayout layout, TextView tv,
View
subView
)
{
this
.
layout
=
layout
;
this
.
tv
=
tv
;
this
.
subView
=
subView
;
}
?
@Override
public
void
onClick
(
View
v
)
{
// TODO Auto-generated method stub
task.
setBackgroundDrawable
(
null
)
;
accounts.
setBackgroundDrawable
(
null
)
;
sended.
setBackgroundDrawable
(
null
)
;
taskText.
setTextColor
(
getResources
(
)
.
getColor
(
R.
color
.
green
)
)
;
accountsText.
setTextColor
(
getResources
(
)
.
getColor
(
R.
color
.
green
)
)
;
sendedText.
setTextColor
(
getResources
(
)
.
getColor
(
R.
color
.
green
)
)
;
// 全部設(shè)為未選中狀態(tài)
?
layout.
setBackgroundResource
(
R.
drawable
.
textback
)
;
tv.
setTextColor
(
getResources
(
)
.
getColor
(
R.
color
.
white
)
)
;
// 設(shè)置選中項(xiàng)
?
content.
removeAllViews
(
)
;
//移除所有內(nèi)容
content.
addView
(
subView
)
;
//添加傳入的View
?
}
?
}
}
|
Strings.xml中存兩個(gè)顏色值:
1
2
|
<color
name
=
"white"
>
#ffffff
</color
>
<color
name
=
"green"
>
#0cc054
</color
>
|
三個(gè)內(nèi)容視圖的xml,只貼一個(gè),另兩個(gè)一樣,名字不同而已:
task.xml:
1
2
3
4
5
6
7
8
|
<?xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<TextView
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:text
=
"Task"
>
</TextView
>
|
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
