1. 程式人生 > >001、仿微信右上角彈出選單

001、仿微信右上角彈出選單

一、效果圖

二、程式碼

1、選單佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"
        android:background="#393a3f"
        android:drawableStart="@drawable/album"
        android:drawablePadding="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:text="發起群聊"
        android:textColor="#ffffff"
        android:textSize="18sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"
        android:background="#393a3f"
        android:drawableStart="@drawable/album"
        android:drawablePadding="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:text="發起群聊"
        android:textColor="#ffffff"
        android:textSize="18sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"
        android:background="#393a3f"
        android:drawableStart="@drawable/album"
        android:drawablePadding="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:text="發起群聊"
        android:textColor="#ffffff"
        android:textSize="18sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"
        android:background="#393a3f"
        android:drawableStart="@drawable/album"
        android:drawablePadding="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:text="發起群聊"
        android:textColor="#ffffff"
        android:textSize="18sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"
        android:background="#393a3f"
        android:drawableStart="@drawable/album"
        android:drawablePadding="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:text="發起群聊"
        android:textColor="#ffffff"
        android:textSize="18sp"/>
</LinearLayout>

2、主佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--頂部標題欄-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:background="#303030"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:text="微信"
            android:textSize="25sp"
            android:textColor="#ffffff"/>
        <TextView
            android:id="@+id/tv_plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:gravity="end"
            android:text="+"
            android:textSize="40sp"
            android:textColor="#ffffff"/>
    </LinearLayout>
</LinearLayout>

3、邏輯程式碼

package com.example.administrator.app_book_test;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ActionBar actionBar;
    private TextView tv_plus;
    PopupWindow popupWindow;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //隱藏系統標題欄
        actionBar = getSupportActionBar();
        hideActionBar();//呼叫隱藏ActionBar的方法
        tv_plus = findViewById(R.id.tv_plus);//初始化檢視
        tv_plus.setOnClickListener(this);//點選事件
    }
    //隱藏ActionBar的方法
    private void hideActionBar() {
        actionBar.hide();
    }
    //點選事件彙總
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.tv_plus:
                //點選事件
                showPopupWindow();
                break;
            case R.id.btn1:
                Toast.makeText(this, "按鈕1被單擊了", Toast.LENGTH_SHORT).show();
                popupWindow.dismiss();
                break;
        }
    }
    //顯示popupWindow
    private void showPopupWindow(){
        //獲取自定義選單的佈局檔案
        final View popupWindow_view = getLayoutInflater().inflate(R.layout.wechat_menu_layout,null,false);
        //建立popupWindow,設定寬度和高度
        popupWindow = new PopupWindow(popupWindow_view,ActionBar.LayoutParams.WRAP_CONTENT,ActionBar.LayoutParams.WRAP_CONTENT,true);
        //內部控制元件的點選事件
        Button btn1 = popupWindow_view.findViewById(R.id.btn1);
        btn1.setOnClickListener(this);
        //設定選單的顯示位置
        popupWindow.showAsDropDown(tv_plus,0,0);
        //相容5.0點選其他位置隱藏popupWindow
        popupWindow_view.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                //必須寫 v.performClick();解決與單擊事件的衝突
                switch (motionEvent.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        //如果選單不為空,且選單正在顯示
                        if(popupWindow!=null&&popupWindow.isShowing()){
                            popupWindow.dismiss();//隱藏選單
                            popupWindow = null;//初始化選單
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                        view.performClick();
                        break;
                    default:
                        break;
                }
                return false;
            }
        });
    }
}