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

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

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


自定义View

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

布局:

  1. 箭头的问题:

一般来是<左边标题>,然后<中间内容><右边箭头>。前二个没问题,没有箭头显示,我们点击中间的时候,直接跳出来系统键盘,直接输入文字内容。而箭头一般用在什么地方呢,提示我们这一项是用来跳转或者点击弹出选择框等,比如我们的日期点击是这样的:

所以在不同的item中控制显示是否有箭头。 上面这个布局很简单,我们可以这么写: <LinearLayout> <TextView/> <EditText /> <ImageView/> </LinearLayout>复制代码 然后每一项都这么写一个LinearLayout,然后如果没有<右边的箭头>,我们可以把去掉,但明显很不方便。

  1. 文字颜色的问题: 我们发现<左边标题>的字体颜色肯定不会发生变化,但是<中间内容>的字体颜色会发生改变,当没内容,显示的是默认的提示语,颜色是一种美工规定好的浅色,然后当我们通过键盘手动输入内容,或者是时间选择框选择了时间,我们的<中间内容>的颜色就会变成美工规定好的深色。给人一眼看过去就知道已经填好了内容。
  2. <中间内容>的点击事件: 我们知道如果是输入内容的,我们应该是点击后出来系统键盘,然后我们打字输入,但如果是点击出来类似日期选择器,我们就不应该是出来键盘,而是出来选择框,然后选择了之后,<中间内容>变成我们选择好的内容。

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


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

但是也有问题:

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

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

我们既然要中间可以输入,我们中间就统一放入EditText。我们就取名为LEditTextItem:

ledit_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="#FFFFFF"
    android:gravity="center_vertical"
    >

    <TextView
        android:id="@+id/tv_lefttext"
        android:layout_width="85dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="6dp"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:textSize="15sp"
        tools:text="标题标题" />

    <EditText
        android:id="@+id/et_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@+id/iv_righticon"
        android:layout_toRightOf="@id/tv_lefttext"
        android:background="@null"
        android:focusable="false"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:textColor="#222"
        android:textColorHint="#666"
        android:textSize="15sp"
        tools:text="内容"
        />


    <ImageView
        android:id="@+id/iv_righticon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:layout_marginRight="6dp"
        android:src="@drawable/righticon" />

    <View
        android:id="@+id/underline"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:background="#99999999" />
</RelativeLayout>复制代码

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等,这样可以少掉一层。我这二层这么干就是为了省事。哈哈。

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

<LEditTextItem
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_height"
        app:hintcontent="请选择XXX"
        app:isedit="true"
        app:showicon="false"
        app:title="XX标题" />

<LEditTextItem
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_height"
        app:hintcontent="请选择日期"
        app:isedit="false"
        app:title="日期" />复制代码

我们用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即可,当然这时候因为是注入值,而且因为是自定义属性的缘故,我们要在代码中写上:

<layout>
<data>
    <variable
        name="bean"
        type="com.xxxx.PersonInfo" />

    <variable
        name="isedit"
        type="Boolean" />
</data>

<com.leon.lib.settingview.LEditTextItem
            android:id="@+id/le_cost_edit"
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_height"
            app:content="@={bean.name}"
            app:hintcontent="请输入YYY"
            app:isedit="@{isedit}"
            app:showicon="false"
            app:title="YY标题" />

</layout>复制代码

所以那我们就不需要去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:关于这个库,有二个地方要注意:

  1. 我们默认的是新增用户信息,所以显示的是本地的图片,但有时候我们是要编辑用户信息,那进来的时候就要先用这个库加载服务器上的图片,这个第三方也是可以的。然后我们可以再去删除老的图片,然后新增新的图片,再上传,具体方法我就不说了,有需要的可以询问我。
  2. 默认加载的图片是本地图片没问题,但是如果是加载网络图片,或者是服务器上指定的图片,如果是要有权限才能查看的图片,就要修改这个库中加载图片的源码,因为我配合的是Glide,所以我在这里要对这个Glide附上Cookie,才能正确显示网络图片,不然加载不出来。可以参考Glide加载需要权限验证的图片Url,如果也要用到这个库的,可以询问我怎么处理。

最后我们就到了上传照片的一步了。其实上传照片不难: 我们通过上面的第三方控件,可以获取到所有图片的路径,然后我们先把图片压缩都压缩,再去上传到服务器,不然现在的图片都太大了,会很慢及浪费客户时间:

//图片压缩并上传
ArrayList<File> 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<File>() {
            @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<MultipartBody.Part> 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<HttpResult<Boolean>> saveCostDetailInfo(@PartMap() Map<String, RequestBody> info, @Part() List<MultipartBody.Part> parts);复制代码

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android常用基础

基于zxing的二维码扫描

现在的应用中二维码扫描已经成为一个应用必不可少的功能,现在大部分Android二维码扫描都是基于zxing和Zbar,这文章就来介绍一下基于zxing的二维码扫...

3932
来自专栏学海无涯

Android开发之那些好用的数据结构与API(二)

在 Android开发之那些好用的数据结构与API 一文中提到了Android中一些好用的数据结构和API,这次继续补充几个我在项目中用到的好用的但是不是人人都...

3546
来自专栏Samego开发资源

简单快捷的退出APP应用

1867
来自专栏everhad

View事件分发

NOTE: 笔记,碎片式内容 控件 App界面的开主要就是使用View,或者称为控件。View既绘制内容又响应输入,输入事件主要就是触摸事件。 ViewTree...

2776
来自专栏一个会写诗的程序员的博客

使用 Kotlin 开发 Android 应用 | 8 个最优秀的 Android Studio 插件 Kotlin Android 素材butterknife8 个最优秀的 Android

http://jakewharton.github.io/butterknife/

3453
来自专栏非著名程序员

Android自定义ViewGroup神器-ViewDragHelper

? 投稿作者:zhuhf 原文链接:http://www.jianshu.com/p/111a7bc76a0e 特别声明:本文为zhuhf原创并授权发布,未经...

3345
来自专栏潇涧技术专栏

Android Universal Image Loader

最近在阅读Coding的安卓客户端源码,因为该源码的图片加载库使用的是universal-image-loader,我以前也使用过,但是没总结过,所以这次好好研...

822
来自专栏非著名程序员

Android新组件RecyclerView介绍,其效率更好

RecyclerView介绍 非著名程序员 ? 今天我们首先来说为什么要介绍这个新组件RecyclerView,因为前几天我发布了一个常用面试题ListVie...

2099
来自专栏移动端开发

Android学习--ListView

这篇文章用于总结自己这两天学到的安卓的ListView和RecyclerView 的笔记,以及从我这个iOS开发者的角度去理解和学习这两个控件,会比较一下他们个...

2289
来自专栏腾讯Bugly的专栏

Android APP 快速 Pad 化实现

如何能在最快的时间内,实现一个最新版本 Android app 的 pad 化呢?从拿到一个大型手机 app 代码开始开发到第一个其全新 pad 版本的发布,我...

6206

扫码关注云+社区

领取腾讯云代金券