主要是实现图片和文字混合排列,左边的图片是一个标志,右边是文字,而且不影响文字换行,类似商品条目的效果
第一种实现方式:
SpannableString或者是SpannableStringBuilder实现
这种方式需要UI给出左边的图片,根据不同的标志显示不同的图片,缺点是必须要知道tag,让UI提前给设计图,缺少灵活性
private TextView mTvName;
private static final String goodsName = "朗仕先锋系列洗面奶清爽不刺激朗仕先锋系列洗面奶清爽不刺激清爽不刺激";
private void initData() {
mTvName = findViewById(R.id.item_title);
// 设置图片和文字的间距 new SpannableString(" "+goodsName) 下面会讲到
SpannableString sp = new SpannableString(goodsName);
Drawable leftDrawable = getResources().getDrawable(R.drawable.bm_icon_tb);
//设置左边图片的显示宽高 我这里显示的获取的图片的测量宽高
leftDrawable.setBounds(0, 0, leftDrawable.getIntrinsicWidth(), leftDrawable.getIntrinsicHeight());
//两种对齐方式
//public static final int ALIGN_BASELINE = 1; 基线对齐
//public static final int ALIGN_BOTTOM = 0; 底部对齐
sp.setSpan(new ImageSpan(leftDrawable, ImageSpan.ALIGN_BASELINE), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
mTvName.setText(sp);
}
第二种实现方式
底层布局为FrameLayout ,显示两个TextView,左边的TestView设置背景drawable,然后可以测量出左边的宽度,右边的TextView设置数据时显示相应宽度的空格即可
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="124dp"
android:layout_marginTop="120dp"
android:background="#000000">
<RelativeLayout
android:id="@+id/rl_left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerVertical="true"
android:layout_marginLeft="14dp"
android:background="#24A1F8">
<ImageView
android:id="@+id/item_pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/rl_left"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fl_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:layout_marginRight="14dp"
android:ellipsize="end"
android:lineSpacingExtra="2dp"
android:maxLines="2"
android:text=""
android:textColor="#dfe1e4"
android:textSize="13sp" />
<TextView
android:id="@+id/item_title_left"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="16dp"
android:background="@drawable/goods_tag_shape"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="朗仕"
android:textColor="#24A1F8"
android:textSize="10sp"
android:visibility="visible" />
</FrameLayout>
</RelativeLayout>
</RelativeLayout>
左边TextView的背景drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="@dimen/x2"
android:color="#93bcf5" />
<corners android:radius="@dimen/x4" />
<size android:height="@dimen/x28" />
<solid android:color="#00ffffff" />
</shape>
private TextView mTvName;
private TextView mTvTag;
private static final String goodsName = "朗仕先锋系列洗面奶清爽不刺激朗仕先锋系列洗面奶清爽不刺激清爽不刺激";
private String tag = "淘宝淘宝";
private void initData() {
mTvTag = findViewById(R.id.item_title_left);
mTvName = findViewById(R.id.item_title);
mTvTag.setText(tag);
//注释的代码是测量左边textView的宽度 发现Android 中java代码设置空格只能用缩进符"\u3000"
// ,因此这里直接遍历tag的length,设置相应的缩进 如果设置间距,在设置空格
// mTvName.setText(sb.toString() +" "+ goodsName);
// Paint mPaint = new Paint();
// mPaint.setTextSize(20);
// Rect rect = new Rect();
// mPaint.getTextBounds(tag, 0, tag.length(), rect);
// int tagWidth = rect.width() + mTvTag.getPaddingLeft() + mTvTag.getPaddingRight();//左右边距
// Log.i("measure", "width: " + rect.width() + " padding " + tagWidth);
StringBuilder sb = new StringBuilder();
for (int i = 0; i < tag.length(); i++) {
sb.append("\u3000");
}
mTvName.setText(sb.toString() + goodsName);
}
在布局中设置空格,可以参考这个文章:
Android布局中的空格以及占一个汉字宽度的空格,实现不同汉字字数对齐
查看SpannableString的详细用法查看这个文章
Android 开发SpannableString和SpannableStringBuilder的使用详解