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

时间:2018-04-16 03:59:28

标签: android android-layout android-cardview

我正在创建一个Android新闻应用。第一个布局使用带有cardview的recylcleview。在每个页面内,顶部是新标题,左下方是图像,右侧是新闻简报。请参阅图片以获取想法:

enter image description here

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

我的布局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 个答案:

答案 0 :(得分:1)

您可以使用FlowTextView

  

扩展RelativeLayout的TextView。该文本将环绕布局中的任何子视图。

     

此小部件使用Html.fromHtml(“&lt; your markup ... /&gt;”)对HTML进行基本支持。它将识别链接,粗体斜体等。

在存储库末尾添加jitpack到您的build.gradle

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

添加dependency

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

示例代码:如何使用FlowTextView

<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 CODE

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);

    }

}

<强>输出

enter image description here

答案 1 :(得分:0)

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