微信|移动开发.Android studio实现类Wechat界面
移动开发.Android studio实现类Wechat界面
移动开发.Android studio实现类Wechat界面
文章目录
-
- **1>类Wechat界面有哪些功能**
- **2>分析如何实现这些功能**
- **3>bottom.xml的构造**
- **4>top.xml的构造**
- **5>activity_main.xml的构造**
- **6>****MainActivity的构造**
- **7>调用的四个Fragment文件**
- 8>Wechat的运行**
1>类Wechat界面有哪些功能
1.在界面的下方有四个按钮，微信，朋友，通讯录，设置，按下后按钮会又暗变亮
2.在点击四个按钮后，会跳转到四个不同的界面
3.在界面的上方有一个标题Wechat
2>分析如何实现这些功能
1.首先要准备8个界面图标,将它们放入到drawable中
文章图片
bottom_bar.png
文章图片
weixin1.png
文章图片
weixin2.png
文章图片
friend1.png
文章图片
friend2.png
文章图片
address1.png
文章图片
address2.png
文章图片
setting1.png
文章图片
setting2.png
2.在layout的bottom.xml中涉及wechat的底部ui，在底部设置4个按钮，对应四个微信，朋友，通讯录和设置。
3.在top.xml中设计微信的title，黑底白字Wechat
4.在layout的activity_main.xml中，设计中间一层的ui，将一个空Fragement拉进来，并且把top.xml和bottom.xml引入。这样初始的类微信界面就设计好了 。
5.要实现，点击底部图标换颜色和界面的功能，要新建四个java 的Fragment文件，即weixinFragement，FrdFragement，contactFragement和settingFragement,,在主函数中首先声明变量，将部件和java代码连接起来，设计点击图标，图标变量，其余图标为灰色，并改变相应的代码，而这一切都要有一个监听函数，监听鼠标的动态。
3>bottom.xml的构造
在这个Linearlayout中添加textview和imagebutton（选中之前拖入drawable文件夹里的图标），调整为图片在上文本在下
文章图片
调整Linearlayout
调整文本为白色并调整大小
将imagebutton背景调整为黑色并调整宽度为80dp
然后将这个Linearlayout单元copy三份总共四份，由于四份的Linearlayout名字一样会报错，所以需要修改一下每一份的id，调整四个Linearlayout的参数
此时bottom的基本雏形已经完成
文章图片
4>top.xml的构造
拖入一个textview到linearlayout里，修改内容为WeChat，在Code中调整xml文件
?
文章图片
5>activity_main.xml的构造
layout中新建一个activity_main.xml文件 将FrameLayout拖入，进入Code编辑代码
在其中引入top.xml和bottom.xml.
文章图片
6>**MainActivity的构造**
package com.example.mywork_lbw; ? import androidx.appcompat.app.AppCompatActivity; ? import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction; ? import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; ? public class MainActivity extends AppCompatActivity implements View.OnClickListener { ? private LinearLayout mTabWeixin; private LinearLayout mTabfrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; ? private ImageButton mWeixinImg; private ImageButton mFrdImg; private ImageButton mAddressImg; private ImageButton mSettingImg; ? ? private Fragment mTab01 = new weixinFragment(); private Fragment mTab02 = new frdFragment(); private Fragment mTab03 = new contactFragment(); private Fragment mTab04 = new settingsFragment(); ? private FragmentManager fm; ? @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); ? initView(); initEvent(); initFragment(); selectfragment(0); } ? private void initFragment() { //fragment的切换 fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.add(R.id.id_content, mTab01); transaction.add(R.id.id_content, mTab02); transaction.add(R.id.id_content, mTab03); transaction.add(R.id.id_content, mTab04); transaction.commit(); } ? private void initEvent() { mTabWeixin.setOnClickListener(this); mTabfrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); } ? private void initView() { //改变图标的颜色 mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_contact); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings); ? mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img); mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img); mAddressImg = (ImageButton) findViewById(R.id.id_tab_contact_img); mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img); ? ? } ? private void selectfragment(int i) { //显示选中界面的内容，选中界面图标为绿色 FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); switch (i) { case 0: Log.d("setSelect", "1"); transaction.show(mTab01); mWeixinImg.setImageResource(R.drawable.weixin1); break; case 1: transaction.show(mTab02); mFrdImg.setImageResource(R.drawable.friend1); break; case 2: transaction.show(mTab03); mAddressImg.setImageResource(R.drawable.address1); break; case 3: transaction.show(mTab04); mSettingImg.setImageResource(R.drawable.setting1); break; default: break; } transaction.commit(); } ? private void hideFragment(FragmentTransaction transaction) { //把没有使用的界面的内容隐藏 transaction.hide(mTab01); transaction.hide(mTab02); transaction.hide(mTab03); transaction.hide(mTab04); } ? @Override public void onClick(View view) { //监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容 resetimg(); switch (view.getId()) { case R.id.id_tab_weixin: selectfragment(0); break; case R.id.id_tab_frd: selectfragment(1); break; case R.id.id_tab_contact: selectfragment(2); break; case R.id.id_tab_settings: selectfragment(3); break; } } ? public void resetimg() { //没有使用的界面的图标为灰色 mWeixinImg.setImageResource(R.drawable.weixin2); mFrdImg.setImageResource(R.drawable.friend2); mAddressImg.setImageResource(R.drawable.address2); mSettingImg.setImageResource(R.drawable.setting2); } } ?
这里主要运用了Fragment
Fragment的优势有以下几点：
- 模块化（Modularity）：我们不必把所有代码全部写在Activity中，而是把代码写在各自的Fragment中。
- 可重用（Reusability）：多个Activity可以重用一个Fragment。
- 可适配（Adaptability）：根据硬件的屏幕尺寸、屏幕方向，能够方便地实现不同的布局，这样用户体验更好。
注意：这里的java文件声明变量时并不需要原文件一样的id，可以新建一个id，以免混淆
这里的4个Fragement对应着四个界面，注意要在四个Fragement里面修改最后的return值
文章图片
7>调用的四个Fragment文件
private Fragment mTab01 = new weixinFragment(); private Fragment mTab02 = new frdFragment(); private Fragment mTab03 = new contactFragment(); private Fragment mTab04 = new settingsFragment(); private FragmentManager fm;
8>Wechat的运行**
文章图片
文章图片
文章图片
文章图片
原码下载：
GitHub - yikemi/Wechat_lbw
文章图片
【微信|移动开发.Android studio实现类Wechat界面】
推荐阅读
- 深入理解Go之generate
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 员工的微信朋友圈是公司的宣传阵地吗（）
- 移动端h5调试方法
- FBI怎么和恐怖分子谈判
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 我的软件测试开发工程师书单
- echart|echart 双轴图开发
- NPDP拆书（三）（新产品开发战略（经营与创新战略））