安卓开发——微信界面设计

开心小聋瞎

已于 2023-10-25 16:57:23 修改

阅读量677

点赞数 2

分类专栏：移动开发技术文章标签： android

于 2023-10-14 17:12:32 首次发布

本文链接：https://blog.csdn.net/weixin_62114310/article/details/133622811

版权

移动开发技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、功能说明

d12259f7-9be1-4707-8802-258197b1df05

设计一个app的门户框架，需要实现3-4个tab切换效果
使用recycleview在任一tab页中实现列表效果（本案例实现类朋友圈页面）
对该列表页面添加点击跳转设计

二、设计思路

主页面设计：创建一个主页面，这个页面包括四个选项卡，分别代表不同的功能。为每个选项卡创建一个Fragment。
朋友圈列表页： 选中一个Fragment，初始化一个RecyclerView来显示朋友圈的列表。创建FriendCircleAdapter来管理数据的绑定，然后为列表项设计XML布局。
朋友圈详细页面： 通过FriendCircleDetailActivity来实现朋友圈详细信息的展示。
导航功能： 在主页面中，通过选项卡切换不同的Fragment，实现导航功能。例如，当点击"发现"选项卡时，切换到相应的Fragment来显示朋友圈列表。

三、核心代码详解

主页面

xml文件

本xml文件定义了微信朋友圈界面的主体结构。FrameLayout用于承载不同的Fragment，实现页面切换。RecyclerView内嵌其中，用于显示朋友圈列表。同时采用include引用了顶部和底部布局，保持一致性。

<?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">
    <include layout="@layout/top" />
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ECEEEE">
        
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

    <include layout="@layout/buttom" />
</LinearLayout>

初始化页面和点击事件监听

初始化选项卡和FragmentManager，以及四个Fragment。设置点击事件监听器，以确保用户点击选项卡时可以触发相应的事件。

// 初始化页面
linearLayout1 = findViewById(R.id.id_tab_wechat);
linearLayout2 = findViewById(R.id.id_tab_addrList);
linearLayout3 = findViewById(R.id.id_tab_friendsCircle);
linearLayout4 = findViewById(R.id.id_tab_my);

// 管理页面切换
fragmentManager = getSupportFragmentManager();
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();

// 设置监听器
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);

页面切换功能

根据用户点击的选项卡，显示或隐藏相应的Fragment，实现页面切换功能。

@Override
public void onClick(View view) {
    fragmentHide(); // 隐藏所有Fragment
    if (view.getId() == l1)
        fragmentshow(fragment1); // 显示聊天页面
    else if (view.getId() == l2)
        fragmentshow(fragment2); // 显示通讯录页面
    else if (view.getId() == l3)
        fragmentshow(fragment3); // 显示朋友圈页面
    else if (view.getId() == l4)
        fragmentshow(fragment4); // 显示设置页面
}

加载朋友圈页面数据

首先清空之前的数据，然后创建一个新的Fragment3来显示最新的朋友圈内容。

private void loadFriendCircleData() {
    // 清空之前的数据
    Fragment3 fragment3 = (Fragment3) getSupportFragmentManager().findFragmentById(R.id.content);
    if (fragment3 != null) {
        fragment3.clearFriendCircleData();
    }

    // 添加新的朋友圈数据
    Fragment3 fragment3New = new Fragment3();
    fragment3New.addFriendCircleData("小鸡毛", "徒手提小白", R.drawable.x);
    fragment3New.addFriendCircleData("小白", "My Photo", R.drawable.c);

    // 显示朋友圈页面
    fragmentshow(fragment3New);
}

朋友圈列表页面

xml文件

TextView用于显示标题，RecyclerView则扮演着朋友圈列表的角色。

<?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:background="@drawable/bc">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是朋友圈界面"
        android:textSize="40sp" />
    <!-- fragment3.xml -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

数据加载和显示

在onCreateView方法中，初始化RecyclerView，创建一个适配器(FriendCircleAdapter)，并将其设置给RecyclerView，以在页面上显示朋友圈数据。

