Android开发-UI界面--类微信页面设计

Android开发-UI界面–类微信页面设计

一、功能说明

设计一个类似微信的主页面框架，UI布局为上中下结构，包含了四个tag页面

二、开发技术

本次用到了layout.xml、控件、监听、fragment

layout（布局）

定义了用户界面的可视化结构，主要有4种布局：

ConstrainLayout（约束布局）：一个使用“相对定位”灵活地确定微件的位置和大小的一个布局
LinearLayout （线性布局）：按照水平或垂直的顺序将子元素(可以是控件或布局)依次按照顺序排列，每一个元素都位于前面一个元素之后。分为两种：水平方向和垂直方向的布局
FrameLayout （帧布局）：Fragment是Android3.0后引入的一个新的API，他出现的初衷是为了适应大屏幕的平板电脑，普通手机开发也会加入这个Fragment，可以把他看成一个小型的Activity，又称Activity片段。使用Fragment 可以把屏幕划分成几块，然后进行分组，进行一个模块化的管理，从而可以更加方便的在运行过程中动态地更新Activity的用户界面。注：另外Fragment并不能单独使用，他需要嵌套在Activity 中使用，尽管他拥有自己的生命周期，但是还是会受到宿主Activity的生命周期的影响，比如Activity 被destory销毁了，他也会跟着销毁！
- (附fragment基本概述)
https://www.runoob.com/w3cnote/android-tutorial-fragment-base.html
TableLayout （表格布局）：适用于多行多列的布局格式，每个 TableLayout 是由多个 TableRow 组成，一个 TableRow 就表示 TableLayout 中的每一行，这一行可以由多个子元素组成。实际上 TableLayout 和 TableRow 都是 LineLayout 线性布局的子类

控件

这次设计类微信界面，所以主要用到的控件是Textview、ImageView、include

Textview:继承于View，在View的基础上加了文本
ImageView:继承于View，在View的基础上加了图像
include:重用布局文件

监听

监听分为五类：直接用匿名内部类、使用内部类、使用外部类、直接使用Activity作为事件监听器、直接绑定到标签。注：本项目里使用直接使用Activity作为事件监听器。

（附基于监听的事件处理机制）

https://www.runoob.com/w3cnote/android-tutorial-listen-event-handle.html

三、设计流程与核心代码详解

1.创建项目

创建一个空项目

2.资源文件导入

将图片文件放在项目res/drawable文件夹下

3、布局设计

创建top.xml、bottom.xml、frangment1（2、3、4）.xml、main.xml文件

标题栏（top.xml)

采用ConstrainLayout约束布局并设置背景颜色background
使用TextView控件，并设置属性
- gravity–居中(cnter),textColor,textSize等

<?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"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F3EEC5" ><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="微信"android:textColor="#B87614"android:textSize="35sp"android:textStyle="normal"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果图

---

中间内容页面（fragment1.xml 注：fragment2、3、4与1类似就不赘述了)

fragment1、2、3、4分别对应微信、通讯录、发现、我的页面，后期将通过监听bottom底部区域显示对应的显示内容
采用FragmentLayout帧布局

一个TextView控件

<?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=".fragment1"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:textSize="35sp"android:text="这是微信界面~" /></FrameLayout>

效果图（分别是微信、通讯录、发现、我的界面。此处只展示微信界面）

底部栏（bottom.xml)

采用LinearLayout线性布局（horizontal）–嵌套

结构图(注意：嵌套的时候可以看结构树的层次)

使用 LinearLayout布局（vertical）将imageView–TextView包裹起来

下面展示linearlayout1源码，后面几个类似

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/LinearLayout"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:id="@+id/linearlayout1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="75dp"android:layout_weight="1"app:srcCompat="@drawable/weixin" /><TextViewandroid:id="@+id/tv1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:gravity="center"android:text="微信"android:textColor="#C65906"android:textSize="18sp" /></LinearLayout>
</LinearLayout

效果图–注：蓝色框为一个LinearLayout包含imageview、TextView

整合（activity_main.xml)

采用LinearLayout线性布局（vertical）–嵌套

结构图

采用include控件重用布局文件（top、bottom）

content为Fragment布局

<?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"><includelayout="@layout/top"android:layout_width="match_parent"android:layout_height="wrap_content"/><FrameLayoutandroid:id="@+id/content"android:layout_width="415dp"android:layout_height="wrap_content"android:layout_weight="1" /><includelayout="@layout/bottom"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>

