安卓利用RecyclerView写一个卡片依次左右排列的页面

这是学习完《第一行代码》前三章后做的一个练习
要求:黄色卡片大小200*200字号14dp中间的稍小一点颜色从上到下 用#333333  #666666 红色 #ff0000
效果如下所示:
在这里插入图片描述
接下来是代码:

首先是主布局

利用recyclerview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>
左右卡片布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    >
    //左侧
    <LinearLayout
        android:id="@+id/left_layout"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        >

        <ImageView
            android:id="@+id/left_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/left"
            />
        <TextView
            android:id="@+id/left_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#333333"
            android:textSize="14dp"
            android:text="307平/南北/低楼层"
            />
        <TextView
            android:id="@+id/left_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#666666"
            android:textSize="12dp"
            android:text="35000/平"
            />
        <TextView
            android:id="@+id/left_cost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#f00"
            android:textSize="14dp"
            android:text="1900万"
            />
    </LinearLayout>

    //右侧
    <LinearLayout
        android:id="@+id/right_layout"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"

        >
        <ImageView
            android:id="@+id/right_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/right"
            />
        <TextView
            android:id="@+id/right_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#333333"
            android:textSize="14dp"
            android:text="307平/南北/低楼层"
            />
        <TextView
            android:id="@+id/right_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#666666"
            android:textSize="12dp"
            android:text="35000/平"
            />
        <TextView
            android:id="@+id/right_cost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:maxWidth="100dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:letterSpacing="0.1"
            android:textColor="#f00"
            android:textSize="14dp"
            android:text="1900万"
            />
    </LinearLayout>
</LinearLayout>
卡片信息类
package com.example.roompractice;

public class House {
   
    private String info,price,cost;//卡片信息,单价,总价
    private int type;//卡片的左右
    public 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用RecyclerView的基本范例,它展示了一个简单的列表,列表中的每项都包含一个文本和一个图像: 1. 首先,在你的Android Studio项目中添加RecyclerView依赖: ``` implementation 'androidx.recyclerview:recyclerview:1.1.0' ``` 2. 创建一个RecyclerView布局文件和一个列表项布局文件。在这个例子中,我们将使用LinearLayoutManager来实现垂直滚动的列表。 `activity_main.xml`: ``` <?xml version="1.0" encoding="utf-8"?> <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" /> ``` `list_item.xml`: ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="16dp"> <ImageView android:id="@+id/imageView" android:layout_width="48dp" android:layout_height="48dp" android:src="@drawable/ic_launcher_background" /> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:text="List Item" android:textColor="@android:color/black" android:textSize="16sp" /> </LinearLayout> ``` 3. 创建一个列表项ViewHolder类,用于绑定列表项布局文件中的View。 `ListItemViewHolder.java`: ``` import android.view.View; import android.widget.ImageView; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView; public class ListItemViewHolder extends RecyclerView.ViewHolder { private ImageView imageView; private TextView textView; public ListItemViewHolder(@NonNull View itemView) { super(itemView); imageView = itemView.findViewById(R.id.imageView); textView = itemView.findViewById(R.id.textView); } public void bind(ListItem item) { imageView.setImageResource(item.getImageResource()); textView.setText(item.getText()); } } ``` 4. 创建一个列表项数据类,用于存储每一个列表项的数据。 `ListItem.java`: ``` public class ListItem { private int imageResource; private String text; public ListItem(int imageResource, String text) { this.imageResource = imageResource; this.text = text; } public int getImageResource() { return imageResource; } public String getText() { return text; } } ``` 5. 创建一个RecyclerView适配器类,用于绑定列表项数据和ViewHolder。 `ListAdapter.java`: ``` import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView; import java.util.List; public class ListAdapter extends RecyclerView.Adapter<ListItemViewHolder> { private List<ListItem> listItems; public ListAdapter(List<ListItem> listItems) { this.listItems = listItems; } @NonNull @Override public ListItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.list_item, parent, false); return new ListItemViewHolder(view); } @Override public void onBindViewHolder(@NonNull ListItemViewHolder holder, int position) { holder.bind(listItems.get(position)); } @Override public int getItemCount() { return listItems.size(); } } ``` 6. 在MainActivity中使用RecyclerView并设置适配器。 `MainActivity.java`: ``` import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); recyclerView = findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); List<ListItem> listItems = new ArrayList<>(); listItems.add(new ListItem(R.drawable.ic_launcher_background, "List Item 1")); listItems.add(new ListItem(R.drawable.ic_launcher_background, "List Item 2")); listItems.add(new ListItem(R.drawable.ic_launcher_background, "List Item 3")); ListAdapter adapter = new ListAdapter(listItems); recyclerView.setAdapter(adapter); } } ``` 这样就完成了一个简单的使用RecyclerView的列表。当你运行这个应用程序时,你应该可以看到一个包含三个列表项的列表,每一个列表项都包含一个图像和一个文本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值