Android实现文本排版

在项目中有一个小功能需要实现，就是对多行文本进行排版布局，每一行的内容又分为两部分，左边为标题，右边为描述，左边内容长度不确定，右边的内容需要对齐，如有换行也需要对齐右边的文本。
一、效果图

可以看到内容分成了两部分，左边的颜色与右边不一致，右边的描述文案统一对齐。
二、实现方案
以上功能，由于输入内容输入行数不确定，并且左边的文案长度也不确定，因此不能直接在布局中实现，基于此这里主要实现了以下6种方式
方案1
采用自定义控件的方式，继承TextView，重新onDraw函数，实现如下：

/** * 计算出左边最长的显示字符串maxLeftWidth，之后draw每一行字符，右边的描述从maxLeftWidth开始draw * 当一行显示不完全时，折行并且空出maxLeftWidth的空格长度 */public class TypographyView1 extends TextView {private Paint leftPaint = new Paint（）;private Paint rightPaint = new Paint（）;private int fullWidth;private float textSize;private JSONArray array;private int middlePadding = 0;float maxLeftWidth = 0;int itemSize = 0;public TypographyView1（Context context） {super（context）;init（）;}public TypographyView1（Context context, AttributeSet attrs） {super（context, attrs）;init（）;}public TypographyView1（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;init（）;}private void init（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;leftPaint.setAntiAlias（true）;leftPaint.setTextSize（textSize）;leftPaint.setColor（getResources（）.getColor（R.color.color_black_999999））;rightPaint.setAntiAlias（true）;rightPaint.setTextSize（textSize）;rightPaint.setColor（getResources（）.getColor（R.color.color_black））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}@Overrideprotected void onSizeChanged（int w, int h, int oldw, int oldh） {super.onSizeChanged（w, h, oldw, oldh）;fullWidth = getWidth（）;// 整个textView的宽度}public void setText（JSONArray array） {this.array = array;if （array ！= null） {try {int size = itemSize = array.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） array.get（i）;String key = o.getString（0）;String value = o.getString（1）;if （TextUtils.isEmpty（key） || TextUtils.isEmpty（value）） {itemSize--;continue;}float curWidth = leftPaint.measureText（key）;if （curWidth > maxLeftWidth） {maxLeftWidth = curWidth;}}maxLeftWidth = maxLeftWidth + middlePadding;invalidate（）;} catch （Exception e） {}}}boolean setHeight = false;@Overrideprotected void onDraw（Canvas canvas） {if （array == null） {return;}int lineCount = 0;try {JSONArray item;float offsetY;for （int i = 0; i < itemSize; ++i） {item = （JSONArray） array.get（i）;offsetY = （lineCount + 1） * textSize;canvas.drawText（item.getString（0）, 0, offsetY, leftPaint）;String value = item.getString（1）;float valueWidth = rightPaint.measureText（value）;if （valueWidth > fullWidth - maxLeftWidth） {// 一行显示不完char[] textCharArray = value.toCharArray（）;float charWidth;float drawWidth = maxLeftWidth;for （int j = 0; j < textCharArray.length; j++） {charWidth = rightPaint.measureText（textCharArray, j, 1）;if （fullWidth - drawWidth < charWidth） {lineCount++;drawWidth = maxLeftWidth;offsetY += textSize;}canvas.drawText（textCharArray, j, 1, drawWidth, offsetY, rightPaint）;drawWidth += charWidth;}} else {canvas.drawText（value, maxLeftWidth, offsetY, rightPaint）;}lineCount += 2;}if （！setHeight） {setHeight（（lineCount + 1） * （int） textSize）;setHeight = true;}} catch （JSONException e） {e.printStackTrace（）;}}}

添加了setText（JSONArray array）作为数据输入，并且在这里面测量了左边title的最大宽度，之后调用invalidate触发重绘，在onSizeChanged获取整个控件的宽度，重绘会调用onDraw函数，这里不需要调用super函数，TextView的onDraw函数做了非常多的操作，解析传入的数据，分别一行一行调用canvas来进行drawText操作，当绘制描述时，先计算宽度，如果超过剩余控件说明需要换行，最后调用setHeight设置高度，这个加一个判断条件，因为会触发requestLayout（）进行重新布局和invalidate（）进行重绘，如果不加判断会一直重绘。
方案2
方式2与方式1差不多，不同为所有计算都在onDraw函数中：

/** * 该方式与方式1很类似，只是所有的计算都放在了onDraw方法中。 */public class TypographyView2 extends TextView {private Paint paint1 = new Paint（）;private Paint paint2 = new Paint（）;private int middlePadding = 0;int width;private float textSize;private JSONArray array;public TypographyView2（Context context） {super（context）;init（）;}public TypographyView2（Context context, AttributeSet attrs） {super（context, attrs）;init（）;}public TypographyView2（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;init（）;}private void init（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;paint1.setAntiAlias（true）;paint1.setTextSize（textSize）;paint1.setColor（getResources（）.getColor（R.color.color_black_999999））;paint2.setAntiAlias（true）;paint2.setTextSize（textSize）;paint2.setColor（getResources（）.getColor（R.color.color_black））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}@Overrideprotected void onSizeChanged（int w, int h, int oldw, int oldh） {super.onSizeChanged（w, h, oldw, oldh）;width = getWidth（）;// 整个textView的宽度}public void setText（JSONArray array） {this.array = array;if （array ！= null） {invalidate（）;}}boolean setHeight = false;@Overrideprotected void onDraw（Canvas canvas） {// super.onDraw（canvas）;int lineCount = 0;int size = array.length（）;float maxLeftWidth = 0;float drawWidth = 0;try {for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） array.get（i）;String key = o.getString（0）;float v = paint1.measureText（key）;if （v > maxLeftWidth） {maxLeftWidth = v;}}maxLeftWidth = maxLeftWidth + middlePadding;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） array.get（i）;String key = o.getString（0）;canvas.drawText（key, 0, （lineCount + 1） * textSize, paint1）;String value = o.getString（1）;char[] textCharArray = value.toCharArray（）;float charWidth;drawWidth = maxLeftWidth;for （int j = 0; j < textCharArray.length; j++） {charWidth = paint1.measureText（textCharArray, j, 1）;if （width - drawWidth < charWidth） {lineCount++;drawWidth = maxLeftWidth;}canvas.drawText（textCharArray, j, 1, drawWidth, （lineCount + 1） * textSize, paint2）;drawWidth += charWidth;}lineCount += 2;}if （！setHeight） {setHeight（（lineCount + 1） * （int） textSize + 5）;setHeight = true;}} catch （JSONException e） {e.printStackTrace（）;}}}

该方案的实现是不太好的，方案1也是在此基础上进行调整的，在这里放出来只是为了说明，所有的计算不要全部放在onDraw里面，因为该方法可能会反复调用多次，这样就降低了性能。
方案3
将数据源拼接成SpannableString，重写onDraw函数，根据内容draw每一个字符：

/** * 该方法，是需要显示的内容先拼接成SpannableString，在onDraw方法中获取所有的char字符，一个一个比较 * 当为分号是，表示为key与value的分隔符。 */public class TypographyView3 extends TextView {private Paint leftPaint = new Paint（）;private Paint rightPaint = new Paint（）;int width;private String text;private float textSize;float maxLeftWidth = 0;private int middlePadding = 0;public TypographyView3（Context context） {super（context）;init（）;}public TypographyView3（Context context, AttributeSet attrs） {super（context, attrs）;init（）;}public TypographyView3（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;init（）;}private void init（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;leftPaint.setAntiAlias（true）;leftPaint.setTextSize（textSize）;leftPaint.setColor（getResources（）.getColor（R.color.color_black_999999））;rightPaint.setAntiAlias（true）;rightPaint.setTextSize（textSize）;rightPaint.setColor（getResources（）.getColor（R.color.color_black））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}@Overrideprotected void onSizeChanged（int w, int h, int oldw, int oldh） {super.onSizeChanged（w, h, oldw, oldh）;width = getWidth（）;// 整个textView的宽度}public void setText（JSONArray data） {if （data == null） {return;}try {int size = data.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） data.get（i）;String key = o.getString（0）;float v = leftPaint.measureText（key）;if （v > maxLeftWidth） {maxLeftWidth = v;}}maxLeftWidth += middlePadding;SpannableStringBuilder ssb = new SpannableStringBuilder（）;for （int i = 0; i < size; ++i） {addItem（（JSONArray） data.get（i）, ssb, i ！= 0）;}setText（ssb, BufferType.SPANNABLE）;} catch （Exception e） {}}private void addItem（JSONArray item, SpannableStringBuilder ssb, boolean breakLine） {try {if （item == null || item.length（） == 0） {return;}String key = item.getString（0）;String value = （item.length（） >= 2） ? item.getString（1） : "";if （TextUtils.isEmpty（key） && TextUtils.isEmpty（value）） {return;}if （breakLine） {// 换行ssb.append（"
"）;ssb.append（"
"）;}SpannableString span = new SpannableString（key）;//span.setSpan（new ForegroundColorSpan（getResources（）.getColor（R.color.colorAccent））, 0, key// .length（）,//Spanned.SPAN_INCLUSIVE_EXCLUSIVE）;ssb.append（span）;ssb.append（value）;} catch （JSONException e） {e.printStackTrace（）;}}@Overrideprotected void onDraw（Canvas canvas） {// super.onDraw（canvas）;int lineCount = 0;text = this.getText（）.toString（）;if （text == null）return;char[] textCharArray = text.toCharArray（）;// 已绘的宽度float drawWidth = 0;float charWidth;Paint paint = leftPaint;for （int i = 0; i < textCharArray.length; i++） {charWidth = leftPaint.measureText（textCharArray, i, 1）;if （textCharArray[i] == "
"） {lineCount++;drawWidth = 0;paint = leftPaint;continue;}if （width - drawWidth < charWidth） {lineCount++;drawWidth = maxLeftWidth;}if （i > 1 && textCharArray[i - 1] == ":"） {drawWidth = maxLeftWidth;paint = rightPaint;}canvas.drawText（textCharArray, i, 1, drawWidth, （lineCount + 1） * textSize, paint）;drawWidth += charWidth;}//may be need set height//setHeight（（lineCount + 1） * （int） textSize + 5）;}}

这里先计算左边title的最大宽度，同时将所有的数据拼接成一个SpannableStringBuilder，调用setText函数会触发重绘，在onDraw函数中进行处理，由于未重新super函数，因此SpannableString的setSpan函数失效，该方案主要根据分隔符来进行分割，因此分隔符需要唯一。
方案4
采用GridLayout方式实现，但是原始控件有展示问题，因此对此进行了修改：

public class Typography4Activity extends BaseActivity {public static void start（Context context） {Intent intent = new Intent（）;intent.setClass（context, Typography4Activity.class）;context.startActivity（intent）;}private LinearLayout root;private Paint leftPaint = new Paint（）;private float textSize;private float maxLeftWidth;private int middlePadding = 0;private float maxRightWidth;@Overrideprotected void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;root = （LinearLayout） LayoutInflater.from（this）.inflate（R.layout.activity_typography4, null）;setContentView（root）;initPaint（）;findViews（）;loadData（）;}private void initPaint（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;leftPaint.setAntiAlias（true）;leftPaint.setTextSize（textSize）;leftPaint.setColor（getResources（）.getColor（R.color.color_black_999999））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}private void findViews（） {}private void loadData（） {addGridLayout（DataSource.getArray（））;TextView view = new TextView（this）;view.setText（"修改后的实现"）;view.setGravity（Gravity.CENTER）;view.setLayoutParams（new ViewGroup.LayoutParams（ViewGroup.LayoutParams.MATCH_PARENT, 160））;root.addView（view）;addModifyGridLayout（DataSource.getArray（））;}private void addGridLayout（JSONArray data） {try {GridLayout layout = createGridLayout（）;int size = data.length（）;for （int i = 0; i < size; ++i） {JSONArray item = （JSONArray） data.get（i）;String key = item.getString（0）;String value = （item.length（） >= 2） ? item.getString（1） : "";GridLayout.Spec row = GridLayout.spec（i）;GridLayout.Spec col1 = GridLayout.spec（0）;GridLayout.Spec col2 = GridLayout.spec（1）;GridLayout.LayoutParams params = new GridLayout.LayoutParams（row, col1）;TextView title = getLeftTextView（key）;layout.addView（title, params）;params = new GridLayout.LayoutParams（row, col2）;TextView desc = getRightTextView（value）;layout.addView（desc, params）;}root.addView（layout）;} catch （Exception e） {}}@NonNullprivate TextView getRightTextView（String value） {TextView desc = new TextView（this）;desc.setTextSize（13）;desc.setTextColor（getResources（）.getColor（R.color.black））;desc.setText（value）;return desc;}@NonNullprivate TextView getLeftTextView（String key） {TextView title = new TextView（this）;title.setText（key）;title.setPadding（0, middlePadding, middlePadding, 0）;title.setTextColor（getResources（）.getColor（R.color.color_black_999999））;title.setTextSize（13）;return title;}private void addModifyGridLayout（JSONArray data） {try {calculateLeftMaxWidth（data）;GridLayout layout = createGridLayout（）;int size = data.length（）;for （int i = 0; i < size; ++i） {JSONArray item = （JSONArray） data.get（i）;GridLayout.Spec row = GridLayout.spec（i）;String key = item.getString（0）;GridLayout.Spec col1 = GridLayout.spec（0）;GridLayout.LayoutParams params = new GridLayout.LayoutParams（row, col1）;TextView title = getLeftTextView（key）;layout.addView（title, params）;String value = （item.length（） >= 2） ? item.getString（1） : "";GridLayout.Spec col2 = GridLayout.spec（1）;params = new GridLayout.LayoutParams（row, col2）;TextView desc = getRightTextView（value）;params.width = （int） maxRightWidth;params.height = ViewGroup.LayoutParams.WRAP_CONTENT;layout.addView（desc, params）;}root.addView（layout）;} catch （Exception e） {}}private void calculateLeftMaxWidth（JSONArray data） {try {DisplayUtil.init（this）;// 这个可以在应用程序起来的时候initint size = data.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） data.get（i）;String key = o.getString（0）;String value = o.getString（1）;if （TextUtils.isEmpty（key） || TextUtils.isEmpty（value）） {continue;}float curWidth = leftPaint.measureText（key）;if （curWidth > maxLeftWidth） {maxLeftWidth = curWidth;}}maxLeftWidth = maxLeftWidth + middlePadding;maxRightWidth = DisplayUtil.screenWidth - DisplayUtil.dp2px（this, 32 + 10） - maxLeftWidth;} catch （Exception e） {}}private GridLayout createGridLayout（） {GridLayout layout = new GridLayout（this）;layout.setColumnCount（2）;//layout.setRowCount（5）;layout.setOrientation（GridLayout.HORIZONTAL）;return layout;}}