效果图(小熊维尼版图标违规，换了一个内容一样图标不一样的项目展示)

4.java程序设计–编写控制代码逻辑的java文件

新建变量，使变量与设计好的组件一一对应
- fragment1、2、3、4对应fragment1（2、3、4）.xml文件
- transaction–事务
- linearLayout1、2、3、4对应bottom文件中的linearlayout1、2、3、4

对LinearLayout赋值

创建FragmentManager管理fragment，并向main.xml文件中的fragmentlayout加入fragment1、2、3、4

---

编写inital（）函数–给fragment页面初始化

 public void inital(){//transaction的有效范围到committransaction=manager.beginTransaction().add(R.id.content,fragment1).add(R.id.content,fragment2).add(R.id.content,fragment3).add(R.id.content,fragment4).commit();}

编写fragmentHide（）函数–隐藏fragment页面，防止堆叠

 public void fragmentHide(){transaction=manager.beginTransaction().hide(fragment1).hide(fragment2).hide(fragment3).hide(fragment4).commit();}

编写showfragment（）函数–展示fragment页面

 private void showfragment(Fragment fragment){transaction=manager.beginTransaction().show(fragment).commit();}

对bottom.xml文件中的四个LinearLayout进行监听
- 使用-直接使用Activity作为事件监听器。

    linearLayout1.setOnClickListener(this);linearLayout2.setOnClickListener(this);linearLayout3.setOnClickListener(this);linearLayout4.setOnClickListener(this);

编写onClick（）函数–对不同LinearLayout监听做出不同反应

使用Switch语句实现

 public void onClick(View view) {fragmentHide();switch (view.getId()){case R.id.linearlayout1: showfragment(fragment1);break;case R.id.linearlayout2: showfragment(fragment2);break;case R.id.linearlayout3: showfragment(fragment3);break;case R.id.linearlayout4: showfragment(fragment4);break;}}

小结

(1) 先通过fragmentHide（）对fragment页面进行隐藏

(2) 在程序开始时调用showfragment（）显示fragment1作为默认显示

(3) 对四个LinearLayout进行监听，点击哪一个LinearLayout就通过onClick（）显示对应内容

MainActivity.java文件

package com.example.experiment;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener {TextView textView;Fragment fragment1,fragment2,fragment3,fragment4;FragmentManager manager;int transaction;LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);linearLayout1=findViewById(R.id.linearlayout1);linearLayout2=findViewById(R.id.linearlayout2);linearLayout3=findViewById(R.id.linearlayout3);linearLayout4=findViewById(R.id.linearlayout4);manager=getSupportFragmentManager();fragment1=new fragment1();fragment2=new fragment2();fragment3=new fragment3();fragment4=new fragment4();inital();//初始化fragmentHide();//隐藏fragment 防止堆叠showfragment(fragment1);linearLayout1.setOnClickListener(this);linearLayout2.setOnClickListener(this);linearLayout3.setOnClickListener(this);linearLayout4.setOnClickListener(this);}public void onClick(View view) {fragmentHide();switch (view.getId()){case R.id.linearlayout1: showfragment(fragment1);break;case R.id.linearlayout2: showfragment(fragment2);break;case R.id.linearlayout3: showfragment(fragment3);break;case R.id.linearlayout4: showfragment(fragment4);break;}}private void showfragment(Fragment fragment){transaction=manager.beginTransaction().show(fragment).commit();}public void inital(){//transaction的有效范围到committransaction=manager.beginTransaction().add(R.id.content,fragment1).add(R.id.content,fragment2).add(R.id.content,fragment3).add(R.id.content,fragment4).commit();}public void fragmentHide(){transaction=manager.beginTransaction().hide(fragment1).hide(fragment2).hide(fragment3).hide(fragment4).commit();}
}

四、结果演示

总结：本月的安卓学习中主要围绕UI界面，设计了一个类微信界面，图标满满少女心（简直爱惨了），大致了解了几种布局、控件的属性设置、对应的java文件编写。在设计的时候一点点调属性真的很好玩，到java文件的编写的时候就需要理一理逻辑了，对可以封装的函数可以进行封装（这是一个好习惯），小小的期待一下后面的实验，希望不要难倒我。（很好在用git上传源码的时候难倒了我，怪菜）
源码开源地址

https://gitcode.net/m0_51593540/android-experiment/-/tree/master/