项目需求讨论-APP中提交信息及编辑信息界面及功能

项目需求讨论-APP中提交信息及编辑信息界面及功能_第1张图片

好久好久没写文章了,这次我们来讨论下一些具有填写很多资料的界面,或者详情编辑界面等如何做起来更方便。
(PS:我写的可能不好,希望大家不好喷,哈哈,可以留言)

内容包括:自定义ViewDatabinding及与自定义View的双向绑定图片及文字上传


自定义View

我们来看下一个一般的提交的界面会长什么样(我写的很简单,就写了四项,有时候七八项或者更多很正常):
如图所示:

布局:

  1. 箭头的问题:
    项目需求讨论-APP中提交信息及编辑信息界面及功能_第2张图片

    一般来是<左边标题>,然后<中间内容><右边箭头>。前二个没问题,没有箭头显示,我们点击中间的时候,直接跳出来系统键盘,直接输入文字内容。而箭头一般用在什么地方呢,提示我们这一项是用来跳转或者点击弹出选择框等,比如我们的日期点击是这样的:
    项目需求讨论-APP中提交信息及编辑信息界面及功能_第3张图片

    所以在不同的item中控制显示是否有箭头
    上面这个布局很简单,我们可以这么写:

    
    
    

然后每一项都这么写一个LinearLayout,然后如果没有<右边的箭头>,我们可以把去掉,但明显很不方便。

  1. 文字颜色的问题:
    我们发现<左边标题>的字体颜色肯定不会发生变化,但是<中间内容>的字体颜色会发生改变,当没内容,显示的是默认的提示语,颜色是一种美工规定好的浅色,然后当我们通过键盘手动输入内容,或者是时间选择框选择了时间,我们的<中间内容>的颜色就会变成美工规定好的深色。给人一眼看过去就知道已经填好了内容。

  2. <中间内容>的点击事件:
    我们知道如果是输入内容的,我们应该是点击后出来系统键盘,然后我们打字输入,但如果是点击出来类似日期选择器,我们就不应该是出来键盘,而是出来选择框,然后选择了之后,<中间内容>变成我们选择好的内容。

如果我们的项目中也有这种类似的item,而且有很多,单纯的LinearLayout分别包裹很多个TextView 和ImageView就很麻烦。主要还是layout的代码会显得很多很多,很臃肿,维护起来也不清晰。


一般我们都会用自定义View来处理,市面上有很多这类类似的第三方:SuperTextView , LSettingView等

但是也有问题:

  1. 比如SuperTextView 因为设计的时候是面向很多开发者,所以很多功能都要考虑进去,但是我们实际开发时候并不需要这么强大的功能。我引入这个,实际上有点大材小用,而且扩展不好,毕竟如果有点定制化需求,你要去改别人的代码。
  2. 他们一般都是用于固定内容的显示,而不是中间是可输入的内容。
  3. 很多人就是直接引入,直接使用,而不是去看如何实现的。

所以我也根据我的项目封装了一个,可能扩展性并不符合各个项目,但是功能简单,代码少,只需要符合我的项目即可:

项目需求讨论-APP中提交信息及编辑信息界面及功能_第4张图片

我们既然要中间可以输入,我们中间就统一放入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,所以我们可以看到结构:

项目需求讨论-APP中提交信息及编辑信息界面及功能_第5张图片

其实我们可以直接继承RelativeLayout后可以添加一个个添加TextView ,ImageView等,这样可以少掉一层。我这二层这么干就是为了省事。哈哈。

所以再回头看看我们的上面实现的布局只需要:


        
        

我们用app:isedit来控制这个中间的EditText是直接输入文字,还是执行点击事件:

xxxx.setLEditOnClickListener(new LEditTextItem.LEditOnclickListener() {
    @Override
    public void onClick() {
        //弹出日期选择框     
    }
});

PS:我用的选择框库:Bigkoo/Android-PickerView


Databinding

我们知道一般我们会有这二种情况(我以一个用户基本信息界面为例):

  1. 第一次进入,该界面的内容都是空的,然后我们该键盘输入的输入,该选择框选择的就选择,然后有相应的内容,然后再上传提交
  2. 后来进入,先加载以前已经上传过的基本信息,然后再针对性的去更改其中某一项,然后保存上传,去更新。

其实二种情况可以合为一种:进来的时候加载该用户的基本信息,然后更改后保存。(第一次添加可以理解为进来加载的用户基本信息为空内容即可)

然后你们可能就要大段大段的这样处理:

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 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件

项目需求讨论-APP中提交信息及编辑信息界面及功能_第6张图片

PS:关于这个库,有二个地方要注意:

  1. 我们默认的是新增用户信息,所以显示的是本地的图片,但有时候我们是要编辑用户信息,那进来的时候就要先用这个库加载服务器上的图片,这个第三方也是可以的。然后我们可以再去删除老的图片,然后新增新的图片,再上传,具体方法我就不说了,有需要的可以询问我。
  2. 默认加载的图片是本地图片没问题,但是如果是加载网络图片,或者是服务器上指定的图片,如果是要有权限才能查看的图片,就要修改这个库中加载图片的源码,因为我配合的是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);

就这样,文字内容和图片我们都上传成功了。我可能写的很简略,有问题我可以后面修改仔细点。哈哈。

你可能感兴趣的:(项目需求讨论-APP中提交信息及编辑信息界面及功能)