Android 实现图文混排

主要是实现图片和文字混合排列,左边的图片是一个标志,右边是文字,而且不影响文字换行,类似商品条目的效果
在这里插入图片描述
第一种实现方式:
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的使用详解

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值