布局内容图片不同,图文混排

布局:(有几种形式就写几个xml)

<?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="match_parent" >


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
         />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_toRightOf="@id/imageView"
        android:orientation="vertical" >


        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题" />


        <TextView
            android:id="@+id/tv_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:text="2016-6-13  11:13" />


        <TextView
            android:id="@+id/tv_copyright"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:text="李国利 陈勃" />
        
    </RelativeLayout>


</RelativeLayout>



<?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="match_parent" >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="vertical" >


        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题" />


        <TextView
            android:id="@+id/tv_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:text="2016-6-13  11:13" />


        <TextView
            android:id="@+id/tv_copyright"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:text="李国利 陈勃" />
        
    </RelativeLayout>


</RelativeLayout>




适配器

@Override

public View getView(int position, View convertView, ViewGroup parent) {
// 获取当前条目显示的类型
int itemViewType = getItemViewType(position);
// /优化//
ViewHolder1 holder1 = null;
ViewHolder2 holder2 = null;
if (convertView == null) {
switch (itemViewType) {


case 0:
// 根据数据类型,加载有图片的布局文件
convertView = View.inflate(context, R.layout.item1, null);
holder1 = new ViewHolder1();


ImageLoader instance = ImageLoader.getInstance();

holder1.imageView = (ImageView) convertView
.findViewById(R.id.imageView);
holder1.tv_title = (TextView) convertView
.findViewById(R.id.tv_title);
holder1.tv_date = (TextView) convertView
.findViewById(R.id.tv_date);
holder1.tv_copyright = (TextView) convertView
.findViewById(R.id.tv_copyright);


convertView.setTag(holder1);
break;
case 1:
// 根据数据类型,加载没有图片的布局文件
convertView = View.inflate(context, R.layout.item2, null);
holder2 = new ViewHolder2();
holder2.tv_title = (TextView) convertView
.findViewById(R.id.tv_title);
holder2.tv_date = (TextView) convertView
.findViewById(R.id.tv_date);
holder2.tv_copyright = (TextView) convertView
.findViewById(R.id.tv_copyright);
convertView.setTag(holder2);
break;


}


} else {


switch (itemViewType) {
case 0:
holder1 = (ViewHolder1) convertView.getTag();
break;
case 1:
holder2 = (ViewHolder2) convertView.getTag();
break;


}


}


// 给控件赋值
Data data = list.get(position);
switch (itemViewType) {
case 0:
// holder1.imageView.setImageResource(R.drawable.ic_launcher);
ImageLoader instance = ImageLoader.getInstance();
instance.displayImage(data.getImgs(), holder1.imageView);
holder1.tv_copyright.setText(data.getCopyright());
holder1.tv_date.setText(data.getPubDate());
holder1.tv_title.setText(data.getTitle());
break;


case 1:
holder2.tv_copyright.setText(data.getCopyright());
holder2.tv_date.setText(data.getPubDate());
holder2.tv_title.setText(data.getTitle());
break;
}


return convertView;


}


@Override
// 获得当前条目的种类
public int getItemViewType(int position) {


Data data = list.get(position);
// 如果包含图片地址,返回0;
if (data.getImgs().contains("jpg")) {


return 0;
} else {
// 如果不包含图片地址,返回1;
return 1;
}
}


@Override
// 设置listVIew条目布局的类型总数
public int getViewTypeCount() {


return 2;
}


// 有图片的id持有类
class ViewHolder1 {
ImageView imageView;
TextView tv_title;
TextView tv_date;
TextView tv_copyright;


}


// 没有图片的id持有类
class ViewHolder2 {
TextView tv_title;
TextView tv_date;
TextView tv_copyright;


}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三列布局图文混排可以用 HTML 和 CSS 来实现,下面是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <title>三列布局图文混排</title> <style> .container { display: flex; } .column { flex: 1; margin: 0 10px; } .image { max-width: 100%; height: auto; } </style> </head> <body> <div class="container"> <div class="column"> <img src="image1.jpg" alt="Image 1" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> <div class="column"> <img src="image2.jpg" alt="Image 2" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> <div class="column"> <img src="image3.jpg" alt="Image 3" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> </div> </body> </html> ``` 在上面的示例中,我们使用了 `flex` 布局来实现三列布局。每一列都被设置为 `flex: 1`,这意味着它们将平均分配剩余的可用空间。同时,我们使用了 `margin` 属性来为每列之间添加一些间距。 每列包含一个图片和一段文本。图片被设置为最大宽度为100%,高度自适应。此外,我们还可以添加其他样式来美化布局,例如设置背景颜色、字体样式等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值