应用开发作业1——类微信页面设计

chengbai_l012

已于 2023-03-06 23:46:21 修改

阅读量201

点赞数

文章标签： ui

于 2023-03-06 22:53:22 首次发布

本文链接：https://blog.csdn.net/chengbai_l012/article/details/129371764

版权

2.1.4 Layout_Main.xml

2.2 MainActivity代码配置

2.2.1新建四个fragment：将fragment与对应的layout文件相关联

2.2.2完善相应的四个fragment.xml

2.2.3编写MainActivity文件的Java代码

三、运行界面展示

四、源码仓库地

一、设计目标

1.1 设计要求

完成微信页面的设计，包括4个 fragment

1.2 设计功能介绍

分为3层，第一层是微信名，第二层是页面，第三层是按钮。不同按钮按了会显示不一样的画面。

二、界面设计详解

2.1 UI布局设计

2.1.1 准备图片

需要提前准备8张png格式的图片，存放到drawable文件夹中。

比如我的链接D:\Android\hallo\app\src\main\res\drawable

或者as里面的文件夹打开方式：app--->res--->右击drawable--->Open In--->explorer，

如下图所示：

2.1.2 顶端top.xml

1.在layout中新建top.xml，步骤如下所示

app--->res--->右击layout--->New--->XML--->Layout XML File

找到textview复制到下面框里

编辑coad

加入下列代码：

其中采用了相对布局

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/g3"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">

        <TextView
            android:id="@+id/testValue1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/name1"
            android:textColor="@color/black1"
            android:textSize="30sp"
            android:textStyle="bold" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2.1.3 底端button.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"
    android:layout_width="match_parent"
    android:background="@color/w1"
    android:layout_height="100dp"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/layout_weixin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/g4"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/tu1"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@color/w1"
            android:clickable="false"
            android:contentDescription="@string/textValue1"
            android:src="@drawable/tu_weixin" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:gravity="center_horizontal"
            android:text="@string/textValue1"
            android:textColor="@color/b1"
            android:textSize="30sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_lxr"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/g4"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/tu2"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@color/w1"
            android:clickable="false"
            android:contentDescription="@string/textValue2"
            android:src="@drawable/tu_lxr" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/textValue2"
            android:clickable="false"
            android:textColor="@color/b1"
            android:textStyle="bold"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_space"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/g4"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/tu3"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@color/w1"
            android:clickable="false"
            android:contentDescription="@string/textValue3"
            android:src="@drawable/tu_space" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/textValue3"
            android:clickable="false"
            android:textColor="@color/b1"
            android:textStyle="bold"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_mine"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/g4"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/tu4"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@color/w1"
            android:clickable="false"
            android:contentDescription="@string/textValue4"
            android:src="@drawable/tu_mine" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/textValue4"
            android:clickable="false"
            android:textColor="@color/b1"
            android:textStyle="bold"
            android:textSize="30sp" />
    </LinearLayout>

</LinearLayout>

完成后如图：

2.1.4 Layout_Main.xml

1.删除原有的activity_main.xml,在layout中新建Layout_Main.xml，步骤如下所示:

app--->res--->右击layout--->New--->XML--->Layout XML File

2.通过两个include引入top和bottom

3.在两个include中加入控件FrameLayout如下图

代码如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_weight="0" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0" />

</LinearLayout>

完成配置后如图：

2.2 MainActivity代码配置

2.2.1新建四个fragment：将fragment与对应的layout文件相关联

新建java文件，一般xml文件也会在Layout中同步新建

app--->右击java--->New--->Fragment--->Fragment(Blank)

我的名字是frament_weixin

其中的代码是自动配置好的

2.2.2完善相应的四个fragment.xml

步骤与top.xml、bottom.xml步骤类似，首先找到textView控件，然后拖入FrameLayout下面，最后配置cod

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment_weixin">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/textValue5"
        android:textSize="40sp"
        android:textStyle="bold" />
</FrameLayout>

2.2.3编写MainActivity文件的Java代码

（1）加载fragment：首先获取四个fragment对象，然后定义initFragment()方法，将这四个fragment加载到activity_main文件的FrameLayout中去

初始化函数

找到响应区：我们需要对底部四个控件进行点击事件的监听，因此定义initView()方法找到响应区。为了增强用户体验感，用户点击时只需要点击LinearLayout包含的区域即可触发tab切换另外点击图片时图片资源会发生改变，因此也需获取图片对象。

定义事件启动函数：MainActivity实现接口View.OnClickListener，默认会对界面进行全屏监听，这里我们只需要对四个控件进行监听

控制tab变换：自定义setSelect(int i)函数来显示不同界面内容。一共有四个tab，我们给每个tab设置一个index作为标记，第一个tab为0，第二个tab为1，以此类推，默认index为0。当点击到第i个tab时，需要显示该界面内容，并且将图片变为绿色。要实现此功能，需要先将所有界面都隐藏，再通过switch来匹配，将标记i对应的界面展示出来，并修改图片。函数hideFragment()实现隐藏所有界面功能。