首页 > 代码库 > 【Android UI设计与开发】第14期：顶部标题栏（五）两种方式实现仿微信标题栏弹窗效果
【Android UI设计与开发】第14期：顶部标题栏（五）两种方式实现仿微信标题栏弹窗效果
转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/9093821
博主在这篇文章中将会继续围绕顶部标题栏专题来进行实例讲解，今天要讲解的主题是分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果。
一、实现效果图
这里为了演示方便，我将两种方法放在一个应用程序中演示，这个是主界面
虽然两种实现的方式不一样，但是最终的效果图都是差不多的
二、项目结构图
三、详细的编码实现
3.1 主界面的实现
为了演示方便，我这里把两种实现方式分成两个Activity界面放在了主Activity界面中。
1、主布局资源文件，activity_main.xml：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/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：
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_back_pre" android:state_pressed="true"/> <item android:drawable="@drawable/btn_back_nor"/></selector>
3、主Activity程序入口类，MainActivity.java：
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：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/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：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/title_function_bg" android:orientation="vertical" > <ListView android:id="@+id/title_list" android:layout_width="120dp" android:layout_height="fill_parent" android:cacheColorHint="#00000000" android:divider="@drawable/mm_title_functionframe_line" android:listSelector="@drawable/title_list_selector" android:padding="3dp" android:scrollingCache="false" /></LinearLayout>
3、定义一个列表选项中的自定义按钮，title_list_selector.xml：
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/mm_title_functionframe_pressed" android:state_focused="true"></item> <item android:drawable="@drawable/mm_title_functionframe_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/mm_title_functionframe_pressed" android:state_selected="true"></item> <item android:drawable="@android:color/transparent"></item></selector>
4、最后再定义一个弹窗按钮的自定义按钮，title_button.xml：
<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/mm_title_btn_focused" android:state_focused="true"/> <item android:drawable="@drawable/mm_title_btn_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/mm_title_btn_pressed" android:state_selected="true"/> <item android:drawable="@drawable/mm_title_btn_normal"/></selector>
5、下面是Java代码部分，首先定义一个常量类，Util.java：
package com.yangyu.mytitlebar01;import android.content.Context;/** * @author yangyu * 功能描述：常量工具类 */public class Util { /** * 得到设备屏幕的宽度 */ public static int getScreenWidth(Context context) { return context.getResources().getDisplayMetrics().widthPixels; } /** * 得到设备屏幕的高度 */ public static int getScreenHeight(Context context) { return context.getResources().getDisplayMetrics().heightPixels; } /** * 得到设备的密度 */ public static float getScreenDensity(Context context) { return context.getResources().getDisplayMetrics().density; } /** * 把密度转换为像素 */ public static int dip2px(Context context, float px) { final float scale = getScreenDensity(context); return (int) (px * scale + 0.5); }}
6、再定义一个实体对象类，ActionItem这个类主要是用来绘制列表选项中的标题和图标,ActionItem.java：
package com.yangyu.mytitlebar01;import android.content.Context;import android.graphics.drawable.Drawable;/** * @author yangyu * 功能描述：弹窗内部子类项（绘制标题和图标） */public class ActionItem { //定义图片对象 public Drawable mDrawable; //定义文本对象 public CharSequence mTitle; public ActionItem(Drawable drawable, CharSequence title){ this.mDrawable = drawable; this.mTitle = title; } public ActionItem(Context context, int titleId, int drawableId){ this.mTitle = context.getResources().getText(titleId); this.mDrawable = context.getResources().getDrawable(drawableId); } public ActionItem(Context context, CharSequence title, int drawableId) { this.mTitle = title; this.mDrawable = context.getResources().getDrawable(drawableId); }}
7、再定义一个TitlePopup标题栏弹窗类，该类继承自PopupWindow，TitlePopup.java：
package com.yangyu.mytitlebar01;import java.util.ArrayList;import android.content.Context;import android.graphics.Rect;import android.graphics.drawable.BitmapDrawable;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.BaseAdapter;import android.widget.ListView;import android.widget.PopupWindow;import android.widget.TextView;/** * @author yangyu * 功能描述：标题按钮上的弹窗（继承自PopupWindow） */public class TitlePopup extends PopupWindow { private Context mContext; //列表弹窗的间隔 protected final int LIST_PADDING = 10; //实例化一个矩形 private Rect mRect = new Rect(); //坐标的位置（x、y） private final int[] mLocation = new int[2]; //屏幕的宽度和高度 private int mScreenWidth,mScreenHeight; //判断是否需要添加或更新列表子类项 private boolean mIsDirty; //位置不在中心 private int popupGravity = Gravity.NO_GRAVITY; //弹窗子类项选中时的监听 private OnItemOnClickListener mItemOnClickListener; //定义列表对象 private ListView mListView; //定义弹窗子类项列表 private ArrayList<ActionItem> mActionItems = new ArrayList<ActionItem>(); public TitlePopup(Context context){ //设置布局的参数 this(context, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); } public TitlePopup(Context context, int width, int height){ this.mContext = context; //设置可以获得焦点 setFocusable(true); //设置弹窗内可点击 setTouchable(true); //设置弹窗外可点击 setOutsideTouchable(true); //获得屏幕的宽度和高度 mScreenWidth = Util.getScreenWidth(mContext); mScreenHeight = Util.getScreenHeight(mContext); //设置弹窗的宽度和高度 setWidth(width); setHeight(height); setBackgroundDrawable(new BitmapDrawable()); //设置弹窗的布局界面 setContentView(LayoutInflater.from(mContext).inflate(R.layout.title_popup, null)); initUI(); } /** * 初始化弹窗列表 */ private void initUI(){ mListView = (ListView) getContentView().findViewById(R.id.title_list); mListView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int index,long arg3) { //点击子类项后，弹窗消失 dismiss(); if(mItemOnClickListener != null) mItemOnClickListener.onItemClick(mActionItems.get(index), index); } }); } /** * 显示弹窗列表界面 */ public void show(View view){ //获得点击屏幕的位置坐标 view.getLocationOnScreen(mLocation); //设置矩形的大小 mRect.set(mLocation[0], mLocation[1], mLocation[0] + view.getWidth(),mLocation[1] + view.getHeight()); //判断是否需要添加或更新列表子类项 if(mIsDirty){ populateActions(); } //显示弹窗的位置 showAtLocation(view, popupGravity, mScreenWidth - LIST_PADDING - (getWidth()/2), mRect.bottom); } /** * 设置弹窗列表子项 */ private void populateActions(){ mIsDirty = false; //设置列表的适配器 mListView.setAdapter(new BaseAdapter() { @Override public View getView(int position, View convertView, ViewGroup parent) { TextView textView = null; if(convertView == null){ textView = new TextView(mContext); textView.setTextColor(mContext.getResources().getColor(android.R.color.white)); textView.setTextSize(14); //设置文本居中 textView.setGravity(Gravity.CENTER); //设置文本域的范围 textView.setPadding(0, 10, 0, 10); //设置文本在一行内显示（不换行） textView.setSingleLine(true); }else{ textView = (TextView) convertView; } ActionItem item = mActionItems.get(position); //设置文本文字 textView.setText(item.mTitle); //设置文字与图标的间隔 textView.setCompoundDrawablePadding(10); //设置在文字的左边放一个图标 textView.setCompoundDrawablesWithIntrinsicBounds(item.mDrawable, null , null, null); return textView; } @Override public long getItemId(int position) { return position; } @Override public Object getItem(int position) { return mActionItems.get(position); } @Override public int getCount() { return mActionItems.size(); } }) ; } /** * 添加子类项 */ public void addAction(ActionItem action){ if(action != null){ mActionItems.add(action); mIsDirty = true; } } /** * 清除子类项 */ public void cleanAction(){ if(mActionItems.isEmpty()){ mActionItems.clear(); mIsDirty = true; } } /** * 根据位置得到子类项 */ public ActionItem getAction(int position){ if(position < 0 || position > mActionItems.size()) return null; return mActionItems.get(position); } /** * 设置监听事件 */ public void setItemOnClickListener(OnItemOnClickListener onItemOnClickListener){ this.mItemOnClickListener = onItemOnClickListener; } /** * @author yangyu * 功能描述：弹窗子类项按钮监听事件 */ public static interface OnItemOnClickListener{ public void onItemClick(ActionItem item , int position); }}
8、最后再定义一个Activity界面类，CustomTitleActivity01.java：
package com.yangyu.mytitlebar01;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.widget.ImageButton;/** * @author yangyu * 功能描述：第一种实现方式，PopupWindow实现方式 */public class CustomTitleActivity01 extends Activity { //定义标题栏上的按钮 private ImageButton titleBtn; //定义标题栏弹窗按钮 private TitlePopup titlePopup; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_title); initView(); initData(); } /** * 初始化组件 */ private void initView(){ //实例化标题栏按钮并设置监听 titleBtn = (ImageButton) findViewById(R.id.title_btn); titleBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { titlePopup.show(v); } }); //实例化标题栏弹窗 titlePopup = new TitlePopup(this, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); } /** * 初始化数据 */ private void initData(){ //给标题栏弹窗添加子类 titlePopup.addAction(new ActionItem(this, "发起聊天", R.drawable.mm_title_btn_compose_normal)); titlePopup.addAction(new ActionItem(this, "听筒模式", R.drawable.mm_title_btn_receiver_normal)); titlePopup.addAction(new ActionItem(this, "登录网页", R.drawable.mm_title_btn_keyboard_normal)); titlePopup.addAction(new ActionItem(this, "扫一扫", R.drawable.mm_title_btn_qrcode_normal)); } }
3.2 第二种实现方式（Activity）
第二种实现方式主要是通过再定义一个Activity来调用实现的，要想实现一个Activity点击按钮实现另一个Activity的弹窗
效果，就要在AndroidManifest.xml清单文件中注册一个新的Activity，然后给它调用系统的样式来实现这种效果。
<activity android:name="DialogActivity" android:theme="@android:style/Theme.Translucent.NoTitleBar" > </activity>
1、定义另一个Activity布局文件，activity_dialog.xml：
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginTop="50dp" > <LinearLayout android:id="@+id/main_dialog_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:background="@drawable/title_function_bg" android:orientation="vertical" > <LinearLayout android:id="@+id/llayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginTop="5dp" android:background="@drawable/title_list_selector" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="8dp" android:src="@drawable/mm_title_btn_compose_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" android:text="发起聊天" android:textColor="#fff" android:textSize="16sp" /> </LinearLayout> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mm_title_functionframe_line" /> <LinearLayout android:id="@+id/llayout02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/title_list_selector" > <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="8dp" android:src="@drawable/mm_title_btn_receiver_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" android:text="听筒模式" android:textColor="#fff" android:textSize="16sp" /> </LinearLayout> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mm_title_functionframe_line" /> <LinearLayout android:id="@+id/llayout03" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/title_list_selector" > <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="8dp" android:src="@drawable/mm_title_btn_keyboard_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" android:text="登录网页" android:textColor="#fff" android:textSize="16sp" /> </LinearLayout> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mm_title_functionframe_line" /> <LinearLayout android:id="@+id/llayout04" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:background="@drawable/title_list_selector" > <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="8dp" android:src="@drawable/mm_title_btn_qrcode_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="13dp" android:text="扫一扫" android:textColor="#fff" android:textSize="16sp" /> </LinearLayout> </LinearLayout> </RelativeLayout></RelativeLayout>
2、另一个Activity弹窗界面，DialogActivity.java：
package com.yangyu.mytitlebar01;import android.app.Activity;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.widget.LinearLayout;/** * @author yangyu * 功能描述：弹出Activity界面 */public class DialogActivity extends Activity implements OnClickListener{ private LinearLayout layout01,layout02,layout03,layout04; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_dialog); initView(); } /** * 初始化组件 */ private void initView(){ //得到布局组件对象并设置监听事件 layout01 = (LinearLayout)findViewById(R.id.llayout01); layout02 = (LinearLayout)findViewById(R.id.llayout02); layout03 = (LinearLayout)findViewById(R.id.llayout03); layout04 = (LinearLayout)findViewById(R.id.llayout04); layout01.setOnClickListener(this); layout02.setOnClickListener(this); layout03.setOnClickListener(this); layout04.setOnClickListener(this); } @Override public boolean onTouchEvent(MotionEvent event){ finish(); return true; } @Override public void onClick(View v) { }}
3、最后是第二种方式的显示界面，CustomTitleActivity02.java：
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.ImageButton;/** * @author yangyu * 功能描述：第二种实现方式,Activity实现方式 */public class CustomTitleActivity02 extends Activity { //定义标题栏上的按钮 private ImageButton titleBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_title); initView(); } /** * 初始化组件 */ private void initView(){ //实例化标题栏按钮并设置监听 titleBtn = (ImageButton) findViewById(R.id.title_btn); titleBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(CustomTitleActivity02.this,DialogActivity.class)); } }); } }
两种弹窗的实现方式基本上就讲完了，有什么问题可以跟博主留言。
源码下载地址
【Android UI设计与开发】第14期：顶部标题栏（五）两种方式实现仿微信标题栏弹窗效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。