安卓开发——微信UI界面
一、功能说明
本次作业开发的是类似微信的主页面框架,UI布局为上中下结构,用户可通过点击底部导航栏切换板块内容,其中共包含四个板块,分别是“微信”、“通讯录”、“发现”和“我的”。
二、设计流程
2.1 页面设计
微信的界面布局分为上中下三个部分。
(1)第一部分,主要是显示界面的标题。
(2)第二部分,主要是“微信”、“通讯录”、“发现”和“我的”四个板块的具体内容。
(3)第三部分,主要是“微信”、“通讯录”、“发现”和“我的”四个板块的切换控件。
2.2 功能设计
实现点击底部控件切换到对应的板块界面。
(1)创建Fragment类及其对应的layout文件
(2)创建FragmentManager管理Fragment,以及FragmentTransaction
(3)设置监听
(4)设置控件被点击后的响应事件
三、核心代码详解
3.1 界面布局代码
3.1.1 总体布局 activity_main.xml
·<!--界面顶部--><include layout="@layout/top"></include><!--界面中部--><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"></FrameLayout><!--界面底部--><include layout="@layout/bottom"></include>
<include>标签可以实现在一个layout文件中引用另一个layout文件的布局
此处则是在activity_main.xml文件中引入了top.xml文件和bottom.xml文件的布局
在FrameLayout中设置属性layout_weight=1可将FrameLayout填满界面中除了top和bottom的中间部分。
3.1.2 界面顶部 top.xml
<TextViewandroid:id="@+id/top_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="微信"android:textSize="40sp" />
3.1.3 界面中部
<?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=".Fragmentxx"><TextViewandroid:id="@+id/content1"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="这是消息界面"android:textSize="50sp" /></FrameLayout>
该部分的布局文件共有四个,分别是fra_xx.xml、fra_lx.xml、fra_fx.xml、fra_wd.xml
代码大致相同,只需修改对应的Fragment类和组件id即可
3.1.4 界面底部 bottom.xml
<LinearLayoutandroid:id="@+id/l_xiaoxi"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"android:layout_marginTop="15dp"><ImageViewandroid:id="@+id/image_xiaoxi"android:layout_width="wrap_content"android:layout_height="60dp"app:srcCompat="@drawable/xiaoxi" /><TextViewandroid:id="@+id/text_xiaoxi"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="微信"android:textSize="30sp" /></LinearLayout>
界面底部的布局稍微复杂一点,布局解释如下:
(1)最外层是一个水平的LinearLayout,使得放在里面的组件可水平放置
(2)第二层是四个垂直的LinearLayout,使得放在里面的组件可垂直放置,并且通过layout_weight将此四个LinearLayout组件均分其父布局,即每个组件占父布局的1/4。
(3)对于(2)中的每个LinearLayout都有一个ImageView和TextView,详细代码如上。
另外,ImageView组件所使用的图片需存放在/res/drawable文件夹中。
3.2 点击按钮跳转板块功能代码
Fragmentxx、Fragmentlx、Fragmentfx和Fragmentwd类的主要代码:
public class Fragmentxx extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fra_xx, container, false);}
}
Fragmentlx、Fragmentfx和Fragmentwd与上述部分的代码基本一致,主要区别在于R.layout._____ 部分需对应其对应的layout文件
MainActivity类的主要代码:
FragmentManager
FragmentManager manager;
manager=getSupportFragmentManager();
Fragment对象
Fragment fragment1,fragment2,fragment3,fragment4;
fragment1=new Fragmentxx();
fragment2=new Fragmentlx();
fragment3=new Fragmentfx();
fragment4=new Fragmentwd();
LinearLayout对象,对应的id是bottom.xml文件中的第二层LinearLayout的id
LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
linearLayout1=findViewById(R.id.l_xiaoxi);
linearLayout2=findViewById(R.id.l_lianxi);
linearLayout3=findViewById(R.id.l_faxian);
linearLayout4=findViewById(R.id.l_wode);
Transaction对象
FragmentTransaction transaction;//初始化,将所有fragment都添加到界面中部板块//对应的id是activity_main.xml中的Fragment的idpublic void inital(){transaction=manager.beginTransaction().add(R.id.content,fragment1).add(R.id.content,fragment2).add(R.id.content,fragment3).add(R.id.content,fragment4);transaction.commit();}//将所有的fragment隐藏起来public void fragmentHide(){transaction=manager.beginTransaction().hide(fragment1).hide(fragment2).hide(fragment3).hide(fragment4);transaction.commit();}//将指定的fragment进行展示public void fragmentShow(Fragment fragment){transaction=manager.beginTransaction().show(fragment);transaction.commit();}
从上述代码中可以看到最终四个板块的布局文件时如何添加到主布局中间的空板块的:
(1)首先通过Fragmentxx类绑定板块对应的布局文件fra_xx.xml;
(2)然后在MainActivity类中创建Fragmentxx对象;
(3)最后通过Transaction将Fragmentxx对象添加到主布局中间的空板块。
图片和文字颜色的改变
//定义组件对应的变量
TextView t1,t2,t3,t4;
ImageView im1,im2,im3,im4;
t1=findViewById(R.id.text_xiaoxi);
t2=findViewById(R.id.text_lianxi);
t3=findViewById(R.id.text_faxian);
t4=findViewById(R.id.text_wode);
im1=findViewById(R.id.image_xiaoxi);
im2=findViewById(R.id.image_lianxi);
im3=findViewById(R.id.image_faxian);
im4=findViewById(R.id.image_wode);
//将指定图片和文字设置为灰色public void defaultImagendText(){im1.setImageResource(R.drawable.xiaoxi);im2.setImageResource(R.drawable.lianxi);im3.setImageResource(R.drawable.faxian);im4.setImageResource(R.drawable.wode);t1.setTextColor(Color.parseColor("#8a8a8a"));t2.setTextColor(Color.parseColor("#8a8a8a"));t3.setTextColor(Color.parseColor("#8a8a8a"));t4.setTextColor(Color.parseColor("#8a8a8a"));}
监听设置如下:
public class MainActivity extends AppCompatActivity implements View.OnClickListener
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
点击按钮后的响应事件,响应逻辑如下:
(1)点击后,先将所有图片和文字变成灰色,中间板块的内容也进行隐藏
(2)通过监听获取组件id
(3)根据获取得到的id,展示对应的板块,并且被点击的图片和文字颜色变绿
public void onClick(View v) {fragmentHide();defaultImagendText();switch (v.getId()){case R.id.l_xiaoxi:fragmentShow(fragment1);im1.setImageResource(R.drawable.xiaoxi_click);t1.setTextColor(Color.parseColor("#04BE02"));break;case R.id.l_lianxi:fragmentShow(fragment2);im2.setImageResource(R.drawable.lianxi_click);t2.setTextColor(Color.parseColor("#04BE02"));break;case R.id.l_faxian:fragmentShow(fragment3);im3.setImageResource(R.drawable.faxian_click);t3.setTextColor(Color.parseColor("#04BE02"));break;case R.id.l_wode:fragmentShow(fragment4);im4.setImageResource(R.drawable.wode_click);t4.setTextColor(Color.parseColor("#04BE02"));break;};}
四、总结
4.1 运行结果展示
4.2 小结
通过本次作业练习掌握了一些安卓UI界面开发的基础知识,一开始由于组件有点多加上自己还不是很熟悉安卓UI界面的一些布局属性所以还有点云里雾里,在博客中对这些代码又重新梳理了一遍,感觉才好了些,总之收获还是很大的!
五、源码开源地址
HW_WeChat: Android 学习 (gitee.com)
安卓开发——微信UI界面相关推荐
- 安卓开发 微信ui界面设计 (Android Studio)
功能: 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 开发技术为: layout xml.控件.监听,fragment: 设计流程: 创建项目 改下项目名,编程语言为jav ...
- 安卓手机应用软件UI界面设计展示PR样机模板MOGRT
9个不同角度展示安卓手机应用软件UI界面设计作品展示PR模板Mogrt|Android安卓样机模板 主要特点: 适用于 Premiere Pro CC 2021+ 适用于图像或视频 轻松改变颜色 轻松 ...
- 安卓开发-自定义照相机界面
安卓开发-自定义照相机界面 此项目是总结了其他三位大佬的代码后写出来的,在此首先感谢三位大佬: 自定义照相机编写方法:https://blog.csdn.net/shan286/article/det ...
- 安卓开发笔记-UI设计的概念
本文是哔哩哔哩上 安卓开发教程 的笔记 UI的概念: 就是用户界面的意思 ① View 下面是官方的翻译 This class represents the basic building block ...
- 【砸壳STEP2】使用cycript查看并修改微信UI界面
z继续上次的讲,我们显示如下 cy# [alertView show] 我们使用 control + d来退出当前进程. 言归正传. 我们首先关闭全部后台程序,然后打开微信的app. 为了防止数据看起 ...
- android微信个人界面设计,安卓版微信主界面的再设计
聊天界面 前段时间刚刚上手Axure,因为某些契机,根据自己主观需求重新设计了安卓版微信界面.与现在版本区别主要是更加符合安卓的设计原则,同时对"发现"以及"我" ...
- 安卓开发-Android Studio界面介绍
Android Studio界面介绍 简介:本篇主要介绍studio内部界面的一些使用,对像我一样初学安卓的小白来说很是迷惑,很多甚至点也不敢点,这里就总结一下方便以后使用,希望大家也能多多指错~ 1 ...
- Java开发关于UI界面_Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...
- ui uview 安卓开发_uni-app UI框架之uview-ui使用教程
image uviewUI 多平台快速开发的UI框架 uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归. 因此,uView应运而生,uView的目标是成为un ...
最新文章
- JQuery方法总结
- Swift3.0语言教程获取字符串长度
- C#显示相机实时画面
- 信息摘要算法之四:SHA512算法分析与实现
- Gradle入门:集成测试
- redis服务器端和客户端启动
- python画PR曲线(precision-recall曲线)
- matlab错误使用builtin,MATLAB环境下运行MATLAB函数时发生异常
- 程序员面试被问到“三次握手,四次挥手”怎么办?
- 考研数学一之高数上册学习计划
- Codeforces Round #450
- Java多线程-while死循环
- linux\虚拟机\docker如何查看操作系统版本、内核、cup等信息
- Mac没有winnt格式_Mac视频格式转换工具-H265 Converter Pro
- 大数据-MaxWell
- OkHttp3 源码解读
- android常用刷机指令,【高级技术】Android刷机常用adb指令集合
- 微信群接口(开发思路)
- android adb 分析,android adb shell常用脚本分析课件.ppt
- MYSQL基本操作(增删改查)
热门文章
- 迪桑特宣布彭于晏成为品牌代言人;福成股份“中央厨房”创造预制菜新理念 | 知消...
- 弹性地基梁计算程序 注册机_弹性地基梁计算程序是怎样的? 弹性地基梁几种计算方法的分析比较...
- [1184]FinalShell下载安装
- 絮叨絮叨关于机房的点滴
- 16WiFi上海开通:5487辆公交车覆盖免费WiFi
- path.Dir? filepath.Dir? 傻傻分不清楚
- PDF文件限制密码如何取消
- 服务器采购框架合同协议书范本,服务器采购框架合同协议书范本(12页)-原创力文档...
- 金蝶付款申请单选单显示空白,但有合计数量
- 2018软件工程复旦、南京大学、北航、中科院、中南大学保研经历分享