好久好久没写文章了,这次我们来讨论下一些具有填写很多资料的界面,或者详情编辑界面等如何做起来更方便。
(PS:我写的可能不好,希望大家不好喷,哈哈,可以留言)
内容包括:自定义View,Databinding及与自定义View的双向绑定,图片及文字上传 等
自定义View
我们来看下一个一般的提交的界面会长什么样(我写的很简单,就写了四项,有时候七八项或者更多很正常):
如图所示:
布局:
- 箭头的问题:
一般来是<左边标题>,然后<中间内容>,<右边箭头>。前二个没问题,没有箭头显示,我们点击中间的时候,直接跳出来系统键盘,直接输入文字内容。而箭头一般用在什么地方呢,提示我们这一项是用来跳转或者点击弹出选择框等,比如我们的日期点击是这样的:
所以在不同的item中控制显示是否有箭头。
上面这个布局很简单,我们可以这么写:
然后每一项都这么写一个LinearLayout
,然后如果没有<右边的箭头>,我们可以把
文字颜色的问题:
我们发现<左边标题>的字体颜色肯定不会发生变化,但是<中间内容>的字体颜色会发生改变,当没内容,显示的是默认的提示语,颜色是一种美工规定好的浅色,然后当我们通过键盘手动输入内容,或者是时间选择框选择了时间,我们的<中间内容>的颜色就会变成美工规定好的深色。给人一眼看过去就知道已经填好了内容。<中间内容>的点击事件:
我们知道如果是输入内容的,我们应该是点击后出来系统键盘,然后我们打字输入,但如果是点击出来类似日期选择器,我们就不应该是出来键盘,而是出来选择框,然后选择了之后,<中间内容>变成我们选择好的内容。
如果我们的项目中也有这种类似的item,而且有很多,单纯的LinearLayout分别包裹很多个TextView 和ImageView就很麻烦。主要还是layout的代码会显得很多很多,很臃肿,维护起来也不清晰。
一般我们都会用自定义View来处理,市面上有很多这类类似的第三方:SuperTextView , LSettingView等
但是也有问题:
- 比如SuperTextView 因为设计的时候是面向很多开发者,所以很多功能都要考虑进去,但是我们实际开发时候并不需要这么强大的功能。我引入这个,实际上有点大材小用,而且扩展不好,毕竟如果有点定制化需求,你要去改别人的代码。
- 他们一般都是用于固定内容的显示,而不是中间是可输入的内容。
- 很多人就是直接引入,直接使用,而不是去看如何实现的。
所以我也根据我的项目封装了一个,可能扩展性并不符合各个项目,但是功能简单,代码少,只需要符合我的项目即可:
我们既然要中间可以输入,我们中间就统一放入EditText。我们就取名为LEditTextItem:
ledit_layout.xml:
LEditTextItem.java:
public class LEditTextItem extends RelativeLayout{
private Context mContext;
private ImageView ivIcon;
private TextView tvTitle;
private EditText etContent;
private LEditOnclickListener listener;
private boolean isedit;
public LEditTextItem(Context context) {
super(context);
mContext = context;
initView();
}
public LEditTextItem(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
initView();
float defaultTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, mContext.getResources().getDisplayMetrics());
TypedArray array = mContext.obtainStyledAttributes(attrs, R.styleable.LEditTextItem);
String title = array.getString(R.styleable.LEditTextItem_title);
float titleSize = array.getDimension(R.styleable.LEditTextItem_title_size, defaultTextSize);
int titleColor = array.getColor(R.styleable.LEditTextItem_title_color, Color.parseColor("#666666"));
String content = array.getString(R.styleable.LEditTextItem_content);
float contentSize = array.getDimension(R.styleable.LEditTextItem_content_size, defaultTextSize);
int contentColor = array.getColor(R.styleable.LEditTextItem_content_color, Color.parseColor("#222222"));
String hintContent = array.getString(R.styleable.LEditTextItem_hintcontent);
int hintColor = array.getColor(R.styleable.LEditTextItem_hintcontent_color, Color.parseColor("#999999"));
boolean showIcon = array.getBoolean(R.styleable.LEditTextItem_showicon, true);
boolean isEditable = array.getBoolean(R.styleable.LEditTextItem_isedit, false);
ivIcon.setVisibility(showIcon ? View.VISIBLE : View.GONE);
tvTitle.setText(title);
tvTitle.setTextColor(titleColor);
tvTitle.getPaint().setTextSize(titleSize);
etContent.setText(content);
etContent.getPaint().setTextSize(contentSize);
etContent.setTextColor(contentColor);
etContent.setHint(hintContent);
etContent.setHintTextColor(hintColor);
etContent.setFocusableInTouchMode(isEditable);
etContent.setLongClickable(false);
etContent.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (listener != null) {
listener.onClick();
}
}
});
}
public void initView() {
View view = LayoutInflater.from(mContext).inflate(R.layout.ledit_layout, this);
ivIcon = (ImageView) view.findViewById(R.id.iv_righticon);
tvTitle = (TextView) view.findViewById(R.id.tv_lefttext);
etContent = (EditText) view.findViewById(R.id.et_content);
}
public void setIconVisible(int visible) {
ivIcon.setVisibility(visible);
}
public void setContentStr(String content) {
etContent.setText(content);
}
public String getContentStr() {
return etContent.getText().toString().trim();
}
public EditText getContentEt() {
return etContent;
}
public void setIsedit(boolean isedit) {
this.isedit = isedit;
etContent.setFocusableInTouchMode(isedit);
}
public interface LEditOnclickListener {
void onClick();
}
public void setLEditOnClickListener(LEditOnclickListener listener) {
this.listener = listener;
etContent.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (LEditTextItem.this.listener != null) {
LEditTextItem.this.listener.onClick();
}
}
});
}
}
其实就是最简单的根据传入不同的属性值,来控制我们的这个item是否显示<右边箭头>,<中间内容>是直接输入还是点击事件,<左边标题>和<中间内容>的字体颜色、字体大小等。
这里我们注意到了。我们的自定义View直接继承了RelativeLayout,然后往这个里面添加了我们的layout,然后我们的layout里面也是用了Relativelayout,所以我们可以看到结构:
其实我们可以直接继承RelativeLayout后可以添加一个个添加TextView ,ImageView等,这样可以少掉一层。我这二层这么干就是为了省事。哈哈。
所以再回头看看我们的上面实现的布局只需要:
我们用app:isedit
来控制这个中间的EditText是直接输入文字,还是执行点击事件:
xxxx.setLEditOnClickListener(new LEditTextItem.LEditOnclickListener() {
@Override
public void onClick() {
//弹出日期选择框
}
});
PS:我用的选择框库:Bigkoo/Android-PickerView
Databinding
我们知道一般我们会有这二种情况(我以一个用户基本信息界面为例):
- 第一次进入,该界面的内容都是空的,然后我们该键盘输入的输入,该选择框选择的就选择,然后有相应的内容,然后再上传提交
- 后来进入,先加载以前已经上传过的基本信息,然后再针对性的去更改其中某一项,然后保存上传,去更新。
其实二种情况可以合为一种:进来的时候加载该用户的基本信息,然后更改后保存。(第一次添加可以理解为进来加载的用户基本信息为空内容即可)
然后你们可能就要大段大段的这样处理:
EditText et = (EditText)findViewById(R.id.xx);
//获取用户基本信息
PersonInfo bean = .......
et.setText(bean.xxxx);
//按了保存按钮后
String newStr = et.getText().toString();
//上传新的newStr内容
如果有十项,你就要写10个findViewById()
,10个setText()
,10个getText()
;
这时候当然需要我们的神器:Databinding
基本知识我就不介绍了,网上很多写的很好的文章:
DataBinding使用教程(一):配置与基本使用
DataBinding使用教程(二):xml标签详解
DataBinding使用教程(三):各个注解详解
DataBinding使用教程(四):BaseObservable与双向绑定
我们如果使用了双向绑定,那我们当通过结果获取到了PersonInfo的bean对象后,不需要专门的每个去setText,我们只需要在我们的自定义控件处添加app:content
即可,当然这时候因为是注入值,而且因为是自定义属性的缘故,我们要在代码中写上:
所以那我们就不需要去setText,也不需要重新去getText。
当内容发生变化后,我们代码中的bean对象的这个属性的值也会相应的发生变化。我们最后只要提交的时候直接用我们代码中的PersonInfo的bean对象即可,不需要重新去getText内容。
普通的EditText当然很方便,只需要:
android:text = "@={bean.xxx}"
但是我们这里是自定义View,所以我们要实现双向绑定,我们就要自己写方法来实现:
具体可以再参考别人的优秀文章:DataBinding双向绑定
LEditTextItem.java:
public class LEditTextItem extends RelativeLayout implements TextWatcher {
private Context mContext;
private ImageView ivIcon;
private TextView tvTitle;
private EditText etContent;
private LEditOnclickListener listener;
private boolean isedit;
public LEditTextItem(Context context) {
super(context);
mContext = context;
initView();
}
public LEditTextItem(Context context, AttributeSet attrs) {
.....
.....
.....
etContent.addTextChangedListener(this);
}
public void initView() {
.....
....
.....
}
public void setIconVisible(int visible) {
ivIcon.setVisibility(visible);
}
public void setContentStr(String content) {
etContent.setText(content);
}
public String getContentStr() {
return etContent.getText().toString().trim();
}
public EditText getContentEt() {
return etContent;
}
public void setIsedit(boolean isedit) {
this.isedit = isedit;
etContent.setFocusableInTouchMode(isedit);
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (onTextChangeListener != null) {
onTextChangeListener.onchange();
}
}
public interface LEditOnclickListener {
void onClick();
}
public void setLEditOnClickListener(LEditOnclickListener listener) {
this.listener = listener;
etContent.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (LEditTextItem.this.listener != null) {
LEditTextItem.this.listener.onClick();
}
}
});
}
@BindingAdapter(value = "content")
public static void setContent(LEditTextItem view, String content) {
String oldContent = view.getContentStr();
if (TextUtils.equals(content, oldContent)) {
return;
}
view.getContentEt().setText(content);
}
@InverseBindingAdapter(attribute = "content", event = "contentAttrChanged")
public static String getContent(LEditTextItem view) {
return view.getContentEt().getText().toString().trim();
}
@BindingAdapter(value = "contentAttrChanged")
public static void setChangeListener(LEditTextItem view, InverseBindingListener listener) {
if (listener != null) {
view.setOnTextChangeListener(listener::onChange);
}
}
OnTextChangeListener onTextChangeListener;
public void setOnTextChangeListener(OnTextChangeListener listener) {
onTextChangeListener = listener;
}
interface OnTextChangeListener {
void onchange();
}
}
这样我们只需要:
//服务器获取信息
PersonInfo bean = xxxxxxx;
binding.setBean(bean);
//提交服务器
post(bean)
图片及文字上传:
我们一般这种界面不仅会上传文字,可能还要上传图片,比如一个个人信息页,说不定还要上传一些照片和图片信息。
现在比较流行跟微信朋友圈的图片差不多。我也是偷懒用的第三方的库:
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
PS:关于这个库,有二个地方要注意:
- 我们默认的是新增用户信息,所以显示的是本地的图片,但有时候我们是要编辑用户信息,那进来的时候就要先用这个库加载服务器上的图片,这个第三方也是可以的。然后我们可以再去删除老的图片,然后新增新的图片,再上传,具体方法我就不说了,有需要的可以询问我。
- 默认加载的图片是本地图片没问题,但是如果是加载网络图片,或者是服务器上指定的图片,如果是要有权限才能查看的图片,就要修改这个库中加载图片的源码,因为我配合的是Glide,所以我在这里要对这个Glide附上Cookie,才能正确显示网络图片,不然加载不出来。可以参考Glide加载需要权限验证的图片Url,如果也要用到这个库的,可以询问我怎么处理。
最后我们就到了上传照片的一步了。其实上传照片不难:
我们通过上面的第三方控件,可以获取到所有图片的路径,然后我们先把图片压缩都压缩,再去上传到服务器,不然现在的图片都太大了,会很慢及浪费客户时间:
//图片压缩并上传
ArrayList outFilesList = new ArrayList<>(files.length);
final File[] outFiles = new File[files.length];
File[] finalFiles = files;
Observable.fromArray(files)
.doOnSubscribe(disposable -> showDialog(AnnotationConfig.DialogType.LOAD_STATUS, "压缩图片中.."))
.subscribeOn(AndroidSchedulers.mainThread())
.subscribeOn(Schedulers.io())
.observeOn(Schedulers.io())
.subscribe(new Observer() {
@Override
public void onSubscribe(Disposable d) {
}
@Override
public void onNext(File file) {
outFilesList.add(BitmapUtil.compressBitmap(aty, file));
}
@Override
public void onError(Throwable e) {
runOnUiThread(() -> {
closeDialog();
showDialog(ERROR_STATUS, "上传图片压缩失败,请重试");
});
}
@Override
public void onComplete() {
runOnUiThread(() -> closeDialog());
for (int i = 0; i < finalFiles.length; i++) {
outFiles[i] = outFilesList.get(i);
}
runOnUiThread(() -> {
//我们在这里再去进行相关的上传操作,infoMap是相关的文字内容信息
presenter.saveCostInfo(infoMap, outFiles);
});
}
});
压缩好的图片进行上传(同时还有文字内容信息):
List photos = new ArrayList<>();
if (files != null && files.length > 0) {
for (int i = 0; i < files.length; i++) {
RequestBody requestFile = RxPartMapUtils.toRequestBodyOfImage(files[i]);
MultipartBody.Part MultipartFile =
MultipartBody.Part.createFormData("picture" + i, files[i].getName(), requestFile);
photos.add(MultipartFile);
}
}
api.saveCostDetailInfo(bean, photos).compose(Transformer.switchSchedulers());
API.java:
@Multipart
@POST(UrlConfig.COST_INFO_SAVE_URL)
Observable> saveCostDetailInfo(@PartMap() Map info, @Part() List parts);
就这样,文字内容和图片我们都上传成功了。我可能写的很简略,有问题我可以后面修改仔细点。哈哈。