日常的生活中我们都会看到各式各样的客户端,底面都会有一些tab风格的菜单,点击的同时就会切换到相应的内容页面,而且tab菜单还是保留在当前页面底端。
通常实现这种风格的UI有两种方式一种就是TabHostActivity+TabHost+Activity,这种方式是v3.2以前的版本,对于新的版本来讲,比较推荐 FragmentActivity+FragmentTabHost+Fragment.关于这部分的实现我通过一个简单的小图来展示:
好了直接上代码了:
主activity布局 main_acitivty.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
LinearLayout
xmlns
:
android
=
"http://schemas.android.com/apk/res/android"
android
:
layout_width
=
"fill_parent"
android
:
layout_height
=
"fill_parent"
android
:
orientation
=
"vertical"
>
<
FrameLayout
android
:
id
=
"@+id/realtabcontent"
android
:
layout_width
=
"fill_parent"
android
:
layout_height
=
"0dip"
android
:
layout_weight
=
"1"
/
>
<
android
.
support
.
v4
.
app
.
FragmentTabHost
android
:
id
=
"@android:id/tabhost"
android
:
layout_width
=
"fill_parent"
android
:
layout_height
=
"wrap_content"
android
:
background
=
"@drawable/maintab_toolbar_bg"
>
<
FrameLayout
android
:
id
=
"@android:id/tabcontent"
android
:
layout_width
=
"0dp"
android
:
layout_height
=
"0dp"
android
:
layout_weight
=
"0"
/
>
<
/
android
.
support
.
v4
.
app
.
FragmentTabHost
>
<
/
LinearLayout
>
|
MainActivity的java代码实现:
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
|
public
class
MainActivity
extends
FragmentActivity
{
private
FragmentTabHost
tabHost
;
private
LayoutInflater
inflater
;
/**
* 定义每个页面的布局
*/
private
Class
fragments
[
]
=
{
IndexFragment
.
class
,
GroundFragment
.
class
,
SearchFragment
.
class
,
MyFragment
.
class
}
;
private
int
buttons_arr
[
]
=
{
R
.
drawable
.
tab_home_btn
,
R
.
drawable
.
tab_square_btn
,
R
.
drawable
.
tab_message_btn
,
R
.
drawable
.
tab_selfinfo
_btn
}
;
private
String
button_names_arr
[
]
=
{
"首页"
,
"广场"
,
"发现"
,
"我的云鼠"
}
;
// private
@Override
protected
void
onCreate
(
Bundle
savedInstanceState
)
{
super
.
onCreate
(
savedInstanceState
)
;
setContentView
(
R
.
layout
.
activity_main
)
;
// initialize view layout and data preparation
initYunshuView
(
)
;
}
// 构建activity的基本布局和数据初始化
private
void
initYunshuView
(
)
{
//初始化布局
inflater
=
LayoutInflater
.
from
(
this
)
;
tabHost
=
(
FragmentTabHost
)
findViewById
(
android
.
R
.
id
.
tabhost
)
;
tabHost
.
setup
(
this
,
getSupportFragmentManager
(
)
,
R
.
id
.
realtabcontent
)
;
int
tabNum
=
fragments
.
length
;
for
(
int
i
=
0
;
i
&
lt
;
tabNum
;
i
++
)
{
//初始化tabspecu用来显示每次切换button后的内容
TabSpec
tabSpec
=
tabHost
.
newTabSpec
(
button_names_arr
[
i
]
)
.
setIndicator
(
this
.
initView
(
i
)
)
;
//把内容添加到tabhost中去
tabHost
.
addTab
(
tabSpec
,
fragments
[
i
]
,
null
)
;
//设置背景颜色
tabHost
.
getTabWidget
(
)
.
getChildAt
(
i
)
.
setBackgroundResource
(
R
.
drawable
.
selector_tab_background
)
;
}
}
/**
* 初始化每一个应用页面的 button 按钮
* @param tabIndex
* @return
*/
private
View
initView
(
int
tabIndex
)
{
View
tabView
=
inflater
.
inflate
(
R
.
layout
.
tab_item_view
,
null
)
;
ImageView
imageView
=
(
ImageView
)
tabView
.
findViewById
(
R
.
id
.
imageview
)
;
imageView
.
setImageResource
(
buttons_arr
[
tabIndex
]
)
;
TextView
textView
=
(
TextView
)
tabView
.
findViewById
(
R
.
id
.
textview
)
;
textView
.
setText
(
button_names_arr
[
tabIndex
]
)
;
return
tabView
;
}
}
|
关键部分就是初始化FragmentTabHost的那部分代码。