模仿小红书app评论区,写一个自定义View,用xml语言实现。
时间: 2023-06-10 20:02:29 浏览: 221
自定义View的实现
好的,你要求我模仿小红书app评论区,写一个自定义View,用xml语言实现。以下是参考代码:
在res/layout/下新建一个xml文件comment_view.xml,代码如下:
```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/comment_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 用户头像 -->
<ImageView
android:id="@+id/avatar"
android:src="@mipmap/ic_launcher" // 头像图片资源
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<!-- 用户名和时间 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/username"
android:text="用户名"
android:textSize="12sp"
android:textStyle="bold"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
<TextView
android:id="@+id/time"
android:text="2021-07-01"
android:textSize="10sp"
android:textColor="#999999"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"/>
</LinearLayout>
<!-- 评论内容 -->
<TextView
android:id="@+id/comment_content"
android:text="这是一条评论"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"/>
</LinearLayout>
```
在你的 Activity 或 Fragment 中使用该自定义控件:
```
LinearLayout commentLayout = findViewById(R.id.comment_layout);
LayoutInflater inflater = LayoutInflater.from(this);
// 循环添加多条评论视图
for (int i = 0; i < 5; i++) {
View commentView = inflater.inflate(R.layout.comment_view, null);
ImageView avatar = commentView.findViewById(R.id.avatar);
TextView username = commentView.findViewById(R.id.username);
TextView time = commentView.findViewById(R.id.time);
TextView commentContent = commentView.findViewById(R.id.comment_content);
// 设置控件内容
avatar.setImageResource(R.mipmap.ic_launcher);
username.setText("用户名" + i);
time.setText("2021-07-0" + i);
commentContent.setText("这是第" + i + "条评论");
// 添加评论视图到布局
commentLayout.addView(commentView);
}
```
以上代码中,我们使用LayoutInflater动态添加5条评论View,你可以根据实际需求调整代码。希望能够帮到你!
阅读全文