效果图如图:
首先加依赖(请读者对应自己的版本号)
implementation 'com.android.support:recyclerview-v7:27.1.1'
activity_main.xml中加入:
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
然后我们先写item,创建空活动item(即RecyclerView中的每一个小部分)
activity_item.xml:(这里的图片和名字都只是表明item图片和名字的位置,并非真正在RecyclerView中展示的item)
<?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="130dp"
android:orientation="vertical"
android:elevation="8dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_background1"
android:layout_marginBottom="0dp">
<ImageView
android:id="@+id/computer_image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_weight="4"
android:background="@drawable/computer"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="@+id/computer_name"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="索尼vaio笔记本电脑"
android:maxLines="2"
android:textColor="#000000"
android:textSize="19sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
<Button
android:id="@+id/computer_btn"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
android:textColor="#ffffff"
android:text="查看详情"
android:gravity="center"
android:background="@drawable/btn_skyblue" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#11454545"/>
</LinearLayout>
然后我们写Computer类:(对应item中有一个TextView,一个ImageView,那个Button我们在类中不写它)
import android.content.ComponentName;
import android.provider.ContactsContract;
public class Computer {
private String TextView;
private int ImageId;
public Computer(String TextView,int ImageId){
this.TextView = TextView;
this.ImageId = ImageId;
}
public int getImageId() {
return ImageId;
}
public String getTextView() {
return TextView;
}
public void setTextView(String textView) {
TextView = textView;
}
}
然后我们写适配器(连接作用,将我们的代码用图像的方式展示出来)(Button的点击事件我们就在适配器中写)
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
public class ComputerAdapter extends RecyclerView.Adapter<ComputerAdapter.ViewHolder> {
private List<Computer> computers;
public class ViewHolder extends RecyclerView.ViewHolder {
TextView textView;
ImageView imageView;
Button btn;
public ViewHolder(View itemView) {
super(itemView);
textView = (TextView)itemView.findViewById(R.id.computer_name);
imageView = (ImageView)itemView.findViewById(R.id.computer_image);
btn = (Button)itemView.findViewById(R.id.computer_btn);
}
}
public ComputerAdapter(List<Computer> computers){
this.computers = computers;
}
@NonNull
@Override
public ComputerAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_item,parent,false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull ComputerAdapter.ViewHolder holder, final int position) {
Computer computer =computers.get(position);
holder.imageView.setImageResource(computer.getImageId());
holder.textView.setText(computer.getTextView());
final int count = position+1;
holder.btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(),"你点击了第 "+count+"个按钮",Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return computers.size();
}
}
最后在MainActivity中将整体联系起来(这里inits中为了效果明显我们循环了2次)
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
import static java.security.AccessController.getContext;
public class MainActivity extends AppCompatActivity {
public List<Computer> computers = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recyclerview);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
ComputerAdapter computerAdapter = new ComputerAdapter(computers);
recyclerView.setAdapter(computerAdapter);
inits();
}
// 华硕(ASUS) 灵耀S 2代
// 惠普(HP)EliteBook
// 惠普(HP) 星14八代酷睿
public void inits(){
for(int i=0;i<2;i++){
Computer computer1 = new Computer("戴尔/DELL燃7000灵越 ",R.drawable.dell7000);
computers.add(computer1);
Computer computer2 = new Computer("华硕(ASUS) 灵耀S 2代",R.drawable.asus_s_2);
computers.add(computer2);
Computer computer3 = new Computer("惠普(HP)EliteBook",R.drawable.dellatitude);
computers.add(computer3);
Computer computer4 = new Computer("惠普(HP) 星14八代酷睿",R.drawable.hpxing8dai);
computers.add(computer4);
Computer computer5 = new Computer("惠普(HP)小欧a",R.drawable.hp15xiaooua);
computers.add(computer5);}
}
}