滑动菜单方案之四：Fragment+PopupWindow仿QQ空间最新版底部菜单栏

来源：互联网发布：南通java培训价格编辑：程序博客网时间：2024/05/01 00:36

<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
<spanstyle="font-size:12px;"><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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

0 0