AS WeChat interface development
Feature requirements
1. Implement the list effect in any tab page; the implementation of this function requires the use of recycleview;
2. Add a click function to each item of recyclerView, and jump to a new view to display information after clicking.
Development technology
Development tools: as
Version: API 24 Android 7.0
Idea analysis
The purpose of this experiment is to add a click function to each item of recyclerView on any tab page, and jump to a new view to display information after clicking. The following two technologies must be adopted.
The implementation of the list requires the use of the control recyclerView. You need to create a separate layout for placing the recyclerview – item.xml file. In addition, you also need to create a separate layout file for the specific content of each item – fragment_txl.xml.
The jump between fragments or activities is implemented using startActivity(). In the new version, if you need to return content, you can use the registerForActivityResult() method and the launch() method to jump.
The general idea is to create an item.xml file in the layout to put the recyclerview control, and fragment_txl.xml to put the information of each item in the list. Define the initialization information in txlfragment and write the information into an array to facilitate parameter transfer. Use it with the Myadapter adapter. The specific jump method uses startActivity() to jump. On the jump details page txlDetails, accept the passed intent and display the data. Set The back button is used to go back.
Design process
1. Write layout
1.1 Add recycleview
in the new item.xml
Effect
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">
?
<androidx.recyclerview.widget.RecyclerView
android:id="@ + id/itemview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp" />
</LinearLayout>
Created a RecyclerView named itemview
1.2 Implement the information of each item in fragment_txl.xml
Effect
Code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
?
<LinearLayout
android:id="@ + id/linearLayout_txl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
?
android:layout_marginTop="15dp">
?
<ImageView
android:id="@ + id/image_touxiang"
android:layout_width="60dp"
android:layout_height="68dp"
android:layout_marginRight="20dp"
android:layout_gravity="left|center_vertical"
tools:srcCompat="@tools:sample/avatars" />
?
<TextView
android:id="@ + id/text_duihuakuang"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="left|center_vertical"
android:text="TextView"
android:textSize="24sp" />
</LinearLayout>
?
</LinearLayout>
Use a Linearlayout to include an ImageView and TextView to facilitate subsequent click jumps.
1.3 Implement the content of jump details page activity_txl_details.xml
Effect
Code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".txlDetails">
?
<TextView
android:id="@ + id/WeChatname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="name"
android:textStyle="bold"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.008"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.275" />
?
<LinearLayout
android:id="@ + id/linearLayout"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
?
</LinearLayout>
?
<LinearLayout
android:id="@ + id/linearLayout2"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
?
</LinearLayout>
?
<LinearLayout
android:id="@ + id/linearLayout3"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
?
</LinearLayout>
?
<LinearLayout
android:id="@ + id/linearLayout4"
android:layout_width="411dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
?
</LinearLayout>
?
<Button
android:id="@ + id/returnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="408dp"
android:text="Return"
android:textSize="35sp"
app:layout_constraintTop_toBottomOf="@ + id/imageDetail"
tools:layout_editor_absoluteX="146dp" />
?
<TextView
android:id="@ + id/wxtag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_weight="1"
android:textStyle="bold"
android:text="label"
android:textSize="35sp"
app:layout_constraintTop_toBottomOf="@ + id/region"
tools:layout_editor_absoluteX="5dp" />
?
<TextView
android:id="@ + id/wxtag2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="188dp"
android:layout_weight="1"
android:textStyle="bold"
android:gravity="center"
android:text="Uncategorized"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.441"
app:layout_constraintStart_toEndOf="@ + id/wxtag"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.611" />
?
<TextView
android:id="@ + id/region"
android:layout_width="141dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_weight="1"
android:textStyle="bold"
android:text="region"
android:textSize="35sp"
app:layout_constraintTop_toBottomOf="@ + id/phoneNumber"
tools:layout_editor_absoluteX="5dp" />
?
<TextView
android:id="@ + id/region2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Unknown"
android:textSize="35sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.773"
app:layout_constraintStart_toStartOf="@ + id/region"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.501" />
?
<ImageView
android:id="@ + id/imageDetail"
android:layout_width="154dp"
android:layout_height="121dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.042"
tools:srcCompat="@tools:sample/avatars" />
?
<TextView
android:id="@ + id/phoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_weight="1"
android:gravity="center"
android:textStyle="bold"
android:text="phone number"
android:textSize="35sp"
app:layout_constraintTop_toBottomOf="@ + id/WeChatname"
tools:layout_editor_absoluteX="0dp" />
?
<TextView
android:id="@ + id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_weight="1"
android:text="11111111111"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.058"
app:layout_constraintStart_toEndOf="@ + id/phoneNumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.388" />
?
<TextView
android:id="@ + id/textDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="152dp"
android:layout_weight="3"
android:gravity="center"
android:text="WeChat nickname"
android:textStyle="bold"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@ + id/WeChatname"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.275" />
?
</androidx.constraintlayout.widget.ConstraintLayout>
Set some basic information
2. Core code implementation
2.1 Implemented the initialization operation in txlFragment, generated the data array, created the RecycleView instance and set the Adapter
Code
package com.example.mywork;
?
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
?
import androidx.activity.result.ActivityResult;
import androidx.activity.result.ActivityResultCallback;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
?
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
?
public class txlFragment extends Fragment {
//Get the recyclerView object and instantiate the adapter
private RecyclerView recyclerView;
private MyAdapter myAdapter;
LinearLayout linearLayout;
?
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
//Inflate the layout for this fragment
//return inflater.inflate(R.layout.fra_lx, container, false);
View view;
//Save the views of all controls
view=inflater.inflate(R.layout.item, container, false);
//Call recycleview control
recyclerView=view.findViewById(R.id.itemview);
linearLayout=view.findViewById(R.id.linearLayout_txl);
//Create data
String[] names={"Pappy","Mommy","Sister","Little Sister","Brother","Little Brother","Roommate"} ;
int[] images={R.drawable.baba,R.drawable.mama,R.drawable.jiejie,R.drawable.meimei,R.drawable.gege,
R.drawable.didi,R.drawable.shiyou1};
String[] phones={"123456789","123456789","123456789","123456789","123456789",
"123456789","123456789"};
String[] regions={"Sichuan Nanchong","Sichuan Nanchong","Sichuan Nanchong","Sichuan Nanchong","Sichuan Nanchong","Sichuan Nanchong"," Wuhan, Hubei"};
String[] tags={"family","family","family","family","family","family","classmates"};
List<Map<String,Object>> items=new ArrayList<Map<String,Object>>();
for(int i=0;i<names.length;i + + ){
Map<String,Object> item=new HashMap<String, Object>();
item.put("i_name",names[i]);
item.put("i_image",images[i]);
item.put("i_phone",phones[i]);
item.put("i_region",regions[i]);
item.put("i_tag",tags[i]);
items.add(item);
}
//Create RecycleView instance and set Adapter
Context context=getContext();
myAdapter=new MyAdapter(items,context);
LinearLayoutManager manager=new LinearLayoutManager(context);
manager.setOrientation(recyclerView.VERTICAL);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(myAdapter);
return view;
}
}
2.2 Myadapater implements jump operation
package com.example.mywork;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
?
import androidx.activity.result.ActivityResult;
import androidx.activity.result.ActivityResultCallback;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
?
import java.util.List;
import java.util.Map;
?
public class MyAdapter extends RecyclerView.Adapter <MyAdapter.MyViewHolder>{
//Define variables for storing data and running environment
private List<Map<String,Object>> mydata;
private Context mycontext;
?
//Get data and running environment
public MyAdapter(List<Map<String,Object>> data, Context context){
mydata=data;
mycontext=context;
}
?
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view= LayoutInflater.from(mycontext).inflate(R.layout.fragment_txl,parent,false);
MyViewHolder holder=new MyViewHolder(view);
return holder;
}
?
@Override
public void onBindViewHolder(@NonNull MyAdapter.MyViewHolder holder, int position) {
String name=mydata.get(position).get("i_name").toString();
int image=Integer.parseInt(mydata.get(position).get("i_image").toString());
//Get the corresponding data of a contact in the details page
String phone=mydata.get(position).get("i_phone").toString();
String region=mydata.get(position).get("i_region").toString();
String tag=mydata.get(position).get("i_tag").toString();
holder.textView.setText(name);
holder.imageView.setImageResource(image);
?
//Add click event
holder.linearLayout_txl.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Click to jump to the contact details page
Intent intent=new Intent(mycontext, txlDetails.class);
?
//Use bundle to pass value
Bundle bundle = new Bundle();
bundle.putString("details",name);
bundle.putInt("image", image);
bundle.putString("phone",phone);
bundle.putString("region",region);
bundle.putString("tag",tag);
?
intent.putExtras(bundle);
mycontext.startActivity(intent);
}
});
}
?
@Override
public int getItemCount() {
return mydata.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public LinearLayout linearLayout_txl;
private TextView textView;
private ImageView imageView;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
//Get the control id in item
textView=itemView.findViewById(R.id.text_duihuakuang);
imageView=itemView.findViewById(R.id.image_touxiang);
linearLayout_txl=itemView.findViewById(R.id.linearLayout_txl);
}
?
}
}
The implementation of the jump is mainly to implement a monitoring for the click action of LinearLayout_txl. The specific operation is Intent intent=new Intent(mycontext, txlDetails.class) myContext is a context object representing the current Activity. txlDetails.class is the class name of the target Activity. Then bind the data compression to the bundle, add it to the intent, and finally call startActivity(intent) to jump.
2.3 txlDetails
package com.example.mywork;
?
import androidx.appcompat.app.AppCompatActivity;
?
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
?
public class txlDetails extends AppCompatActivity {
TextView dName,textView1,textView2,textView3;
ImageView dImage;
Button button_r;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_txl_details);
//Get the intent passed by the previous Actvity
Intent intent=getIntent();
dName=findViewById(R.id.textDetail);
dImage=findViewById((R.id.imageDetail));
//Set the value of the item control based on the data obtained from the intent
dImage.setImageResource(intent.getIntExtra("image",R.drawable.find));
dName.setText(intent.getStringExtra("details"));
textView1=findViewById(R.id.phone);
textView2=findViewById(R.id.region2);
textView3=findViewById(R.id.wxtag2);
textView1.setText(intent.getStringExtra("phone"));
textView2.setText(intent.getStringExtra("region"));
textView3.setText(intent.getStringExtra("tag"));
button_r=findViewById(R.id.returnButton);
button_r.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Log.d("fb","button_r....");
Intent intent = new Intent();
setResult(777,intent);
finish();
}
});
?
}
}
Used to accept data from txlFragment and display the data. A return button is set to return to the Activity before the jump.
Result display
Code repository
GitHub – Kylinxin/MyWork: WeChat-like interface source code
Summary
In this implementation, I completed the implementation of RecyclerView and understood how to pass parameters to recyclerView and set the specific appearance of each item. At the same time, we have a clearer understanding of Activity jumps, startActivity(intent); sets the jump object through intent and jumps. This method is simple and intuitive, but there is no way to handle the return value. The solution in the old version is to use the method startActivityForResult() is used to solve the problem, but there are many drawbacks and RequestCode is difficult to handle. The new version uses the registerForActivityResult() method to handle the logic of starting the Activity and getting the returned results when registering ActivityResultContracts.StartActivityForResult using the registerForActivityResult() method. ActivityResultCallback
— 2023.11.7
The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 139041 people are learning the system