       如果直接创建一个GridLayout，里面添加每一项，如果描述过长都导致显示不全，这个是系统的一个bug，计算的宽度有问题，因此需要对此方案进行更改。
       更改方式为先计算左边占用的最大宽度，在添加右边的项时，设置布局参数控制最大的长度。
方案5
       采用每一行一个布局，手动一行一行进行添加：

public class Typography5Activity extends BaseActivity {public static void start（Context context） {Intent intent = new Intent（）;intent.setClass（context, Typography5Activity.class）;context.startActivity（intent）;}private LinearLayout root;private Paint leftPaint = new Paint（）;private float textSize;private float maxLeftWidth;private int middlePadding = 0;@Overrideprotected void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;root = （LinearLayout） LayoutInflater.from（this）.inflate（R.layout.activity_typography5, null）;setContentView（root）;initPaint（）;loadData（）;}private void initPaint（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;leftPaint.setAntiAlias（true）;leftPaint.setTextSize（textSize）;leftPaint.setColor（getResources（）.getColor（R.color.color_black_999999））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}private void loadData（） {JSONArray array = DataSource.getArray（）;calculateLeftMaxWidth（array）;if （array ！= null） {try {int size = array.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） array.get（i）;String key = o.getString（0）;String value = o.getString（1）;addItem（key, value）;}} catch （Exception e） {}}}private void calculateLeftMaxWidth（JSONArray data） {try {int size = data.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） data.get（i）;String key = o.getString（0）;String value = o.getString（1）;if （TextUtils.isEmpty（key） || TextUtils.isEmpty（value）） {continue;}float curWidth = leftPaint.measureText（key）;if （curWidth > maxLeftWidth） {maxLeftWidth = curWidth;}}maxLeftWidth = maxLeftWidth + middlePadding;} catch （Exception e） {}}private void addItem（String key, String value） {LinearLayout layout = getItemLayout（）;TextView left = （TextView） layout.findViewById（R.id.left）;LinearLayout.LayoutParams params = new LinearLayout.LayoutParams（ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT）;params.width = （int） maxLeftWidth;left.setLayoutParams（params）;left.setText（key）;TextView right = （TextView） layout.findViewById（R.id.right）;right.setText（value）;root.addView（layout）;}private LinearLayout getItemLayout（） {LinearLayout layout = （LinearLayout） LayoutInflater.from（this）.inflate（R.layout.compose_item_layout, null）;return layout;}}

