打造原生的图文混排控件

随着互联网的发展，信息展示的元素越来越丰富，无论是PC端，还是移动端，图文混排已经成为一种通用的信息展示方式，但在各个平台却都没有提供这种原生的控件。为了更方便地在开发中展示丰富的文本信息，便自定义了这个图文混排控件。

思想

普通的图文混排，无非就两种元素：文字和图片。根据这种特点，我们可以自定义协议，如图片的的网址以\img_url\来引用。根据这种协议就可以将整个文章进行分段，然后动态地创建控件（TextView和ImageView）加载数据即可。

协议

文本不需要协议规定，图片网址用\img_url\的形式引用（协议自己定义）。
PS：对于文章中文字部分的或要做特殊处理。

实现

根据上面的思想，将很容易实现原生的图片混排控件，我们只需要自定义一个LinearLayout, 在其中动态加载布局即可。

step1: 将文章进行分段

没错，使用正则表达式根据上面的协议便可对文章进行分段：

 private final String imageRegex = "<img>(.*?)</img>";/*** 设置图文混排控件要显示的内容* @param content 要显示的内容*/public void setContent(String content) {// 格式化字符串(替换特殊符号)String text = null;// 设置子View水平居中setGravity(Gravity.CENTER_HORIZONTAL);Pattern pattern = Pattern.compile(imageRegex);Matcher matcher = pattern.matcher(content);while (matcher.find()) {// 加载文字text = content.substring(startPos, matcher.start());if (!TextUtils.isEmpty(text)) {appendTextView(clearNewlineChar(text));}// 加载图片appendImageView(content.substring(matcher.start() + 5, matcher.end() - 6));startPos = matcher.end();}// 加载最后一个图片后面的文字text = content.substring(startPos);if (!TextUtils.isEmpty(text)) {appendTextView(clearNewlineChar(text));}
}

step2: 加载分段后的文字部分

/*** 动态添加文本内容* @param content*/
private void appendTextView(String content) {if (!TextUtils.isEmpty(content)) {TextView textView = new TextView(context);textView.setTextIsSelectable(true);textView.setText(content);textView.setGravity(Gravity.LEFT);textView.getPaint().setTextSize(42);textView.setLineSpacing(0, 1.4f);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);params.bottomMargin = dpToPx(12);params.leftMargin = dpToPx(10);params.rightMargin = dpToPx(10);textView.setLayoutParams(params);addView(textView);}
}

step3: 加载分段后的图片部分

/*** 动态添加图片* @param imageUrl*/
private void appendImageView(String imageUrl) {ImageView imageView = new ImageView(context);final int screenWidth = getDeviceScreenWidth();LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(screenWidth, (int) (screenWidth * 2.0 / 3));params.bottomMargin = dpToPx(12);imageView.setLayoutParams(params);ImageLoader.getInstance().displayImage(imageUrl, imageView);addView(imageView);
}

源码

public class MixedTextImageLayout extends LinearLayout {private int startPos = 0;private Context context;private final String articleRegex =  "((<img>(.*?)</img>)|(\\{poi\\}(.*?)\\{/poi\\}))";private final String imageRegex = "<img>(.*?)</img>";public MixedTextImageLayout(Context context) {super(context);this.context = context;setOrientation(VERTICAL);}public MixedTextImageLayout(Context context, AttributeSet attrs) {super(context, attrs);this.context = context;setOrientation(VERTICAL);}public MixedTextImageLayout(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.context = context;setOrientation(VERTICAL);}/*** 设置图文混排控件要显示的内容* @param content 要显示的内容*/public void setContent(String content) {// 格式化字符串(替换特殊符号)String text = null;setGravity(Gravity.CENTER_HORIZONTAL);Pattern pattern = Pattern.compile(imageRegex);Matcher matcher = pattern.matcher(clearNeedlessChars(content));while (matcher.find()) {text = content.substring(startPos, matcher.start());if (!TextUtils.isEmpty(text)) {appendTextView(clearNewlineChar(text));}appendImageView(content.substring(matcher.start() + 5, matcher.end() - 6));startPos = matcher.end();}text = content.substring(startPos);if (!TextUtils.isEmpty(text)) {appendTextView(clearNewlineChar(text));}}/*** 动态添加文本内容* @param content*/private void appendTextView(String content) {if (!TextUtils.isEmpty(content)) {TextView textView = new TextView(context);textView.setTextIsSelectable(true);textView.setText(content);textView.setGravity(Gravity.LEFT);textView.getPaint().setTextSize(42);textView.setLineSpacing(0, 1.4f);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);params.bottomMargin = dpToPx(12);params.leftMargin = dpToPx(10);params.rightMargin = dpToPx(10);textView.setLayoutParams(params);addView(textView);}}/*** 动态添加图片* @param imageUrl*/private void appendImageView(String imageUrl) {ImageView imageView = new ImageView(context);final int screenWidth = getDeviceScreenWidth();LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(screenWidth, (int) (screenWidth * 2.0 / 3));params.bottomMargin = dpToPx(12);imageView.setLayoutParams(params);ImageLoader.getInstance().displayImage(imageUrl, imageView);addView(imageView);}/*** 清除多余的字符* @param str* @return*/private String clearNeedlessChars(String str) {str = str.replaceAll("&amp;","&");str = str.replaceAll("&quot;","\"");  //"str = str.replaceAll("&nbsp;&nbsp;","\t");// 替换跳格str = str.replaceAll("&nbsp;"," ");// 替换空格str = str.replaceAll("&lt;","<");str = str.replaceAll("&gt;",">");str = str.replaceAll("\r","");str = str.replaceAll("\n","");str = str.replaceAll("\t","");return str;}/*** 清除多余的尾部换行符 注意：replaceFirst不会替换字符串本身的内容* @param content* @return*/private String clearNewlineChar(String content) {int startPos = 0;int endPos = content.length() - 1;// 清除文字首部多余的换行符while (startPos <= endPos) {if (content.charAt(startPos) == '\n' || content.charAt(startPos) == '\r') {startPos++;// 当所有内容都是换行符的情况if (startPos > endPos) {content = "";endPos -= startPos;break;}} else {// 获取清除后的字符串，并重新设置尾部位置content = content.substring(startPos);endPos -= startPos;break;}}// 清除文字尾部多余的换行符while (endPos > 0) {if (content.charAt(endPos) == '\n' || content.charAt(endPos) == '\r') {endPos--;} else {content = content.substring(0, endPos+1);break;}}return content;}/*** 获取屏幕宽度* @return*/public int getDeviceScreenWidth() {DisplayMetrics dm = getResources().getDisplayMetrics();int w = dm.widthPixels;int h = dm.heightPixels;return w > h ? h : w;}/*** dp转px* @param dp* @return*/public int dpToPx(int dp) {return (int) (getResources().getDisplayMetrics().density * ((float) dp)+0.5);}
}

使用

在布局文件中定义之后，代码中直接调用setContent()方法设置内容即可。

 mixedLayout = (MixedTextImageLayout) findViewById(R.id.mixed_layout);mixedLayout.setContent(content);

效果

总结

其实图文混排有多种方式可以实现，最常用的可能就是直接用WebView加载了，简单易用且样式丰富，但是对移动端而言，交互相对较难。所以具体使用哪种方式，还是要根据需求进行取舍。当然，这种方式除了加载文字和图片之外，也可以加载其他布局（需要对代码进行扩展）。