分别使用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 | < RelativeLayout xmlns:android = "" xmlns:tools = "" 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" ?> < selector xmlns:android = "" > < 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" ?> < LinearLayout xmlns:android = "" 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：