# FlyoutMenus

**Repository Path**: chinasoft5_ohos/FlyoutMenus

## Basic Information

- **Project Name**: FlyoutMenus
- **Description**: Simple material-style flyout menus for Android
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-28
- **Last Updated**: 2022-09-06

## Categories & Tags

**Categories**: harmonyos-menu

**Tags**: None

## README

# FlyoutMenus

#### 项目介绍
- 项目名称：FlyoutMenus
- 所属系列：openharmony的第三方组件适配移植
- 功能：一个简单的弹出式菜单
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio2.2 beta1
- 基线版本：Release 0.5.3

#### 效果演示

![效果演示](./printscreen/screen.gif "截图") 

#### 安装教程

1.在项目根目录下的build.gradle文件中，
 ```
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
 ```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:flyoutmenu:1.0.0')
    ......  
 }
 ```


在sdk6，DevEco Studio2.2 beta1下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明

将自定义view添加到XML中，使用方法如下:
 ```
 <org.zakariya.flyoutmenu.FlyoutMenuView
            ohos:id="$+id:toolSelectorFlyoutMenu"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:padding="$float:flyout_menu_button_padding"
            ohos:right_margin="$float:flyout_menu_right_margin"
            hap:fmButtonSize="$float:flyout_menu_button_size"
            hap:fmItemHeight="$float:flyout_menu_item_hight"
            hap:fmItemWidth="$float:flyout_menu_item_right"
            hap:fmMenuAnchor="top"
            hap:fmSelectedItemBackgroundColor="@color/toolSelectionBackgroundColor"
            />
 ```

完整调用:

 ```
public class EmojiFlyoutMenu {
    
    /**
     * unicode 转 emoji
     */
    public static String uni2emoji(String unicode16) {
        if(unicode16.length() <= 0) {
            return null;
        }
        BigInteger bi = new BigInteger(unicode16,16);
        String biemoji = bi.toString(10);
        Integer integer = Integer.valueOf(biemoji);
        String emoji = new String(Character.toChars(integer));
        return emoji;
    }


    public static class MenuItem extends FlyoutMenuView.MenuItem {

        String emojiString;
        Paint paint;
        int position;

        public MenuItem(Context context,int id, String emojiCode, float size, int color,int position) {
            super(context,id);  //type = 1
            this.emojiString = emojiCode;
            this.position = position;


            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(new Color(0xFFA30303));
            paint.setTextSize(96);//(int) size);106
            paint.setStyle(Paint.Style.FILL_STYLE);
            paint.setTextAlign(TextAlignment.CENTER);

        }

        public String getEmojiCode() {
            return emojiString;
        }


        @Override
        public void onDraw(Canvas canvas, RectFloat bounds, float degreeSelected) {
            canvas.drawText(paint, uni2emoji(emojiString), bounds.getCenter().getPointX(), (bounds.bottom+bounds.top)/2 + paint.descent()+5);//uni2emoji(emojiString)
        }
    }

    public static class ButtonRenderer extends FlyoutMenuView.ButtonRenderer {  //可以设置外圈的颜色

        int emojiCode;
        String emojiString;
        Paint paint;
        Paint paint1;
        TextPaint textPaint;

        public ButtonRenderer(String emojiCode, float size,int color) {
            super();

            this.setEmojiCode(emojiCode);
            paint1 = new Paint();
            paint1.setColor(new Color(0xFFA30303));


            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(new Color(0xFFA30303));
            paint.setTextSize(96);
            paint.setTextAlign(TextAlignment.CENTER);
            paint.setStyle(Paint.Style.FILL_STYLE);

     
        }

        public String getEmojiCode() {
            return emojiString;
        }

        public void setEmojiCode(String emojiCode) {
            this.emojiString = emojiCode;
        }

        @Override
        public void onDrawButtonContent(Canvas canvas, RectFloat buttonBounds, Color buttonColor, float alpha) {//实现button按钮上内容的绘制
            canvas.drawText(paint,uni2emoji(emojiString), buttonBounds.getCenter().getPointX(), buttonBounds.getCenter().getPointY()+ paint.descent() + 10);  //可以实现
        }
    }

To use the above:

 smileyFlyoutMenu = (FlyoutMenuView) findComponentById(ResourceTable.Id_smileyFlyoutMenu);
 
   String[] emojiCodes = {
                "1f60a", "1f603", "1f601",
                "1f602", "1f620", "1f61e",
                "1f630", "1f624",
        };
		
		
        ohos.global.resource.ResourceManager resManager = this.getResourceManager();

        float fontSizeInMenu = 0;
        float fontSizeInButton = 0;
        int color = 0;
        try {
            color = resManager.getElement(ResourceTable.Color_smileyMenuCharColor).getInteger();
            fontSizeInMenu = resManager.getElement(ResourceTable.Float_smiley_menu_item_size).getFloat() * 2.0f;
            fontSizeInButton = resManager.getElement(ResourceTable.Float_flyout_menu_button_size).getFloat() * 0.5f;
        } catch (IOException e) {
            e.printStackTrace();
        } catch (NotExistException e) {
            e.printStackTrace();
        } catch (WrongTypeException e) {
            e.printStackTrace();
        }

        List<FlyoutMenuView.MenuItem> menuItems = new ArrayList<>();

        for (int i = 0; i < emojiCodes.length; i++) {
            menuItems.add(new EmojiFlyoutMenu.MenuItem(getContext(),i, emojiCodes[i], fontSizeInMenu, color,i));
        }

        smileyFlyoutMenu.setLayout(new FlyoutMenuView.GridLayout(2, FlyoutMenuView.GridLayout.UNSPECIFIED));
        smileyFlyoutMenu.setAdapter(new FlyoutMenuView.ArrayAdapter<>(menuItems));  


        final EmojiFlyoutMenu.ButtonRenderer renderer = new EmojiFlyoutMenu.ButtonRenderer(emojiCodes[0], fontSizeInButton, color);
        smileyFlyoutMenu.setButtonRenderer(renderer);

        smileyFlyoutMenu.setSelectionListener(new FlyoutMenuView.SelectionListener() {
            @Override
            public void onItemSelected(FlyoutMenuView flyoutMenuView, FlyoutMenuView.MenuItem item) {
                smileyFlyoutMenuSelectionId = item.getId();
                renderer.setEmojiCode(((EmojiFlyoutMenu.MenuItem) item).getEmojiCode()); 
            }


            @Override
            public void onDismissWithoutSelection(FlyoutMenuView flyoutMenuView) {
            }


 ```

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

#### 版本迭代
- 1.0.0
- 0.0.1-SNAPSHOT