AS第一次作业：实现APP门户界面框架设计

最新推荐文章于 2024-08-05 11:00:00 发布

人多吃冰棍

最新推荐文章于 2024-08-05 11:00:00 发布

阅读量680

点赞数 1

分类专栏： AS作业文章标签： android 微信

本文链接：https://blog.csdn.net/m0_51345650/article/details/120607028

版权

本文详细介绍了如何设计并实现一个具有四个tab页的Android应用门户界面。从基本框架搭建，包括顶部、底部布局及总框架XML设计，到使用Fragment实现点击切换功能，再到调整UI外观，如图标和文本颜色变化，以及初始界面优化，一步步展示了整个过程。项目源代码可供参考。

摘要由CSDN通过智能技术生成

3.总框架activity_main.xml：

本次作业的内容为：根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；

技术：使用布局（layouts）和分段（fragment），对控件进行点击监听。

APP界面效果展示：

实现过程：

注：所有定义以及相关赋值可在文章最后查看项目源码或点此链接查看（包括文中提到的onCreate函数）。

一、基本框架实现：

观察APP实现后的效果图，可见基本框架可分为三个部分：顶部title，中部的FrameLayout，底部的四个点击切换动作。

可知需要七个layout文件才能将完整的界面显示，分别为：顶部，底部，中部四个tag，以及一个总框架。中部四个tag会在后面点击切换部分展示，这里先看其他三个部分，可按以下顺序依次实现。

1.顶部top.xml：

顶部较为简单，只需一个TextView即可，最外层为一个水平的LinearLayout布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Wangkai Wechat"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

2.底部bottom.xml：

底部四个点击切换动作每个都需要一个ImageView和一个TextView，并且两个控件要被包含在同一个LinearLayout之中，最后四个LinearLayout的外层使用水平的LinearLayout布局。以下为其中一个LinearLayout的代码（其余三个替换图片和文字即可）：

<LinearLayout
        android:id="@+id/LinearLayout_wechat"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/wechat2" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信"
        android:textColor=