项目实战：自定义View实现右上角更多，让页面更简洁

从APP页面的视觉设计上考虑，一个页面呈现的元素不能太多，最好一个页面只做一件事，干净整洁，这时，我们可以考虑将一些功能收入右上角更多中，今天我们通过一个自定义View快速实现右上角更多功能，让页面更简洁，产品更优雅。

如图，以我们专车的费用明细为例，改版后页面更简洁了有木有，至于有些功能收的是否合理，我们另做讨论。

费用明细改版前后对比.png

我们先把地基打扎实，写一下我们的核心，自定义View MoreWidget：
MoreWidget继承自RelativeLayout，里面有一个View和一个ListView:
View是一个覆盖全屏幕的透明蒙版，作用是你点击屏幕可以隐藏更多。
ListView的作用就是储存更多里的一个个item。
布局文件：

layout/more_widget_layout.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">

    <View
        android:id="@+id/mark_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ListView
        android:id="@+id/item_list"
        android:layout_width="@dimen/dd_dimen_250px"
        android:layout_marginTop="@dimen/dd_dimen_88px"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:divider="@null"
        android:scrollbars="none" />

</RelativeLayout>

ps:android:layout_marginTop="@dimen/dd_dimen_88px"这里写死了，88px是我们标题栏的高度，后期优化，会实现动态调整。

MoreWidgetItem源代码如下，属性包括图片id/url，内容，点击后的回调。
ps：根据需要可以自行扩写哈。

    class MoreWidgetItem {
        public int iconId;
        public String iconUrl;
        public String content;
        public ClickCallback clickCallback;

        public MoreWidgetItem(String iconUrl, String content, ClickCallback clickCallback) {
            this.iconId = -1;
            this.iconUrl = iconUrl;
            this.content = content;
            this.clickCallback = clickCallback;
        }
        
        public MoreWidgetItem(int iconId, String content, ClickCallback clickCallback) {
            this.iconId = iconId;
            this.content = content;
            this.clickCallback = clickCallback;
        }
    }

MoreWidgetAdapter源代码如下，继承自ArrayAdapter，里面是一个个MoreWidgetItem。

    class MoreWidgetAdapter extends ArrayAdapter<MoreWidgetItem> {

        private Context context;

        public MoreWidgetAdapter(Context context) {
            super(context, 0);
            this.context = context;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            convertView = View.inflate(context, R.layout.more_widget_item_layout, null);
            ImageView image = (ImageView) convertView.findViewById(R.id.item_iv);
            TextView text = (TextView) convertView.findViewById(R.id.text_tv);
            View upline = convertView.findViewById(R.id.line_up);
            View downline = convertView.findViewById(R.id.line_down);
            upline.setVisibility(View.GONE);
            downline.setVisibility(View.GONE);

            if (position < getCount()) {
                if (position == 0) {
                    upline.setVisibility(View.VISIBLE);
                }
                if (position == getCount() - 1) {
                    downline.setVisibility(View.VISIBLE);
                }


                MoreWidgetItem item = getItem(position);
                if (item.iconId > 0) {
                    image.setBackgroundResource(item.iconId);
                } else if(!TextUtils.isEmpty(item.iconUrl)){
//                    Sdk.image().displayImage(item.iconUrl, image);
//Quan TODO: 2017/5/27 url载因为涉及到Sdk.image()，本次不做，后期补上。 
                }

                if (!TextUtils.isEmpty(item.content)) {
                    text.setText(item.content);
                }
            }
            return convertView;
        }
    }

ps: url载因为涉及到Sdk.image()，这个可以单写一篇博客，本次不做，后期补上。

MoreWidget其他部分源代码：

public class MoreWidget extends RelativeLayout implements AdapterView.OnItemClickListener {

    private Context mContext;
    private View mark_layout;
    private ListView item_list;
    private MoreWidgetAdapter adapter;

    public MoreWidget(Context context) {
        super(context);
        this.mContext = context;
        initView();
    }

    public MoreWidget(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        initView();
    }

    private void initView() {
        LayoutInflater.from(mContext).inflate(R.layout.more_widget_layout, this, true);
        mark_layout = findViewById(R.id.mark_layout);
        mark_layout.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                hide();
            }
        });
        item_list = (ListView) findViewById(R.id.item_list);
        adapter = new MoreWidgetAdapter(mContext);
        item_list.setAdapter(adapter);
        item_list.setOnItemClickListener(this);
        setVisibility(GONE);
    }

    public void removeAllItems(){
        adapter.clear();
    }

    public void addItem(int iconId, String content, ClickCallback clickCallback) {
        adapter.add(new MoreWidgetItem(iconId, content, clickCallback));
        adapter.notifyDataSetChanged();
    }

    public void addItem(String iconUrl, String content, ClickCallback clickCallback){
        adapter.add(new MoreWidgetItem(iconUrl, content, clickCallback));
        adapter.notifyDataSetChanged();
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        if (Utils.isFastClick()) {
            return;
        }
        MoreWidgetItem item = adapter.getItem(position);
        if (item != null && item.clickCallback != null) {
            hide();
            item.clickCallback.callback();
        }
    }

    private boolean isShow = false;

    public void show() {
        isShow = true;
        setVisibility(VISIBLE);
    }

    public void hide() {
        isShow = false;
        setVisibility(GONE);
    }

    public boolean isShow() {
        return isShow;
    }

    public interface ClickCallback {
        void callback();
    }
~~~
}

底层实现后，我们在BaseActivity中开一个口，方便子类调用：

    private MoreWidget more_widget;

    public void initTitleMore() {
        ImageView more = (ImageView) findViewById(R.id.more);
        if (more != null) {
            more.setVisibility(View.VISIBLE);
            more_widget = (MoreWidget) findViewById(R.id.more_layout);
            more.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (more_widget != null) {
                        more_widget.show();
                    }
                }
            });
        }
    }

    public void removeAllMoreItem(){
        if (more_widget != null) {
            more_widget.removeAllItems();
        }
    }

    public void addTitleMoreItem(String iconUrl, String content, MoreWidget.ClickCallback clickCallback) {
        if (more_widget != null) {
            more_widget.addItem(iconUrl, content, clickCallback);
        }
    }

    public void addTitleMoreItem(int iconId, String content, MoreWidget.ClickCallback clickCallback) {
        if (more_widget != null) {
            more_widget.addItem(iconId, content, clickCallback);
        }
    }

地基打扎实后，使用起来就非常方便了，三步把它用起来：

1. 在页面的布局最下面 include : base_title_more_layout

    <include
        layout="@layout/base_title_more_layout" />

ps:目前只适用RelativeLayout，其他布局需要调整。

2. 调用BaseActivity initTitleMore()方法，初始化more

3. 调用BaseActivity addTitleMoreItem()方法，添加 Item

        addTitleMoreItem(R.drawable.trip_detail_doubt, getString(R.string.trip_doubt), new MoreWidget.ClickCallback() {
            @Override
            public void callback() {
                gotoNextActivity(TripDoubtActivity.class);
            }
        });

三个参数分别为：
图片资源id，显示的文案，点击item后的操作。、

更多，走你。

原创不易，转载请注明出处哈。
权兴权意
产品可以更优雅~

项目源代码，欢迎提建议（star）。
https://github.com/HXQWill/QuanStudy/commit/f363f2fcf562a65f2e4cb47dc4f3f9df01e84a58