一.静态界面实现（.xml）

功能需求

1.上方有标题（居中）
2.中间显示内容，内容随着下方控件而切换。
3.下方四个控件可切换。

实现页面展示：

共三大部分，顶部和底部一直不变，中间部分随着点击切换，还需要一个页面组合这六项内容，一共需要做七个UI前端页面设计

1.top.xml（上方居中有标题）

2.要求有四个控件，可以随时切换，分别是聊天，朋友，通讯录，设置这里就涉及到fragment的使用。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:orientation="horizontal"><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="这是微信聊天界面"android:textSize="25sp" />
</LinearLayout>

3.bottom

 <LinearLayoutandroid:id="@+id/id_tab_weixin"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/weixin_img"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#000000"android:contentDescription="@string/app_name"app:srcCompat="@drawable/tab_weixin_normal" /><TextViewandroid:id="@+id/微信"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="center"android:text="微信"android:textColor="#ffffff"android:textSize="15dp" /></LinearLayout>

二.界面动态实现

功能需求 每一次点击需要切换一个页面，并且当前页面对应图标必须标亮，其他则灰蒙蒙；默认打开时在第一个页面，第一个微信图标标亮

界面实现：

目录结构在这里插入图片描述

这里主要运用了Fragment

Fragment的优势有以下几点：
    模块化（Modularity）：我们不必把所有代码全部写在Activity中，而是把代码写在各自的Fragment中。
    可重用（Reusability）：多个Activity可以重用一个Fragment。
    可适配（Adaptability）：根据硬件的屏幕尺寸、屏幕方向，能够方便地实现不同的布局，这样用户体验更好。

接下来就是初始化界面与事件启动
分析界面实现效果，例如当点击某一导航键时，跳转到该界面主页面，同时除该导航键，其余导航键变暗

public class MainActivity extends AppCompatActivity implements View.OnClickListener {private Fragment mtab01 = new weixin_Fragment();private Fragment mtab02 = new friend_Fragment();private Fragment mtab03 = new txl_Fragment();private Fragment mtab04 = new setting_Fragment();private FragmentManager fm;private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabContact;private LinearLayout mTabSettings;private ImageButton mImgWeixin;private ImageButton mImgFrd;private ImageButton mImgContact;private ImageButton mImgSettings;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);ActionBar action_bar=getSupportActionBar();if(action_bar!=null)action_bar.hide();/*隐藏activity头*/setContentView(R.layout.activity_main);initFragment();initview();setselect(0);initEvent();}private void initFragment(){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 initview(){mTabWeixin=(LinearLayout)findViewById(R.id.id_tab_weixin);mTabFrd=(LinearLayout)findViewById(R.id.id_tab_frd);mTabContact=(LinearLayout)findViewById(R.id.id_tab_txl);mTabSettings=(LinearLayout)findViewById(R.id.id_tab_setting);mImgWeixin=(ImageButton)findViewById(R.id.weixin_img);mImgFrd=(ImageButton)findViewById(R.id.frd_img);mImgContact=(ImageButton)findViewById(R.id.txl_img);mImgSettings=(ImageButton)findViewById(R.id.settong_img);}private void setselect(int i){FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);switch (i){case 0:transaction.show(mtab01);mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:transaction.show(mtab02);mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:transaction.show(mtab03);mImgContact.setImageResource(R.drawable.tab_address_pressed);break;case 3:transaction.show(mtab04);mImgSettings.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}transaction.commit();}private void hideFragment(FragmentTransaction transaction){transaction.hide(mtab01);transaction.hide(mtab02);transaction.hide(mtab03);transaction.hide(mtab04);}@Overridepublic void onClick(View view) {resetImgs();switch(view.getId()){case R.id.id_tab_weixin:setselect(0);break;case R.id.weixin_img:setselect(0);break;case R.id.id_tab_frd:setselect(1);break;case R.id.frd_img:setselect(1);break;case R.id.id_tab_txl:setselect(2);break;case R.id.txl_img:setselect(2);break;case R.id.id_tab_setting:setselect(3);break;case R.id.settong_img:setselect(3);break;default:break;}}private void resetImgs(){mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);mImgContact.setImageResource(R.drawable.tab_address_normal);mImgSettings.setImageResource(R.drawable.tab_settings_normal);}private void initEvent(){mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabContact.setOnClickListener(this);mTabSettings.setOnClickListener(this);mImgWeixin.setOnClickListener(this);mImgFrd.setOnClickListener(this);mImgContact.setOnClickListener(this);mImgSettings.setOnClickListener(this);}
}

代码仓库：https://github.com/zzx-i/mywork-zzx-1.git

Android studio实现仿微信界面相关推荐

Android studio制作简单微信界面
Android studio微信界面简单制作移动技术开发的第一课完成展示 (先看看样子) 大概就是这个样子 1.放入图标把下好的图标复制粘贴放在/app/res/drawble 目录下即可 2. ...
Android studio实现类微信界面
1.需要实现的功能: 页面具有标题微信页面具有中间显示框页面具有底部选择框,并且具有选择事件页面底部选择框在进行改变的时候,我们需要中间显示框的页面同步改变页面的布局清晰效果展示如下 1.按 ...
Android Studio制作简易微信界面
文章目录制作要求一.top,buttom页面制作二.四个tab页面和activity_main页面制作 1.四个tab页面 2.activity_main页面三 . 五个java文件制作要求 ...
Android 二维码扫描(仿微信界面),根据Google zxing
Android 二维码扫描(仿微信界面),根据Google zxing Android项目开发中经常会用到二维码扫描,例如登陆.支付等谷歌方面已经有了一个开源库(地址: https://github. ...
[Android] Android 手机下仿微信客户端界面 -- 微聊
Android 手机下仿微信客户端界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
安卓开发— —仿微信界面（一）
目录一.项目内容二.代码实现 1.项目结构 2.头部代码 3.底部代码 4.四个内容界面 5.窗体总布局 6.MainActivity实现点击图标与页面的互动三.运行效果四.总结一.项目内容 ...
是男人就下100层【第一层】——高仿微信界面（4）
上一篇<是男人就下100层[第一层]--高仿微信界面(3)>中我们完成了登录,这一篇看完成登录后的一个短暂加载和引导界面. 加载界面: <RelativeLayout xmlns:a ...
android开发百度地图坐标偏差,利用百度地图Android sdk高仿微信发送位置功能及遇到的问题...
接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送 ...

Android studio实现仿微信界面

一.静态界面实现（.xml）

二.界面动态实现

Android studio实现仿微信界面相关推荐

最新文章

热门文章