分别使用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: