<1>实现了点击按钮时的切换图片效果;
<2>实现了点击按钮时的切换界面效果;
<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果;
<4>实现了点击空白处和返回键按钮来关闭弹出菜单。
有个地方需要注意的是,弹出菜单栏后,点击里面的选项按钮会导致中间的圆形按钮切换为普通状态,这是因为在实际的项目中,点击菜单选项按钮之后会进入别的界面,所以也就不存在点击了之后圆形的按钮切换为普通的状态效果了,所以这里也不需要太在意。为了实现效果,这里只适配了480x800 hdpi的屏幕大小。
一、效果图
有图才有真相
二、项目结构图
三、代码详细编写
1、主布局界面,activity_main.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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<
span
style
=
"font-size:12px;"
><
RelativeLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
FrameLayout
android:id
=
"@+id/frame_content"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_above
=
"@+id/frameLayout1"
android:layout_alignParentLeft
=
"true"
android:layout_alignParentRight
=
"true"
android:layout_alignParentTop
=
"true"
android:background
=
"#ffffff"
>
</
FrameLayout
>
<
FrameLayout
android:id
=
"@+id/frameLayout1"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_alignParentBottom
=
"true"
android:layout_alignParentLeft
=
"true"
android:background
=
"@drawable/toolbar_bg_normal"
>
<
LinearLayout
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:layout_marginTop
=
"1dp"
android:gravity
=
"center_horizontal"
>
<
FrameLayout
android:id
=
"@+id/layout_friendfeed"
android:layout_width
=
"fill_parent"
android:layout_height
=
"48dp"
android:layout_weight
=
"1"
android:background
=
"@drawable/tab_btn_background"
>
<
ImageView
android:id
=
"@+id/image_friendfeed"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"top|center"
android:layout_marginTop
=
"1.0dip"
android:src
=
"@drawable/tab_friendfeed_btn"
/>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"bottom|center"
android:layout_marginBottom
=
"6.0dip"
android:text
=
"动态"
android:textColor
=
"#ffffff"
android:textSize
=
"10sp"
/>
</
FrameLayout
>
<
FrameLayout
android:id
=
"@+id/layout_myfeed"
android:layout_width
=
"fill_parent"
android:layout_height
=
"48dp"
android:layout_weight
=
"1"
android:background
=
"@drawable/tab_btn_background"
>
<
ImageView
android:id
=
"@+id/image_myfeed"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"top|center"
android:layout_marginTop
=
"1.0dip"
android:src
=
"@drawable/tab_myfeed_btn"
/>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"bottom|center"
android:layout_marginBottom
=
"6.0dip"
android:text
=
"与我想关"
android:textColor
=
"#ffffff"
android:textSize
=
"10sp"
/>
</
FrameLayout
>
<
FrameLayout
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:layout_weight
=
"1"
>
</
FrameLayout
>
<
FrameLayout
android:id
=
"@+id/layout_home"
android:layout_width
=
"fill_parent"
android:layout_height
=
"48dp"
android:layout_weight
=
"1"
android:background
=
"@drawable/tab_btn_background"
>
<
ImageView
android:id
=
"@+id/image_home"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"top|center"
android:layout_marginTop
=
"1.0dip"
android:src
=
"@drawable/tab_home_btn"
/>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"bottom|center"
android:layout_marginBottom
=
"6.0dip"
android:text
=
"我的空间"
android:textColor
=
"#ffffff"
android:textSize
=
"10sp"
/>
</
FrameLayout
>
<
FrameLayout
android:id
=
"@+id/layout_more"
android:layout_width
=
"fill_parent"
android:layout_height
=
"48dp"
android:layout_weight
=
"1"
android:background
=
"@drawable/tab_btn_background"
>
<
ImageView
android:id
=
"@+id/image_more"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"top|center"
android:layout_marginTop
=
"1.0dip"
android:src
=
"@drawable/tab_more_btn"
/>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"bottom|center"
android:layout_marginBottom
=
"6.0dip"
android:text
=
"更多"
android:textColor
=
"#ffffff"
android:textSize
=
"10sp"
/>
</
FrameLayout
>
</
LinearLayout
>
</
FrameLayout
>
<
ImageView
android:id
=
"@+id/toggle_btn"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_alignParentBottom
=
"true"
android:layout_centerHorizontal
=
"true"
android:src
=
"@drawable/toolbar_btn_normal"
/>
<
ImageView
android:id
=
"@+id/plus_btn"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_alignTop
=
"@+id/frameLayout1"
android:layout_centerHorizontal
=
"true"
android:layout_marginTop
=
"6dip"
android:src
=
"@drawable/toolbar_plus"
/>
</
RelativeLayout
></
span
>
|
我觉得这个布局界面是整个项目当中实现起来最复杂的地方,但是把思路理清楚了之后又觉得其实也没有那么复杂,详细说一下我实现的步骤:
来源: csdn 作者:yangyu20121224