Android仿知乎图文混排发帖

今日需要实现一个发帖功能，找了些APP进行参考，最终选择知乎图文混排的形式发帖，用户体验感更好。

看了知乎源码才知道，知乎的发帖是用webview实现的，我们需要原生开发，得自己写一个。

先说下实现思路：

我们肯定只能用editText控件来实现，那你必须得知道ImageSpan和SpannableString这个两个工具类。

我们从相册或照相后得到图片的本地地址，转换成bitmap后传给服务器，然后上传成功后服务器会返回

当前图片的网络地址，我们把网络地址放在img标签的src中，就可以实现了。最终将editText的字符串

上传给服务器，后台会帮你生成一个HTML，如果你自己来写也是可以的。

由于我是直接写在我们项目里的，把代码贴出来：

先看布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.globalauto_vip_service.community.Issue_Activity">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="插入图片一" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="插入图片二" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="插入图片三" />
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交" />

</LinearLayout>
<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    <EditText
        android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    </LinearLayout>

</ScrollView>
</LinearLayout>

部分代码:

打开相册选择图片，得到图片的本地地址

private void InSertIMG2(int i) {
    boolean isKitKatO = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
    Intent getAlbum;
    if (isKitKatO) {
        getAlbum = new Intent(Intent.ACTION_OPEN_DOCUMENT);
    } else {
        getAlbum = new Intent(Intent.ACTION_GET_CONTENT);
    }
    getAlbum.setType("image/*");

    startActivityForResult(getAlbum, 0);

}

得到图片地址后应该先上传到服务器，然后在src中写入服务器返回的当前图片地址，我这里就模拟了个网络图片地址

现在手机相册的图片都非常大，建议压缩后再放到editText中，不然有点卡，怎么压缩自己搜索，这里没有写

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    Bitmap bm = null;
    ContentResolver resolver = getContentResolver();

    if (requestCode == 0) {
        try {
            Uri originalUri = data.getData();  //获得图片的uri
            //bitmapUri = originalUri;
            bm = MediaStore.Images.Media.getBitmap(resolver, originalUri);
            //显得到bitmap图片
            bm = Bitmap.createBitmap(bm, 0, 0, bm.getWidth(), bm.getHeight());
            ImageSpan imageSpan = new ImageSpan(Issue_Activity.this, bm);

            String tempUrl = "<img src=\"" + images[k] + "\" />";
            SpannableString spannableString = new SpannableString(tempUrl);

            spannableString.setSpan(imageSpan, 0, tempUrl.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 将选择的图片追加到EditText中光标所在位置
            int index = et.getSelectionStart();
            // 获取光标所在位置
            Editable edit_text = et.getEditableText();
            if (index < 0 || index >= edit_text.length()) {
                edit_text.append(spannableString);
                edit_text.insert(index + spannableString.length(), "\n");
            } else {
                edit_text.insert(index, spannableString);
                edit_text.insert(index + spannableString.length(), "\n");
            }
            // et.setSelection(et.length());
            ll.clearFocus();
            ll.setFocusable(true);
            ll.setFocusableInTouchMode(true);
            ll.requestFocus();
            handler.sendEmptyMessage(0);
        } catch (Exception e) {
        }

    }
}

Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what) {
            case 0:
                scrollView.fullScroll(ScrollView.FOCUS_DOWN);
                break;
            default:

                break;
        }
    }
};

这是最佳的方式实现了，我将代码贴出来，你们复制粘贴进去就可以用了。 

待完善地方：图片压缩上传给服务器、压缩图片放入editText中。

如何进行展示：

1，后台帮你生成对应的Html。

2,自己用textview进行处理后展示。

源码地址：点击打开链接

//------end-------