项目实战:自定义View实现右上角更多,让页面更简洁
2017-05-27 16:41
435 查看
从APP页面的视觉设计上考虑,一个页面呈现的元素不能太多,最好一个页面只做一件事,干净整洁,这时,我们可以考虑将一些功能收入右上角更多中,今天我们通过一个自定义View快速实现右上角更多功能,让页面更简洁,产品更优雅。
如图,以我们专车的费用明细为例,改版后页面更简洁了有木有,至于有些功能收的是否合理,我们另做讨论。
我们先把地基打扎实,写一下我们的核心,自定义View MoreWidget:
MoreWidget继承自RelativeLayout,里面有一个View和一个ListView:
View是一个覆盖全屏幕的透明蒙版,作用是你点击屏幕可以隐藏更多。
ListView的作用就是储存更多里的一个个item。
布局文件:
ps:android:layout_marginTop="@dimen/dd_dimen_88px"这里写死了,88px是我们标题栏的高度,后期优化,会实现动态调整。
MoreWidgetItem源代码如下,属性包括图片id/url,内容,点击后的回调。
ps:根据需要可以自行扩写哈。
MoreWidgetAdapter源代码如下,继承自ArrayAdapter,里面是一个个MoreWidgetItem。
ps: url载因为涉及到Sdk.image(),这个可以单写一篇博客,本次不做,后期补上。
MoreWidget其他部分源代码:
底层实现后,我们在BaseActivity中开一个口,方便子类调用:
地基打扎实后,使用起来就非常方便了,三步把它用起来:
1.在页面的布局最下面 include : base_title_more_layout
2.调用BaseActivity initTitleMore()方法,初始化more
3.调用BaseActivity addTitleMoreItem()方法,添加 Item
三个参数分别为:图片资源id,显示的文案,点击item后的操作。、
更多,走你。
原创不易,转载请注明出处哈。
权兴权意
产品可以更优雅~
项目源代码,欢迎提建议(star)。
https://github.com/HXQWill/QuanStudy/commit/f363f2fcf562a65f2e4cb47dc4f3f9df01e84a58
如图,以我们专车的费用明细为例,改版后页面更简洁了有木有,至于有些功能收的是否合理,我们另做讨论。
我们先把地基打扎实,写一下我们的核心,自定义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
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
相关文章推荐
- 猫猫学iOS 之微博项目实战(11)发送微博自定义TextView实现带占位文字
- Android绘图机制(三)——自定义View的三种实现方式以及实战项目操作
- AJ学IOS 之微博项目实战(11)发送微博自定义TextView实现带占位文字
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- Android 手把手教您自定义ViewGroup(二) 实战篇 -> 实现FlowLayout
- Android实战简易教程-第二十六枪(基于ViewPager实现微信页面切换效果)
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(二)
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- 猫猫学iOS 之微博项目实战(7)程序启动新特性用UICollectionViewController实现
- iOS项目开发小技巧 (三) --UITableView实现Cell左划删除等自定义功能
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(一)
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- iOS项目开发实战——Swift实现多个TableView的侧滑与切换
- C# Asp.Net MVC 3 项目实现控制器(controller)与页面(view)分项目管理
- Android开发实战2----圆点导航指示器(使用自定义View实现)
- 利用自定义View实现头像截取页面
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- Android实战简易教程-第三十三枪(自定义View实现控件晃动提示效果)