Android开发-类微信简单界面设计

原创

已于 2024-11-18 21:48:55 修改 · 975 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2024-11-18 17:54:48 首次发布

实验环境:

Android Studio

功能要求:

开发一个类微信的主界面框架，布局为上中下布局，包含四个tab页面，列表页面，详情页面，从首页可以点击进入列表页面，实现tab页面之间的切换

项目结构：

实验过程：

第一步，设计底部和顶部的导航栏。在Android studio的项目文件找到res文件夹layout文件夹，右键创建一个新的top_layout.xml。在textview中拉入textview组件，在代码行将text改为“微信”，textview置顶，属性“gravity”设置为“center”，使之居中代码如下：


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/design_default_color_primary"
        android:textSize="40sp" />
</LinearLayout>

在Android studio的项目文件找到res文件夹layout文件夹，右键创建一个新的top_bottom.xml，再拖入LinearLayout(vertical)组件，再在LinearLayout组件内部拖入imageview和textview。由于一共4个tab页面，且有四个底部按钮都是相同的，因此为了简便，其实三个复制粘贴，复制完之后可能会报红，原因是四个LinearLayout下面的imageview和textview的id是一样的，修改其余三个的id。

<LinearLayout
        android:id="@+id/li"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"&