一句话搞定高仿ios底部弹出提示框(Android)

  1. 云栖社区>
  2. 博客>
  3. 正文

一句话搞定高仿ios底部弹出提示框(Android)

sakura_echo 2018-11-08 11:20:51 浏览1335
展开阅读全文

最近项目里面用到了底部的弹出提示框,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项目地址

网友评论

登录后评论
0/500
评论
sakura_echo
+ 关注