Table of Contents
1. Design goals
1.1 Design requirements
1.2 Introduction to design functions
2. Detailed design explanation
2.1 Define the contactMS class
2.2 Define layout files
2.3 Modify Myadapter adapter
2.4 Define ContactDetailsActivity.java
3. Run interface display
4. Source code warehouse address
1. Design Goals
1.1 Design Requirements
Relying on assignment 1, add a click function to each item of recyclerView, and jump to a new view to display information after clicking.
1.2 Design Function Introduction
Clicking on any item in the operator’s address book will jump to the operator’s name, gender and other detailed information page.
2. Detailed explanation of design
2.1 Define contactMS class
Created in contactMS
1. Create the contactMS class to store contact information, including avatar, name, gender and other data types.
public class contactMS {
private String classification;
private String region;
private String gender;
private String name;
private int image;
}
2. Create a constructor for passing values.
public contactMS(int picture, String name, String region, String gender, String classification) {
this.picture = picture;
this.name = name;
this.region=region;
this.gender = gender;
this.category = category;
}
3. Define methods to obtain the values of images and text.
public String getMessageText() {
return name;
}
public int getImageResourceId() {
return picture;
}
public String getgender() {
return gender;
}
public String getregion() {
return region;
}
public String gettype() {
return classification;
}
4. Write to the Parcelable interface
Since the Parcelable interface needs to be used in the future to pass the contactMS object in the Intent when jumping, so when defining the contactMS class here, inherit the Parcelable interface and define the corresponding method.
in
contactMS(Parcel in) reads data from Parcel and initializes the object
createFromParcel(Parcel in) creates an object by reading the Parcel object
writeToParcel writes object data into Parcel
public class contactMS implements Parcelable {
private String classification;
private String region;
private String gender;
private String name;
private int image;
public contactMS(Parcel in) {
Image = in.readInt();
name = in.readString();
Region = in.readString();
Gender = in.readString();
Category = in.readString();
}
Corresponding method:
public static final Creator<contactMS> CREATOR = new Creator<contactMS>() {
@Override
public contactMS createFromParcel(Parcel in) {
return new contactMS(in);
}
@Override
public contactMS[] newArray(int size) {
return new contactMS[size];
}
};
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(Parcel parcel, int i) {
parcel.writeInt(picture);
parcel.writeString(name);
parcel.writeString(region);
parcel.writeString(gender);
parcel.writeString(category);
}
2.2 Define layout files
Create two different layout files for the contact list items, representing the page before and after the jump respectively. These layouts should include elements such as avatars, message text, and more.
Among them, item.xml is the layout of each item in the list, and contact.xml is the layout of the details interface after the corresponding item jumps.
(The item.xml here is actually the last modified one, but with an extra picture added)
(1) item.xml contains a picture to display the operator’s avatar and a text to display the operator’s name. Therefore, it should contain 1 ImageView and 1 TextView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@ + id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/amiya2" />
<TextView
android:id="@ + id/messageText"
android:layout_width="278dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="@android:color/holo_red_dark"
android:textSize="34sp" />
</LinearLayout>
The layout is as shown in the figure:
Note that a picture must be inserted as the default picture here, and it cannot be the tools control, because the path of the tools control is different from the picture path, causing it to fail to start. The same is true for contact.xml later.
error: ‘@tools:sample/avatars’ is incompatible with attribute src (attr) reference|color.
This error shows that an attribute using @tools:sample/avatars is incompatible with the src attribute.
(2) contact.xml contains the operator’s avatar and name, region and gender classification attributes, so 1 ImageView and 8 TextView are required.
In order to put the two text boxes on the same line, FrameLayout is used here. In order to arrange the four FrameLayouts vertically, set the orientation of the entire LinearLayout to vertical.
(Actually, it’s more concise to write using ConstraintLayout here, but I didn’t expect it when I wrote it, so I posted the source code)
<?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="match_parent"
android:orientation="vertical">
<ImageView
android:id="@ + id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/amiya2" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@ + id/textViewa"
android:layout_width="144dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="name"
android:textSize="34sp" />
<TextView
android:id="@ + id/textViewa2"
android:layout_width="274dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="TextView"
android:textSize="34sp" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@ + id/textViewb"
android:layout_width="152dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="region"
android:textSize="34sp" />
<TextView
android:id="@ + id/textViewb2"
android:layout_width="274dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:textSize="34sp" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@ + id/textViewc"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="gender"
android:textSize="34sp" />
<TextView
android:id="@ + id/textViewc2"
android:layout_width="274dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:textSize="34sp" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="@ + id/textViewd"
android:layout_width="169dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Classification"
android:textSize="34sp" />
<TextView
android:id="@ + id/textViewd2"
android:layout_width="274dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:textSize="34sp" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
The layout is as shown in the figure:
2.3 Modify Myadapter adapter
1. Rewrite the construction method
Receive contactMS object
public Myadapter( List <contactMS> msList) {
this.msList=msList;
}
2. Rewrite the onBindViewHolder method
Set the text and image values of the page before jumping
public void onBindViewHolder(@NonNull myholder holder, int position) {
contactMS msList1= msList.get(position);
holder.messageText.setText(msList1.getMessageText());
holder.ImageView.setImageResource(msList1.getImageResourceId());
}
3. Rewrite the myholder class
Add a listener to itemview and set a click event
Use intent to pass value in the onClick method to jump to ContactDetailsActivity.class
public class myholder extends RecyclerView.ViewHolder{//The nesting of classes will call subclass objects
TextView messageText;
ImageView ImageView;
public myholder(@NonNull View itemView) {
super(itemView);
messageText = itemView.findViewById(R.id.messageText);
ImageView = itemView.findViewById(R.id.imageView);
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = getAdapterPosition();
if (position != RecyclerView.NO_POSITION) {
contactMS clickedContact = msList.get(position);
Intent intent = new Intent(itemView.getContext(), ContactDetailsActivity.class);
intent.putExtra("contact", (Parcelable) clickedContact);
itemView.getContext().startActivity(intent);
}
}
});
}
}
2.4 DefinitionContactDetailsActivity.java
Receive content in ContactDetailsActivity, take out the values of each attribute and add them to each control
public class ContactDetailsActivity extends AppCompatActivity {
@SuppressLint("MissingInflatedId")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.contact);
ImageView imageView;
TextView textView1, textView2, textView3, textView4;
// Get the contact information passed from the previous interface
contactMS contact = getIntent().getParcelableExtra("contact");
int rid=contact.getImageResourceId();
String name = contact.getMessageText();
String region = contact.getregion();
String gender = contact.getgender();
String type = contact.gettype();
textView1=findViewById(R.id.textViewa2);
textView2=findViewById(R.id.textViewb2);
textView3=findViewById(R.id.textViewc2);
textView4=findViewById(R.id.textViewd2);
imageView=findViewById(R.id.imageView5);
imageView.setImageResource(rid);
textView1.setText(name);
textView2.setText(region);
textView3.setText(gender);
textView4.setText(type);
}
}
3. Run interface display
3.1 Initial interface
3.2 Click item
(There are too many here to show them all)
4. Source code warehouse address
gitee:gitee
github:github