改方案也需要先计算左边的最大占用宽度，来设置右边占用的大小，每一项的布局如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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="horizontal"android:paddingTop="@dimen/text_padding_10"tools:context=".activity.Typography1Activity"><TextViewandroid:id="@+id/left"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="@dimen/text_padding_10"android:textColor="@color/color_black_999999"android:textSize="@dimen/text_size_13"/><TextViewandroid:id="@+id/right"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:textColor="@color/black"android:textSize="@dimen/text_size_13"/></LinearLayout>

每一行有两个TextView，左边宽度为自适应，右边占据剩下左右的位置，在计算出左边最大宽度后，重新设置左边每一个TextView占用的宽度。
方案6
方式与1差不多，但是不在继承TextView，而是直接继承View:

public class TypographyView4 extends View {private Paint leftPaint = new Paint（）;private Paint rightPaint = new Paint（）;private int fullWidth;private float textSize;private JSONArray array;private int middlePadding = 0;float maxLeftWidth = 0;int itemSize = 0;public TypographyView4（Context context） {super（context）;init（）;}public TypographyView4（Context context, AttributeSet attrs） {super（context, attrs）;init（）;}public TypographyView4（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;init（）;}private void init（） {textSize = getResources（）.getDimensionPixelSize（R.dimen.text_size_13）;leftPaint.setAntiAlias（true）;leftPaint.setTextSize（textSize）;leftPaint.setColor（getResources（）.getColor（R.color.color_black_999999））;rightPaint.setAntiAlias（true）;rightPaint.setTextSize（textSize）;rightPaint.setColor（getResources（）.getColor（R.color.color_black））;middlePadding = getResources（）.getDimensionPixelSize（R.dimen.padding_value）;}@Overrideprotected void onSizeChanged（int w, int h, int oldw, int oldh） {super.onSizeChanged（w, h, oldw, oldh）;fullWidth = getWidth（）;// 整个textView的宽度}public void setText（JSONArray array） {this.array = array;if （array ！= null） {try {int size = itemSize = array.length（）;for （int i = 0; i < size; ++i） {JSONArray o = （JSONArray） array.get（i）;String key = o.getString（0）;String value = o.getString（1）;if （TextUtils.isEmpty（key） || TextUtils.isEmpty（value）） {itemSize--;continue;}float curWidth = leftPaint.measureText（key）;if （curWidth > maxLeftWidth） {maxLeftWidth = curWidth;}}maxLeftWidth = maxLeftWidth + middlePadding;invalidate（）;} catch （Exception e） {}}}@Overrideprotected void onDraw（Canvas canvas） {if （array == null） {return;}int lineCount = 0;try {JSONArray item;float offsetY;for （int i = 0; i < itemSize; ++i） {item = （JSONArray） array.get（i）;offsetY = （lineCount + 1） * textSize;canvas.drawText（item.getString（0）, 0, offsetY, leftPaint）;String value = item.getString（1）;float valueWidth = rightPaint.measureText（value）;if （valueWidth > fullWidth - maxLeftWidth） {// 一行显示不完char[] textCharArray = value.toCharArray（）;float charWidth;float drawWidth = maxLeftWidth;for （int j = 0; j < textCharArray.length; j++） {charWidth = rightPaint.measureText（textCharArray, j, 1）;if （fullWidth - drawWidth < charWidth） {lineCount++;drawWidth = maxLeftWidth;offsetY += textSize;}canvas.drawText（textCharArray, j, 1, drawWidth, offsetY, rightPaint）;drawWidth += charWidth;}} else {canvas.drawText（value, maxLeftWidth, offsetY, rightPaint）;}lineCount += 2;}} catch （JSONException e） {e.printStackTrace（）;}}}

该方案主要继承自View，不再继承TextView，由于在在上述方案中不在调用super，因此TextView已经退化为一个View,因此直接继承View。
总结
因为左边的宽度不确定，因此所有的方案都进行了同样的一个操作，就是测量了左边显示的最大宽度，后续的操作再根据该宽度进行调整。上述的方案中1，2，3，6都只需用一个View来进行显示，4，5都需要多个View进行显示。
完整的代码可以在查看链接上进行查看。
以上就是本文的全部内容，希望对大家的学习有所帮助。