Android tutorial 2020 – actual use of recyclerview
For example, make a list with the item of recyclerview.
Android tutorial 2020 - series overview
Here we make a specific example. Try to look good.
This example is divided into the following steps:
First simulate a data. Create a new datatest class, which has four properties.
public class DataTest {
private String timezone;
private int number;
private int personCount;
private int count;
public DataTest(String timezone,int number,int personCount,int count) {
this.timezone = timezone;
this.number = number;
this.personCount = personCount;
this.count = count;
}
// getter setter...
}
Design UI and display 4 attribute values in one line. Item uses item_ recy2.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">
<TextView
android:id="@+id/tv1"
style="@style/RePage2Header"
android:layout_marginEnd="@dimen/re_2_half_gap" />
<TextView
android:id="@+id/tv2"
style="@style/RePage2Header"
android:layout_marginStart="@dimen/re_2_half_gap"
android:layout_marginEnd="@dimen/re_2_half_gap" />
<TextView
android:id="@+id/tv3"
style="@style/RePage2Header"
android:layout_marginStart="@dimen/re_2_half_gap"
android:layout_marginEnd="@dimen/re_2_half_gap" />
<TextView
android:id="@+id/tv4"
style="@style/RePage2Header"
android:layout_marginStart="@dimen/re_2_half_gap" />
</LinearLayout>
The relevant style, color and size configuration files are in the RES / values directory.
The style file style.xml.
<style name="RePage2Header">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">40dp</item>
<item name="android:layout_weight">2</item>
<item name="android:textColor">#ffffff</item>
<item name="android:gravity">center</item>
<item name="android:background">@color/rePage2Item</item>
</style>
We set layout for each textview in layout_ Width is 0dp. To use layout_ Weight attribute. Let them divide the width of the parent view proportionally among the four textviews.
Add the following color settings to the color configuration file color.xml.
<color name="rePage2Item">#082941</color>
Dimension configuration dimensions.xml.
<dimen name="re_2_gap">4dp</dimen>
<dimen name="re_2_half_gap">2dp</dimen>
When the resource file and layout are ready, start writing the corresponding viewholder. Here, VH class and adapter class are also placed in the activity class.
private class VH extends RecyclerView.ViewHolder {
TextView tv1;
TextView tv2;
TextView tv3;
TextView tv4;
public VH(@NonNull View itemView) {
super(itemView);
tv1 = itemView.findViewById(R.id.tv1);
tv2 = itemView.findViewById(R.id.tv2);
tv3 = itemView.findViewById(R.id.tv3);
tv4 = itemView.findViewById(R.id.tv4);
}
}
Adapter class.
private class Adapter extends RecyclerView.Adapter<VH> {
private List<DataTest> dataList = new ArrayList<>();
public Adapter() {
}
public void setDataList(List<DataTest> dataList) {
this.dataList = dataList;
notifyDataSetChanged();
}
@NonNull
@Override
public VH onCreateViewHolder(@NonNull ViewGroup parent,int viewType) {
return new VH(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recy2,parent,false));
}
@Override
public void onBindViewHolder(@NonNull VH holder,int position) {
DataTest dataTest = dataList.get(position);
holder.tv1.setText(dataTest.getTimezone());
holder.tv2.setText(String.valueOf(dataTest.getNumber()));
holder.tv3.setText(String.valueOf(dataTest.getPersonCount()));
holder.tv4.setText(String.valueOf(dataTest.getCount()));
}
@Override
public int getItemCount() {
return dataList.size();
}
}
Set recyclerview.
private Adapter mAdapter = new Adapter();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_recy_2);
RecyclerView recyclerView = findViewById(R.id.re_view);
recyclerView.setLayoutManager(new linearlayoutmanager(this,RecyclerView.VERTICAL,false));
recyclerView.setAdapter(mAdapter);
mAdapter.setDataList(genDataTestList());
recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
@Override
public void getItemOffsets(@NonNull Rect outRect,@NonNull View view,@NonNull RecyclerView parent,@NonNull RecyclerView.State state) {
super.getItemOffsets(outRect,view,state);
outRect.top = getResources().getDimensionPixelOffset(R.dimen.re_2_gap);
}
});
}
// 生成模拟数据
private List<DataTest> genDataTestList() {
List<DataTest> list = new ArrayList<>();
for (int i = 1; i <= 60; i++) {
DataTest d = new DataTest("时区" + i,i,i);
list.add(d);
}
return list;
}
Configure recyclerview in the oncreate method. The recyclerview.additemdecoration method is to set the interval style for the item. Getitemoffsets can set the spacing of children. Here, a spacing value is given to the bottom of the subitem. The specific value is set in the dimension. Gendatatestlist() is the data that generates the simulation.
You can see the effect when running.
Seeing the rendering, some friends asked: the header and item have the same structure. Can they be reused? Actually, it can. We can use the include tag in the layout to "include" another layout file. Copy act_ recy_ 2. Paste XML to get act_ recy_ 2_ Include.xml, change the LinearLayout of the original header to include.
<include layout="@layout/item_recy2" />
Set the layout for include, that is, the layout of the item we defined_ recy2。 When we want to add a margin top, for example
<include
android:layout_marginTop="4dp"
layout="@layout/item_recy2" />
As will pop up a warning:
That is, in the include tab, if you want to set other properties, you need to set layout first_ Width and layout_ height。 Modify it and add an ID to make it like this.
<include
android:id="@+id/header"
layout="@layout/item_recy2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp" />
Let the activity use this layout. Modify recyclerviewdemo2act.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_recy_2_include);
initHeader();
// 配置RecyclerView的部分
}
private void initHeader() {
View header = findViewById(R.id.header);
TextView tv1 = header.findViewById(R.id.tv1);
tv1.setText("时区");
TextView tv2 = header.findViewById(R.id.tv2);
tv2.setText("序号");
TextView tv3 = header.findViewById(R.id.tv3);
tv3.setText("人员");
TextView tv4 = header.findViewById(R.id.tv4);
tv4.setText("数量");
}
We added a method initheader (). First find the header and find its sub views through the header, that is, the four textviews. Just set the text separately.
Run to see if the effect is the same as the previous one.
Put the project here: https://github.com/AnRFDev/Tutorial2020 Related reading recyclerview - getting started recyclerview click events - how to set click events recyclerview examples - actually use recyclerview to obtain sliding distance recyclerview displays a variety of items