【移动开发学习】 Android Studio 编写一个简单的微信界面 (2)

Android Studio简单还原微信ui

---

上一期完成内容（前情提要）

　　上次我们简单地实现了微信的几个初始界面，并且在联系人页面通过recycleview添加了许多的view

目标

　　建立在上次的基础上，我们来扩展联系人界面的功能，给每一个view添加一个点击功能，让其可以跳转到另一个activity，来显示联系人详细信息

技术需求

　　activity, xml, fragment, recyclerview

成果展示

　　联系人列表中的每一项都可以点击，并跳转到对应联系人的详细页

　　

              

仓库地址

https://github.com/SmileEX/wecaht.git

 

---

实现过程

在 onBindViewHolder 中添加 onClick 函数

首先我们要在之前编写的 RecycleViewAdapter 中添加额外的代码逻辑，让我们的每一个item具有点击功能，我们在 onBindViewHolder 中添加onClick函数。

@Override
    public void onBindViewHolder(@NonNull Myviewholder holder, int position) {
        holder.tvimg.setImageResource(mSrc.get(position));
        holder.tvContent.setText(mList.get(position));
        final int itemPosition = position;
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String selectedItem = mList.get(itemPosition);
                Toast.makeText(v.getContext(), "Clicked: " + selectedItem, Toast.LENGTH_SHORT).show();
                //跳转
                Intent intent = new Intent(context, FriendDetailsActivity.class);
                //传输信息给跳转的activity，以便在新的activity中显示被点击item对应的内容
                intent.putExtra("name", mList.get(itemPosition));
                intent.putExtra("avatar", mSrc.get(itemPosition));
                context.startActivity(intent);
            }
        });
    }

当用户点击一个item时，会先在屏幕底部弹出提示 “Clicked：被点击id”， 然后再跳转到新的页面，这个页面是用来显示联系人详情的，我们通过 Intent 去传递信息来让新的 activity 显示对应的内容。

---

 

设计跳转 activity

简单编写一个联系人详情页，可以显示这个联系人的头像，id，以及地区等信息，其中头像和id可以根据item的信息而变化，地区和微信号的显示暂时只是静态的

编写完后的预览大概这个样子

 以下时xml文件内容

<?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"
    tools:context=".FriendDetailsActivity">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textSize="30sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/friendDetail" />

    <TextView
        android:id="@+id/friendDetail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="这是联系人详情页"
        android:textAlignment="center"
        android:textColor="#2196F3"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/information"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/avatar"
        app:layout_constraintTop_toBottomOf="@+id/friendDetail" />

    <TextView
        android:id="@+id/wechatid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信号：xxxxx"
        android:textSize="15sp"
        app:layout_constraintStart_toEndOf="@+id/avatar"
        app:layout_constraintTop_toBottomOf="@+id/information" />

    <TextView
        android:id="@+id/area"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="地区：中国"
        android:textSize="15sp"
        app:layout_constraintStart_toEndOf="@+id/avatar"
        app:layout_constraintTop_toBottomOf="@+id/wechatid" />

    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="发消息(todo)"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

最后再来编写一下联系人详情页的activity的java文件

public class FriendDetailsActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_friend_details);
        
        //接受Adapter传输过来的信息
        Intent intent = getIntent();
        //第一个是联系人id信息
        String string = intent.getStringExtra("name");
        //第二个是联系人头像信息
        int avatar = intent.getIntExtra("avatar", 0);
        //然后再给对应的view设置对应信息的路径
        TextView textview = findViewById(R.id.information);
        textview.setText(string);
        ImageView imageview = findViewById(R.id.avatar);
        imageview.setImageResource(avatar);
    }
}

通过getIntent函数我们接受来自item传送过来的id和头像信息，然后再给对应view设置对应的id和图片资源路径

getIntExtra()函数的第二个参数是默认是，也就是如果未能从Intent获取关于头像路径的信息就会默认填入，所以可以设置一个默认值来避免头像显示空白

 

仓库链接

https://github.com/SmileEX/wecaht.git