分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果。
一、实现效果图
这里为了演示方便,我将两种方法放在一个应用程序中演示,这个是主界面
虽然两种实现的方式不一样,但是最终的效果图都是差不多的
二、项目结构图
三、详细的编码实现
3.1 主界面的实现
为了演示方便,我这里把两种实现方式分成两个Activity界面放在了主Activity界面中。
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
|
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
>
<
Button
android:id
=
"@+id/main_btn01"
android:layout_width
=
"fill_parent"
android:layout_height
=
"44dp"
android:layout_above
=
"@+id/main_btn02"
android:layout_margin
=
"5dp"
android:background
=
"@drawable/main_btn"
android:text
=
"第一种实现方式(PopupWindow实现)"
android:textSize
=
"16dp"
/>
<
Button
android:id
=
"@+id/main_btn02"
android:layout_width
=
"fill_parent"
android:layout_height
=
"44dp"
android:layout_centerVertical
=
"true"
android:layout_margin
=
"5dp"
android:background
=
"@drawable/main_btn"
android:text
=
"第二种实现方式(Activity实现)"
android:textSize
=
"16dp"
/>
</
RelativeLayout
>
|
2、定义一个自定义按钮的资源文件,main_btn.xml:
1
2
3
4
5
6
7
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
item
android:drawable
=
"@drawable/btn_back_pre"
android:state_pressed
=
"true"
/>
<
item
android:drawable
=
"@drawable/btn_back_nor"
/>
</
selector
>
|
3、主Activity程序入口类,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
|
package
com.yangyu.mytitlebar01;
import
android.app.Activity;
import
android.content.Intent;
import
android.os.Bundle;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.widget.Button;
/**
* @author yangyu
* 功能描述:主Activity类,程序的入口类
*/
public
class
MainActivity
extends
Activity
implements
OnClickListener {
//定义按钮
private
Button mainBtn01,mainBtn02;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/**
* 初始化组件
*/
private
void
initView(){
//得到按钮并设置监听事件
mainBtn01 = (Button)findViewById(R.id.main_btn01);
mainBtn02 = (Button)findViewById(R.id.main_btn02);
mainBtn01.setOnClickListener(
this
);
mainBtn02.setOnClickListener(
this
);
}
@Override
public
void
onClick(View v) {
switch
(v.getId()) {
case
R.id.main_btn01:
startActivity(
new
Intent(MainActivity.
this
,CustomTitleActivity01.
class
));
break
;
case
R.id.main_btn02:
startActivity(
new
Intent(MainActivity.
this
,CustomTitleActivity02.
class
));
break
;
default
:
break
;
}
}
}
|
3.2 第一种实现方式(PopupWindow)
第一种实现方式主要是通过点击按钮来弹出一个PopupWindow菜单来实现的,步骤如下:
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
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:background
=
"#fcfcfc"
android:orientation
=
"vertical"
>
<
RelativeLayout
android:id
=
"@+id/title"
android:layout_width
=
"fill_parent"
android:layout_height
=
"45dp"
android:background
=
"@drawable/title_bar"
android:gravity
=
"center_vertical"
>
<
TextView
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_centerInParent
=
"true"
android:text
=
"微信"
android:textColor
=
"#ffffff"
android:textSize
=
"20sp"
/>
<
ImageButton
android:id
=
"@+id/title_btn"
android:layout_width
=
"67dp"
android:layout_height
=
"wrap_content"
android:layout_alignParentRight
=
"true"
android:layout_centerVertical
=
"true"
android:layout_marginRight
=
"5dp"
android:background
=
"@drawable/title_button"
android:onClick
=
"btnmainright"
android:src
=
"@drawable/title_btn_function"
/>
</
RelativeLayout
>
</
LinearLayout
>
|
2、弹窗的布局页面,这里定义了一个ListView,title_popup.xml: