android 仿微信demo————微信顶部操作栏加号按钮实现（弹出子菜单）

Posted 2021-06-29 你要永远相信光z

android 仿微信demo————微信启动界面实现

android 仿微信demo————注册功能实现（移动端）

android 仿微信demo————注册功能实现（服务端）

android 仿微信demo————登录功能实现（移动端）

android 仿微信demo————登录功能实现（服务端）

android 仿微信demo————微信主界面实现

android 仿微信demo————微信消息界面实现（移动端）

android 仿微信demo————微信消息界面实现（服务端）

android 仿微信demo————微信通讯录界面功能实现（移动端，服务端）

android 仿微信demo————微信发现界面实现

android 仿微信demo————微信顶部操作栏界面实现

android 仿微信demo————微信顶部操作栏搜索按钮实现（查询通讯录好友功能）

android 仿微信demo————微信顶部操作栏加号按钮实现（弹出子菜单）

上一篇中实现微信顶部操作栏搜索按钮，这一篇完善加号按钮功能

文章目录

• 微信顶部操作栏加号按钮实现（弹出子菜单）
• 测试

微信顶部操作栏加号按钮实现（弹出子菜单）

我们之前说过加号按钮可以通过toolbar的overflow实现，但是效果不理想，那么要实现微信那种效果，要怎么做呢？

有没有发现当点击加号后的弹出子菜单像不像我们之前在登录界面做的对话框有点类似，没错，可以对话框实现，我们可以自定义一个对话框，当点击加号按钮时便弹出一个对话框

创建对话框activity
MainTopRightDialog.java

package com.zhang.test.wxchatdemo1;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class MainTopRightDialog extends Activity {
	private LinearLayout layout;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_top_right_dialog);
		//设置对话框activity的宽度等于屏幕宽度，一定要设置，不然对话框会显示不全
		getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);//需要添加的语句
		layout=(LinearLayout)findViewById(R.id.main_dialog_layout);
		layout.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
			}
		});
	}
	@Override
	public boolean onTouchEvent(MotionEvent event){
		finish();
		return true;
	}
}

创建对应的布局
main_top_right_dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
	>

	<RelativeLayout
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:layout_marginTop="46dp">

		<LinearLayout
			android:id="@+id/main_dialog_layout"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_alignParentTop="true"
			android:layout_alignParentRight="true"
			android:background="@drawable/title_function_bg"
			android:orientation="vertical">

			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">

				<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/chat_img" />

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="发起群聊"
					android:textColor="#fff"
					android:textSize="18sp" />
			</LinearLayout>

			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">

				<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/add_friend_img" />

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="添加朋友"
					android:textColor="#fff"
					android:textSize="18sp" />
			</LinearLayout>

			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">

				<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/scan_scan_img" />

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="扫一扫"
					android:textColor="#fff"
					android:textSize="18sp" />
			</LinearLayout>

			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">

				<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/pay_img" />

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="收付款"
					android:textColor="#fff"
					android:textSize="18sp" />
			</LinearLayout>

			<LinearLayout
				android:layout_width="match_parent"
				android:layout_height="wrap_content">

				<ImageView
					android:id="@+id/imageView5"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:layout_gravity="center_vertical"
					android:layout_marginLeft="8dp"
					android:src="@drawable/help_img" />

				<TextView
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="帮助与反馈"
					android:textColor="#fff"
					android:textSize="18sp" />
			</LinearLayout>


		</LinearLayout>

	</RelativeLayout>
</RelativeLayout>

在之前的文章说过activity是会覆盖已有的activity（界面），所有我们需要在AndroidMainfest.xml中给activity设置一个自定义对话框主题，转换为对话框

在AndroidMainfest.xml中把activity转换为对话框

在style.xml中声明自定义的对话框

    <style name="MyDialogStyleTop" parent="android:Theme.Dialog" >
        <item name="android:windowAnimationStyle">@style/AnimTop2</item>
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
        <item name="android:windowIsTranslucent">true</item><!--半透明-->
        <item name="android:windowNoTitle">true</item><!--无标题-->
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item><!--背景透明-->
        <item name="android:backgroundDimEnabled">false</item><!--模糊-->
    </style>

  <style name="AnimTop2" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/push_top_in2</item>
        <item name="android:windowExitAnimation">@anim/push_top_out2</item>
    </style>

上面自定义的对话框样式继承Theme.Dialog转换为对话框，并且还给对话框设置动画属性，下面会给出这两个文件

创建动作文件anim

在动作文件中创建两个渐变尺寸伸缩动画效果scale文件

push_top_in2.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑入式 -->
<scale   xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        android:fromXScale="1.0"   
        android:toXScale="1.0"   
        android:fromYScale="0"   
        android:toYScale="1.0"   
        android:pivotX="0"
        android:pivotY="10%"
        android:duration="200" /> 

push_top_out2.xml

<?xml version="1.0" encoding="utf-8"?>

<scale   xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        android:fromXScale="1.0"
        android:toXScale="1.0"   
        android:fromYScale="1.0"   
        android:toYScale="0"   
        android:pivotX="0"
        android:pivotY="10%"
        android:duration="200" /> 

测试

测试前要把之前点击加号按钮跳转的activity注释取消掉