一句話搞定高仿ios底部彈出提示框（Android）

最近項目裡面用到了底部的彈出提示框，UI小姐姐本着設計樣式還是ios的好看原則。設計了一個ios樣式的底部彈出提示框。OK OK anyway，類似樣式并不少見，實作方式有很多，網上随便找一個吧，還不滿大街都是。嗯哼，确實不少。但是 !!! 不是講代碼就是講布局，或者使用方法挺麻煩。

用的時候還要自己手寫這部分代碼，麻煩不麻煩？作為一名注定要改變世界的程式猿，你讓我天天寫這個？這是不能忍的。就沒有簡單的，快捷的，高效的，一句話就能搞定的嗎？

有需求就有産品，是以，這個BottomMenu産生了。

GitHub項目位址

先來看下效果：

How to use：

Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

allprojects {
       repositories {
           ...
           maven { url 'https://jitpack.io' }
       }
   }           

Step 2. Add the dependency

dependencies {
            compile 'com.github.zhaolei9527:BottomMenu:v1.0.1'
    }           

Activity檔案代碼：（一句話，有木有?很簡單，有木有？）

基本用法：

new BottomMenuFragment(MainActivity.this)
        .addMenuItems(new MenuItem("從相冊選擇"))
        .addMenuItems(new MenuItem("拍照"))
        .setOnItemClickListener(new BottomMenuFragment.OnItemClickListener() {
            @Override
            public void onItemClick(TextView menu_item, int position) {
                Toast.makeText(MainActivity.this, menu_item.getText().toString().trim(), Toast.LENGTH_SHORT).show();
            }
        })
        .show();           

帶Title用法：

new BottomMenuFragment(MainActivity.this)
        .setTitle("标題")
        .addMenuItems(new MenuItem("從相冊選擇"))
        .addMenuItems(new MenuItem("拍照"))
        .setOnItemClickListener(new BottomMenuFragment.OnItemClickListener() {
            @Override
            public void onItemClick(TextView menu_item, int position) {
                Toast.makeText(MainActivity.this, menu_item.getText().toString().trim(), Toast.LENGTH_SHORT).show();
            }
        })
        .show();           

指定條目樣式用法：

new BottomMenuFragment(MainActivity.this)
        .setTitle("标題")
        .addMenuItems(new MenuItem("從相冊選擇", MenuItem.MenuItemStyle.COMMON))
        .addMenuItems(new MenuItem("拍照", MenuItem.MenuItemStyle.STRESS))
        .setOnItemClickListener(new BottomMenuFragment.OnItemClickListener() {
            @Override
            public void onItemClick(TextView menu_item, int position) {
                Toast.makeText(MainActivity.this, menu_item.getText().toString().trim(), Toast.LENGTH_SHORT).show();
            }
        })
        .show();           

全部一句話搞定，還有更多功能可以自己發掘一下。

最後看下元件代碼:

整體結構為三個檔案，BottomMenuFragment為彈出主體内容，MenuItem為條目對象的POJO，MenuItemAdapter顧名思義是條目的擴充卡。代碼邏輯實作方法其實挺簡單，大同小異，隻不過對于代碼進行封裝使操作更加便捷，簡單且迅速。

BottomMenuFragment檔案：

public class BottomMenuFragment extends DialogFragment {

    private final String TAG = "BottomMenuFragment";
    private Activity context;
    private OnItemClickListener mOnItemClickListener;
    private boolean showTitle = false;
    private String BottomTitle = "";

    public BottomMenuFragment(Activity context) {
        this.context = context;
    }

    private List<MenuItem> menuItemList = new ArrayList<MenuItem>();

    public List<MenuItem> getMenuItems() {
        return menuItemList;
    }

    public void addMenuItems(List<MenuItem> menuItems) {
        this.menuItemList.addAll(menuItems);
    }

    public BottomMenuFragment addMenuItems(MenuItem menuItems) {
        menuItemList.add(menuItems);
        return this;
    }

    public BottomMenuFragment setTitle(String BottomTitle) {
        showTitle = true;
        this.BottomTitle = BottomTitle;
        return this;
    }

