代码之家 › 专栏 › 技术社区 › J.E.Y

android卡视图布局:使用图像下的空白区域

android-cardview android-layout android

-2

J.E.Y · 技术社区 · 7 年前

我正在创建一个android新闻应用程序。第一个布局使用带有cardview的recylcleview。在每个页面内,顶部是新标题,下面是左侧的图像和右侧的新闻简报。查看图片了解想法:

这样做的目的是,新闻简报部分位于图像的右侧,但如果有,它也会占据图像下方的空白空间。

我的布局xml如下所示:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cv"
    card_view:cardUseCompatPadding="true">    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:id="@+id/news_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:textStyle="bold"
            android:background="#FFFFFF"
            android:padding="4dp"/>

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:id="@+id/image_thumb"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:id="@+id/news_body"
            android:layout_toRightOf="@+id/image_thumb"
            android:layout_below="@+id/news_title"
            android:padding="4dp"/>

    </RelativeLayout>
</android.support.v7.widget.CardView>

2 回复 | 直到 7 年前

1

Community Mohan Dere 5 年前

您可以使用 FlowTextView

扩展RelativeLayout的文本视图。文本将环绕布局中的所有子视图。

此小部件基本支持使用HTML的HTML。fromHtml(“<您的标记…/>”)它将识别链接、粗体斜体等。

添加 jitpack 给你的 build.gradle 在存储库末尾:

repositories {
        // ...
        maven { url "https://jitpack.io" }
    }

添加 dependency :

compile 'com.github.deano2390:FlowTextView:2.0.5'

示例代码:如何使用 FlowText视图

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/news_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="#FFFFFF"
            android:padding="4dp"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing e"
            android:textStyle="bold" />


        <uk.co.deanwild.flowtextview.FlowTextView
            android:id="@+id/ftv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image_thumb"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_margin="2dp"
                android:src="@drawable/abc" />


        </uk.co.deanwild.flowtextview.FlowTextView>
    </LinearLayout>
</android.support.v7.widget.CardView>

JAVA代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FlowTextView flowTextView = (FlowTextView) findViewById(R.id.ftv);
        Spanned html = Html.fromHtml("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui pellentesque, auctor ipsum id, ultrices nisl. Donec a enim tincidunt, cursus ante in, ultricies arcu. Suspendisse luctus eget neque et dignissim. Mauris libero erat, tincidunt sed fermentum sit amet, porttitor eu nulla. Integer interdum consequat elementum. Ut dictum dignissim sollicitudin. In eu nisl vestibulum, commodo nisl non, fermentum tortor. Pellentesque mattis finibus leo, efficitur porta urna posuere nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui pellentesque, auctor ipsum id, ultrices nisl. Donec a enim tincidunt, cursus ante in, ultricies arcu. Suspendisse luctus eget neque et dignissim. Mauris libero erat, tincidunt sed fermentum sit amet, porttitor eu nulla. Integer interdum consequat elementum. Ut dictum dignissim sollicitudin. In eu nisl vestibulum, commodo nisl non, fermentum tortor. Pellentesque mattis finibus leo, efficitur porta urna posuere nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui pellentesque, auctor ipsum id, ultrices nisl. Donec a enim tincidunt, cursus ante in, ultricies arcu. Suspendisse luctus eget neque et dignissim. Mauris libero erat, tincidunt sed fermentum sit amet, porttitor eu nulla. Integer interdum consequat elementum. Ut dictum dignissim sollicitudin. In eu nisl vestibulum, commodo nisl non, fermentum tortor. Pellentesque mattis finibus leo, efficitur porta urna posuere nec.");
        flowTextView.setText(html);

    }

}

输出

2

0

prudhvi 7 年前

按如下方式尝试此代码,您可以使用单独的图像视图标记通过adjustBounds进行调整