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" > <TextView android: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>- 效果图
- 采用ConstrainLayout约束布局 并设置背景颜色
---
-
中间内容页面（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"> <TextView android: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"> <LinearLayout android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="75dp" android:layout_weight="1" app:srcCompat="@drawable/weixin" /> <TextView android: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"> <include layout="@layout/top" android:layout_width="match_parent" android:layout_height="wrap_content"/> <FrameLayout android:id="@+id/content" android:layout_width="415dp" android:layout_height="wrap_content" android:layout_weight="1" /> <include layout="@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的有效范围到commit transaction=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; @Override protected 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的有效范围到commit transaction=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://www.toymoban.com/news/detail-497463.html
https://gitcode.net/m0_51593540/android-experiment/-/tree/master/文章来源地址https://www.toymoban.com/news/detail-497463.html
到了这里，关于Android开发-UI界面--类微信页面设计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
