布局(图片随文字移动)简单实现

本文介绍了如何在Android中实现一种布局效果,即文字内容增加时,图片始终排列在文字右侧且不会被挤出屏幕。两种实现方案分别使用LinearLayout和FrameLayout,重点在于理解布局的原理和权重分配。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.实现的效果如图所示:文字代表用户输入的对自己的个人介绍,两张图片随着文字的增加,始终排列在个人介绍的右边

效果看起来没有什么难度,不过写起来的时候,着实费了脑筋,一小伙伴对这样一个布局,用起来多分辨率适配的方案,想想就觉得。。。

这个布局只要抓住一点:别让两个图片被文字挤出图片即可。

第一,你不能设置图片固定在右边,因为它是随文字动的

第二,文字是根据屏幕来的,你不管设置为wrap还是match都会把图片挤出屏幕

先来一个麻烦的实现方案

<LinearLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/home_my_center_username_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:maxWidth="@dimen/home_my_center_name_txt_width"
        android:text="dassssssssssssssssdassssssssssssssssssssss"
        android:textColor="?android:attr/textColorPrimary"
        android:textSize="@dimen/common_txt_big_size" />

    <ImageView
        android:id="@+id/home_my_center_gender_img"
        android:layout_width="@dimen/home_my_center_gender_img_height"
        android:layout_height="@dimen/home_my_center_gender_img_height"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/home_my_center_gender_img_margin_left"
        android:layout_marginStart="@dimen/home_my_center_gender_img_margin_left"
        android:src="@mipmap/account_male_ic" />

    <ImageButton
        android:id="@+id/home_my_center_edit_img"
        android:layout_width="@dimen/home_my_center_gender_img_height"
        android:layout_height="@dimen/home_my_center_gender_img_height"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/home_my_center_edit_img_margin_left"
        android:layout_marginStart="@dimen/home_my_center_edit_img_margin_left"
        android:background="@android:color/white"
        android:src="@mipmap/cpattern_1" />
</LinearLayout>

这个方案你需要对maxWidth分辨率单独适配

这是目前我觉得简单的:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/home_my_center_username_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingEnd="@dimen/home_my_center_name_txt_padding_end"
        android:text="@string/account_unknown_name"
        android:textColor="?android:attr/textColorPrimary"
        android:textSize="@dimen/common_txt_big_size" />

    <ImageView
        android:id="@+id/home_my_center_gender_img"
        android:layout_width="@dimen/home_my_center_gender_img_height"
        android:layout_height="@dimen/home_my_center_gender_img_height"
        android:layout_gravity="center_vertical|end"
        android:layout_marginEnd="@dimen/home_my_center_gender_img_margin_end"
        android:src="@mipmap/account_male_ic" />

    <ImageView
        android:id="@+id/home_my_center_edit_img"
        android:layout_width="@dimen/home_my_center_gender_img_height"
        android:layout_height="@dimen/home_my_center_gender_img_height"
        android:layout_gravity="center_vertical|end"
        android:background="@android:color/white"
        android:src="@mipmap/edit" />
</FrameLayout>

FrameLayout中设置包裹内容,textVIew设置为包裹内容,那么整个布局相当于交给了textVIew,他想多大就多大,这样设置两个imge在它的布局中撒野就可以了

通过这篇文章,顺便规范一下自己对res目录下名称的规范

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值