微信界面复刻：小程序风格-CSDN博客

本文链接：https://blog.csdn.net/m0_55906517/article/details/120630504

本文介绍了如何实现微信界面的简单版，包括顶部、中间功能区和底部菜单栏。利用fragment完成顶部到内容的布局，底部菜单栏通过LinearLayout和ImageView、TextView实现功能切换。详细代码实现可在github找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、运行界面

顶部的cx对应微信的顶部

中间的fragment对应微信的各种功能

最下面的菜单栏完成各个功能的切换

二、实现的大致思路

红色框通过4个fragment完成，每个fragment的设计基本一样。

下方底部的菜单栏通过linearlayout里面包含四个小LinearLayout，每个LinearLayout里面含有一个ImageView和一个TextView，TextView写入功能，ImageView放入对应的ui图片，ui图片我是在iconfont里面找的，通过点击下方菜单实现fragment的切换。

三、具体实现

activity_main.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=".MainActivity">


    <include
        layout="@layout/bottom"
        android:layout_width="405dp"
        android:layout_height="84dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.545"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView"
        app:layout_constraintVertical_bias="1.0"></include>

    <TextView
        android:id="@+id/textView"
        android:layout_width="410dp"
        android:layout_height="53dp"
        android:gravity="center"
        android:text="CX"
        android:textSize="34sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="406dp"
        android:layout_height="590dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView"
        app:layout_constraintVertical_bias="0.42">

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/linearLayout"
    android:layout_width="410dp"
    android:layout_height=