friendCircleList = new ArrayList<>();
// 添加朋友圈数据到 friendCircleList
addFriendCircleData("小鸡毛", "徒手提小白", R.drawable.x);
// ...

adapter = new FriendCircleAdapter(friendCircleList);
recyclerView.setAdapter(adapter);

点击事件处理

通过添加OnItemTouchListener，实现了点击朋友圈项后跳转到详细页面的功能。

当用户点击列表项时，它使用RecyclerView的addOnItemTouchListener来捕获点击事件。如果用户点击了有效的列表项，它会创建一个Intent，将朋友圈数据（用户名、内容、图片资源）附加到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;
    }
});

数据处理

通过addFriendCircleData方法，添加朋友圈数据到friendCircleList中，clearFriendCircleData方法用于清空数据。

FriendCircleAdapter

onCreateViewHolder

用于创建ViewHolder实例，它解析朋友圈列表项的XML布局文件friend_circle_item.xml，并返回一个用于显示单个列表项的ViewHolder。

public FriendCircleViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.friend_circle_item, parent, false);
        return new FriendCircleViewHolder(view);
    }

onBindViewHolder

在每次需要显示列表项时被调用，它将朋友圈数据绑定到相应的ViewHolder上，设置用户名、内容和图片资源。

public void onBindViewHolder(@NonNull FriendCircleViewHolder holder, int position) {
        FriendCircleItem item = friendCircleItems.get(position);
        holder.usernameTextView.setText(item.getUsername());
        holder.contentTextView.setText(item.getContent());
        holder.imageView.setImageResource(item.getImageResource());
    }

朋友圈详细信息页面

获取Intent传递的数据

在onCreate方法中，首先获取通过Intent传递的数据，包括用户名、内容和图片资源。这些数据是从主页面点击朋友圈列表项时传递过来的。

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_friend_circle_detail);

        // Retrieve data from the intent
        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);
        }

XML布局文件

在TextView中显示了发表者的用户名和文本内容，通过不同的文本大小和样式来突出显示。

使用ImageView来显示朋友圈中的图片，添加了一个"Return"按钮，用户可以点击它返回到朋友圈列表页面，实现了页面之间的跳转。

<?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"
    android:background="@drawable/bc">

    <TextView
        android:id="@+id/usernameDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="发表者"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/contentDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="文本内容"
        android:textSize="30sp" />

    <ImageView
        android:id="@+id/imageDetail"
        android:layout_width="match_parent"
        android:layout_height="388dp"
        android:src="@drawable/x" />

    <Button
        android:id="@+id/returnButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"

        android:layout_marginTop="16dp"
        android:text="Return" />

</LinearLayout>

四、页面实现效果展示

tab页面

展示1	展示2

朋友圈页面

展示1	展示2

朋友圈详细页面

展示1	展示2

五、实验总结

通过本次实验，我对于Android开发有了新的认知和体会。从最开始只会最简单的布局，到现在通过Fragment实现多个页面跳转，利用activity生命周期实现详细页面展示，也可以根据自己的喜好完成页面布局文件的设置，这无疑是一个不断进步的过程。但是也有一些粗心的地方，比如在进行朋友圈详细页面跳转的过程中，由于遗忘了需要对于activity文件的注册，导致点击之后并没有跳转。不管是错误还是学习中收获的知识，都对我来说十分珍贵。

六、源码开源地址

Wechat: 移动开发技术作业1 (gitee.com)https://gitee.com/chenxinxyy/wechat

开心小聋瞎

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
安卓开发——微信界面设计

通过本次实验，我对于Android开发有了新的认知和体会。从最开始只会最简单的布局，到现在通过Fragment实现多个页面跳转，利用activity生命周期实现详细页面展示，也可以根据自己的喜好完成页面布局文件的设置，这无疑是一个不断进步的过程。但是也有一些粗心的地方，比如在进行朋友圈详细页面跳转的过程中，由于遗忘了需要对于activity文件的注册，导致点击之后并没有跳转。不管是错误还是学习中收获的知识，都对我来说十分珍贵。
复制链接

扫一扫