安卓开发——详情页面跳转

一、功能说明

在微信界面开发的基础上，实现在列表页上点击跳转到另一详情页面；

二、设计思路

1. 在上一次微信界面开发的页面基础上实现朋友圈页面跳转到详情页面
2. 在详情页面增加类似真实朋友圈的设计，例如点赞和评论

三、核心代码详解

详情页面xml文件设计

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bc"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="start|center_vertical">

        <TextView
            android:id="@+id/usernameDetail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发表者"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textSize="40sp"
            android:textColor="#000000" />

    </LinearLayout>

    <TextView
        android:id="@+id/contentDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本内容"
        android:textSize="30sp"
        android:textColor="#000000" />

    <ImageView
        android:id="@+id/imageDetail"
        android:layout_width="match_parent"
        android:layout_height="308dp"
        android:src="@drawable/x"
        android:scaleType="centerCrop"
        android:background="@android:color/transparent"
        android:padding="4dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="start|center_vertical">

        <Button
            android:id="@+id/likeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="点赞"
            android:textSize="20sp" />

        <Button
            android:id="@+id/commentButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="评论"
            android:textSize="20sp" />

    </LinearLayout>

    <EditText
        android:id="@+id/commentEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="添加评论"
        android:textColor="#000000" />

    <Button
        android:id="@+id/returnButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Return"
        android:textSize="20sp" />
    <LinearLayout
        android:id="@+id/commentLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        android:layout_marginTop="8dp">
        <!-- 这个布局将用于显示评论 -->
    </LinearLayout>


</LinearLayout>

• 互动按钮

新增"点赞" 和 "评论" 两个 Button，为了使UI页面更加美观，将按钮同时放置于一个水平排列的 LinearLayout 中，使其水平排列并左对齐。

• 评论输入框

使用 EditText 元素，用户可以在这里输入评论。android:hint 属性设置了输入框的提示文本，指示用户在此输入评论。

• 评论内容显示

新建一个垂直排列的 LinearLayout，用于显示评论内容

详情页面代码

数据检索

通过 Intent 从上一个 Activity 获取数据，包括用户名 (username)、文本内容 (content) 和图片资源 (imageResource)，并传递给相应变量用来显示相关数据

Intent intent = getIntent();
        if (intent != null) {
            String username = intent.getStringExtra("username");
            String content = intent.getStringExtra("content");
            int imageResource = intent.getIntExtra("imageResource", 0);

            // 显示数据
            TextView usernameTextView = findViewById(R.id.usernameDetail);
            TextView contentTextView = findViewById(R.id.contentDetail);
            ImageView imageView = findViewById(R.id.imageDetail);

            // Set the data to the views
            usernameTextView.setText(username);
            contentTextView.setText(content);
            imageView.setImageResource(imageResource);
        }

 "Return" 按钮和"Like" 按钮

• “Return”按钮：添加点击事件监听器，当用户点击时会调用 finish() 方法关闭当前 Activity，返回到上一个界面。
• “Like”按钮：当用户点击 "点赞" 按钮时，将按钮文本设置为 "已点赞" 并禁用按钮，演示了一次点赞的操作。

// Find the "Return" button and add a click listener
        Button returnButton = findViewById(R.id.returnButton);
        returnButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Finish the activity when the button is clicked
                finish();
            }
        });

        // Find the "Like" button and add a click listener
        likeButton = findViewById(R.id.likeButton);
        likeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 在此处执行点赞操作或显示点赞用户列表的操作
                // 您可以根据用户点击按钮的操作来实现相应的逻辑
                // 这里只是示例，您可以根据您的需求来进行更多操作
                likeButton.setText("已点赞");
                likeButton.setEnabled(false); // 禁用按钮，示例中仅演示一次点赞
            }
        });

 评论功能

在用户点击 "评论" 按钮后，从评论输入框获取用户输入的评论，然后将评论内容以文本形式显示在界面上。如果评论不为空，它会创建一个新的文本视图 (TextView) 以显示评论内容，设置字体大小和颜色，然后将其添加到评论布局 (commentLayout) 中，并清空评论输入框。

commentEditText = findViewById(R.id.commentEditText);

        // Find the "Comment" button and add a click listener
        commentButton = findViewById(R.id.commentButton);
        commentButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 获取用户输入的评论
                String comment = commentEditText.getText().toString();

                if (!comment.isEmpty()) {
                    // 创建一个新的 TextView 用于显示评论内容
                    TextView commentTextView = new TextView(FriendCircleDetailActivity.this);
                    commentTextView.setText(comment);
                    commentTextView.setTextSize(18); // 设置评论文本的字体大小
                    commentTextView.setTextColor(Color.BLACK); // 设置评论文本的颜色

                    // 获取用于显示评论的 LinearLayout
                    commentLayout = findViewById(R.id.commentLayout);
                    commentLayout.addView(commentTextView); // 添加评论 TextView 到布局中

                    // 清空评论输入框
                    commentEditText.setText("");
                }
            }
        });

 跳转到详情页面

在fragment3的代码段中，在 recyclerView 上添加了一个触摸监听器，以检测用户是否点击了某个朋友圈项。如果点击了，它会创建一个 Intent 并将有关点击的数据（用户名、内容、图片等）添加到 Intent 中，然后通过 startActivity(intent) 启动 FriendCircleDetailActivity 来显示详细信息。

recyclerView.addOnItemTouchListener(new RecyclerView.SimpleOnItemTouchListener() {
    @Override
    public boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e) {
        View child = rv.findChildViewUnder(e.getX(), e.getY());
        if (child != null && gestureDetector.onTouchEvent(e)) {
            int position = rv.getChildAdapterPosition(child);
            FriendCircleItem clickedItem = friendCircleList.get(position);
            Intent intent = new Intent(getContext(), FriendCircleDetailActivity.class);
            intent.putExtra("username", clickedItem.getUsername());
            intent.putExtra("content", clickedItem.getContent());
            intent.putExtra("imageResource", clickedItem.getImageResource());
            startActivity(intent);
            return true;
        }
        return false;
    }
});

 四、页面实现效果展示

 

五、实验总结

本次实验帮助我初步了解了Android应用开发的基本步骤和常见控件的使用。我学会了如何创建布局文件、处理用户交互、传递数据以及使用RecyclerView和Adapter来管理列表数据。在实验过程中，我也发现了Android开发文档和在线资源的重要性，它们对解决问题和学习新知识非常有帮助。润色补充一下这段话，可以插入Intent实现跳转和传递数据的基本知识点。

六、源码地址

ChenXin/Wechat - 码云 - 开源中国 (gitee.com)