一、功能说明
1.在模仿微信的基础门户页面中的某个tab页面中添加recycleview
2、对该列表页面添加点击跳转设计
二、核心代码及实验结果展示
1.布局
1.1在联系人界面添加recycleview的控件
1.2在tab2界面添加一个textview和imageview,为recycleview中的每个item进行样式设计
1.3 创建Adapter类,可将数据绑定到recycleview中对应的Item上
package com.example.app;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> { //泛型传入,
Context context1;
List<String> list1;
public Myadapter(Context context, List list) {
context1=context;
list1=list;
}
@NonNull
@Override
public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder holder=new Myholder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView.setText(list1.get(position));
}
@NonNull
@Override
public int getItemCount() {
return list1.size();
}
public class Myholder extends RecyclerView.ViewHolder{
TextView textView;
public Myholder(@NonNull View itemView) {
super(itemView);
textView=itemView.findViewById(R.id.textView5);
}
}
}
1.4修改tab2页面对应的fragment类,使其显示出联系人的头像与姓名
package com.example.myapp2;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
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 BlankFragment2 extends Fragment {
//获取recyclerView对象并且实例化适配器
private RecyclerView recyclerView;
private Myadapter myadapter;
// TODO: Rename and change types and number of parameters
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view;
//存所有控件的视图
// Inflate the layout for this fragment
view = inflater.inflate(R.layout.activity_recycleview, container, false);
//调用recycleview控件
recyclerView = view.findViewById(R.id.recyclerview);
//创建数据
String[] names = {"爸爸", "妈妈", "弟弟", "姐姐", "宝贝"};
int[] images = {R.drawable.img_ba, R.drawable.img_ma, R.drawable.img_di, R.drawable.img_jie, R.drawable.img_baby};
String[] number = {"324671", "356728", "947416", "362751", "675435"};
String[] album = {"孝感", "孝感", "孝感", "杭州", "南京"};
String[] tags = {"家人", "家人", "家人", "家人", "好朋友"};
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_number", number[i]);
item.put("i_album", album[i]);
item.put("i_tag", tags[i]);
items.add(item);
}
//创建RecycleView实例和设置Adapter
Context context = getContext();
myadapter = new Myadapter(items, context);
LinearLayoutManager manager = new LinearLayoutManager(context);
manager.setOrientation(recyclerView.VERTICAL);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(myadapter);
//实现拖拽和左滑删除效果
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
@Override
public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
int swiped = ItemTouchHelper.LEFT;
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
return makeMovementFlags(dragFlags, swiped);
}
@Override
public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
int oldPosition = viewHolder.getAdapterPosition();
int newPosition = target.getAdapterPosition();
if (oldPosition < newPosition) {
for (int i = oldPosition; i < newPosition; i++) {
// 改变数据集
Collections.swap(items, i, i + 1);
}
} else {
for (int i = oldPosition; i > newPosition; i--) {
// 改变数据集
Collections.swap(items, i, i - 1);
}
}
myadapter.notifyItemMoved(oldPosition, newPosition);
return true;
}
@Override
public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
int position = viewHolder.getAdapterPosition();
items.remove(position);
myadapter.notifyItemRemoved(position);
}
@Override
public void onSelectedChanged(@Nullable RecyclerView.ViewHolder viewHolder, int actionState) {
if(actionState!=ItemTouchHelper.ACTION_STATE_DRAG){
viewHolder.itemView.setBackgroundColor(Color.parseColor("#04BE02"));
}
}
@Override
public void clearView(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
super.clearView(recyclerView, viewHolder);
viewHolder.itemView.setBackgroundColor(Color.TRANSPARENT);
}
});
//关联recycleview
itemTouchHelper.attachToRecyclerView(recyclerView);
return view;
}
}
效果图如下:
2.实现点击
2.1添加一个Activity命名为connectdetail,在它对应的xml文件中设计详情页面布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/imageView5"
android:layout_width="140dp"
android:layout_height="89dp"
tools:srcCompat="@tools:sample/avatars"/>
<TextView
android:id="@+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信昵称"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/phonenumber2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="电话号码"
android:textSize="35sp" />
<TextView
android:id="@+id/phone2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="123456"
android:textSize="35sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/region"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="35sp"
android:text="地区" />
<TextView
android:id="@+id/region2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="35sp"
android:text="未知" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/wxtag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="35sp"
android:gravity="center"
android:text="标签" />
<TextView
android:id="@+id/wxtag2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="35sp"
android:text="未分类" />
</LinearLayout>
<Button
android:id="@+id/returnbutton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="35sp"
android:text="返回" />
</LinearLayout>
设计后的效果如下图:
2.2对adapter 类进行修改
主要修改onBindViewHolder方法中的代码
public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(mycontext).inflate(R.layout.tab2,parent,false);
Myholder holder=new Myholder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
//获取详情页中某个人的对应数据
String name= (String) mydata.get(position).get("i_name".toString());
int image=Integer.parseInt(mydata.get(position).get("i_image").toString());
String number=mydata.get(position).get("i_number").toString();
String album=mydata.get(position).get("i_album").toString();
String tag=mydata.get(position).get("i_tag").toString();
holder.textView.setText(name);
holder.imageView.setImageResource(image);
//添加点击事件
holder.textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//点击后跳转联系人详情页面
Intent intent=new Intent(mycontext,connectdetail.class);
//向intent传值
intent.putExtra("details",name);
intent.putExtra("image",image);
intent.putExtra("number",number);
intent.putExtra("album",album);
intent.putExtra("tag",tag);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
//开始跳转
mycontext.startActivity(intent);
}
});
}
2.3对Activity的connetdetail 进行添加和修改
package com.example.myapp2;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
public class connectdetail extends AppCompatActivity {
TextView dName,textView1,textView2,textView3;
ImageView dImage;
Button button_r;
@SuppressLint("WrongViewCast")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_connectdetail);
Intent intent=getIntent();
//根据intent传过来的值设置item控件de值
dName=findViewById(R.id.textView12);
dImage=findViewById(R.id.imageView5);
dImage.setImageResource(intent.getIntExtra("image",R.drawable.img_ba));
dName.setText(intent.getStringExtra("details"));
textView1=findViewById(R.id.phone2);
textView2=findViewById(R.id.region2);
textView3=findViewById(R.id.wxtag2);
textView1.setText(intent.getStringExtra("number"));
textView2.setText(intent.getStringExtra("album"));
textView3.setText(intent.getStringExtra("tag"));
button_r=findViewById(R.id.returnbutton2);
button_r.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent1=new Intent();
setResult(666,intent);
finish();
}
});
}
}
3.结果展示:
三、实验总结:
这次实验我实现了点击和跳转,在上一次实验的基础上,将联系人的详情界面实现,也加上了点击跳转的效果,这次因为添加了几个联系人xml控件与代码的对应关系更为紧密,在实验过程中一定要看准没一个控件的id。
源码地址:
https://gitee.com/lyw0412/MyApp2.git