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

青蛙要fly

发布于 2018-08-29 15:01:04

8770

发布于 2018-08-29 15:01:04

文章被收录于专栏：青蛙要fly的专栏青蛙要fly的专栏

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

内容包括：自定义View，Databinding及与自定义View的双向绑定，图片及文字上传 等

自定义View

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

布局：

箭头的问题：

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

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

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

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

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

但是也有问题：

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

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

我们既然要中间可以输入，我们中间就统一放入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

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

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

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

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

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:关于这个库，有二个地方要注意：

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年09月21日，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度