    public void show() {
        this.show(context.getFragmentManager(), "BottomMenuFragment");
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));//設定背景透明
        getDialog().getWindow().setWindowAnimations(R.style.menu_animation);//添加一組進出動畫
        View view = inflater.inflate(R.layout.fragment_bottom_menu, container, false);
        //view.setAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.menu_appear));//添加一個加載動畫，這樣的問題是沒辦法添加消失動畫，有待進一步研究
        ((TextView) view.findViewById(tv_cancel)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.i(TAG, "onClick: tv_cancel");
                BottomMenuFragment.this.dismiss();
            }
        });

        if (showTitle) {
            menuItemList.add(0, new MenuItem(BottomTitle, MenuItem.MenuItemStyle.COMMON));
        }

        ListView lv_menu = (ListView) view.findViewById(R.id.lv_menu);
        MenuItemAdapter menuItemAdapter = new MenuItemAdapter(getActivity().getBaseContext(), this.menuItemList);
        lv_menu.setAdapter(menuItemAdapter);
        lv_menu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.i(TAG, "onClick: ");
                if (mOnItemClickListener != null) {
                    if (showTitle) {
                        if (position == 0) {
                            return;
                        }
                    }
                    TextView menu_item = (TextView) view.findViewById(R.id.menu_item);
                    mOnItemClickListener.onItemClick(menu_item, position);
                    dismiss();
                }
            }
        });
        return view;
    }

    public interface OnItemClickListener {
        void onItemClick(TextView menu_item, int position);
    }

    public BottomMenuFragment setOnItemClickListener(@Nullable OnItemClickListener listener) {
        mOnItemClickListener = listener;
        return this;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        Log.i(TAG, "onDestroyView: ");
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        Log.i(TAG, "onAttach: ");
    }

    @Override
    public void onDetach() {
        super.onDetach();
        Log.i(TAG, "onDetach: ");
    }

    @Override
    public void onStart() {
        super.onStart();
        Log.i(TAG, "onStart: ");

        //設定彈出框寬屏顯示，适應螢幕寬度
        DisplayMetrics dm = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
        getDialog().getWindow().setLayout(dm.widthPixels, getDialog().getWindow().getAttributes().height);

        //移動彈出菜單到底部
        WindowManager.LayoutParams wlp = getDialog().getWindow().getAttributes();
        wlp.gravity = Gravity.BOTTOM;
        // wlp.width = WindowManager.LayoutParams.MATCH_PARENT;
        getDialog().getWindow().setAttributes(wlp);
    }

    @Override
    public void onStop() {
        this.getView().setAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.menu_disappear));
        super.onStop();
    }
}           

MenuItemAdapter檔案：

public class MenuItemAdapter extends BaseAdapter {


    private Context context;//運作上下文

    private LayoutInflater listContainer;  //視圖容器

    private List<MenuItem> menuItems;

    public MenuItemAdapter(Context _context, List<MenuItem> _menuItems){
        this.context = _context;
        this.listContainer = LayoutInflater.from(_context);
        this.menuItems = _menuItems;
    }

    @Override
    public int getCount() {
        return this.menuItems.size();
    }

    @Override
    public Object getItem(int position) {
        if(position >= menuItems.size() || position < 0) {
            return null;
        } else {
            return menuItems.get(position);
        }
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View view = convertView;
        if(convertView == null) {
            view = listContainer.inflate(R.layout.menu_item, null);
        }

        MenuItem menuItem = menuItems.get(position);

        TextView textView = (TextView) view.findViewById(R.id.menu_item);
        textView.setText(menuItem.getText());
        if(menuItems.size() == 1) {
            textView.setBackgroundResource(R.drawable.bottom_menu_btn_selector);
        } else if(position == 0) {
            textView.setBackgroundResource(R.drawable.bottom_menu_top_btn_selector);
        } else if(position < menuItems.size() - 1) {
            textView.setBackgroundResource(R.drawable.bottom_menu_mid_btn_selector);
        } else {
            textView.setBackgroundResource(R.drawable.bottom_menu_bottom_btn_selector);
        }
        if(menuItem.getStyle() == MenuItem.MenuItemStyle.COMMON) {
            textView.setTextColor(ContextCompat.getColor(context, R.color.bottom_menu_btn_text_commom_color));
        } else {
            textView.setTextColor(ContextCompat.getColor(context, R.color.bottom_menu_btn_text_stress_color));
        }
        return view;
    }
}           

MenuItem檔案：

public class MenuItem {
    public MenuItem() {

    }

    /**
     * @param _item_name               菜單項名稱
     * @param _text                    菜單項顯示内容
     * @param _style                   菜單類型
     */
    public MenuItem(String _item_name, String _text, MenuItemStyle _style) {
        this.item_name = _item_name;
        this.text = _text;
        this.style = _style;
    }

    public MenuItem(String _text, MenuItemStyle _style) {
        this.text = _text;
        this.style = _style;
    }

    public MenuItem(String _text) {
        this.text = _text;
    }

    private String item_name;
    private String text;
    private MenuItemStyle style = MenuItemStyle.COMMON;

    public String getItem_name() {
        return item_name;
    }

    public String getText() {
        return text;
    }

    public MenuItemStyle getStyle() {
        return style;
    }

    public void setItem_name(String item_name) {
        this.item_name = item_name;
    }

    public void setText(String text) {
        this.text = text;
    }

    /**
     * @param style 菜單類型
     */
    public void setStyle(MenuItemStyle style) {
        this.style = style;
    }

    public enum MenuItemStyle {
        COMMON, STRESS
    }

}           

總結

代碼整體滿足了一句話搞定高仿ios底部彈出提示框的功能，當然，

有了需求才有了功能，有了想法才有了創作，你的回報會是使我進步的最大動力。

覺得還不夠友善？還想要什麼功能？告訴我！歡迎回報，歡迎Star。源碼入口：

BottomMenu-GitHub項目位址