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基本概述)
/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作为事件监听器。
（附基于监听的事件处理机制）
/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="/apk/res/android"xmlns:app="/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="/apk/res/android"xmlns:tools="/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="/apk/res/android"xmlns:app="/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="/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上传源码的时候难倒了我，怪菜）
源码开源地址
/m0_51593540/android-experiment/-/tree/master/
