欢迎浏览我的博客

这个学期我学习到关于移动开发的课程，我将在这里记录我的学习进度，也是分享我的个人心得以及我的所学内容总结。

本次实验内容

这次我们的学习内容是对移动开发的初步了解，这次通过在Android Studio上的对微信界面的编写，通过实验的方式对移动开发有更加深刻的认识与了解。

实验成果以及代码截图

图片: ![Alt]

界面演示布局代码

    <LinearLayoutandroid:id="@+id/id_tab_weixin"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_weixin_img"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"app:srcCompat="@drawable/tab_weixin_pressed" /><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="微信"android:textColor="#ffffff"android:textSize="15sp" /></LinearLayout>

这是关于最重要的微信界面下面四个按钮之一的设计样式，这样使用四个LinearLayout然后通过调整样式，使四个按钮可以以一种很舒服的方式排列下下面。

    <FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout>

这是关于主页面的代码，使用了framelayout的样式，用这个的目的是，让每个页面的东西都可以显示在各自的位置上，无论是top中的标题，还是bottom中的四个按钮，还是在中间部分显示出的内容，让他们可以合理的出现在各自的位置。

关于微信中界面转换功能实现的代码

requestWindowFeature(Window.FEATURE_NO_TITLE);

这是让软件的上面没有那个标题，让这个微信可以更加灵动，没有一个WeChat在上面显得很呆板。

    private void initFragment() {fm = getSupportFragmentManager();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();}

这步是让我们之前设计好的的四个按钮所代表的内容（0~4）一起添加到缓冲区中，同时用fm = getSupportFragmentManager();，这让之后的一些函数之后也可以调用，不用再次get。

    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_contact);mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);mImgWeixin =(ImageButton)  findViewById(R.id.id_tab_weixin_img);mImgFrd =(ImageButton)  findViewById(R.id.id_tab_frd_img);mImgContact =(ImageButton) findViewById(R.id.id_tab_contact_img);mImgSetting =(ImageButton)  findViewById(R.id.id_tab_setting_img);}

这个view将内容和下面按钮图片全部先一股脑的塞到页面中，之后再通过对onclick的监听对这些页面的变换进行约束。

public class MainActivity extends AppCompatActivity implements View.OnClickListener

这句在最后通过写View.OnClickListener让全页面的点击事件都集合在之后的onclick函数中，避免要写满面的onclick事件。

@Overridepublic void onClick(View v) {Log.d("onClick","1");resetImgs();switch (v.getId()){case R.id.id_tab_weixin:Log.d("onClick","2");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_setting:selectFragment(3);break;default:break;}}

这是上面添加之后自动会生成的函数，对点击四个“按钮”赋值，用switch函数让页面可以显示出你所点到的按钮所应该显示的页面。

    private void initEvent(){mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabContact.setOnClickListener(this);mTabSetting.setOnClickListener(this);

基本的监听函数。

    private void selectFragment(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);mImgSetting.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}transaction.commit();}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);mImgSetting.setImageResource(R.drawable.tab_settings_normal);}
}

这两个函数是让下面图片可以以“按着的按钮亮没按的按钮暗”的方式显示，这个原理就是让明暗两个图片都存在那个地方，通过使点击事件传回的数值来使其他的图片hide，该亮的图片show，这部分代码不难，但是这个想法很值得思考和学习。

总结心得

这次的实验内容总体来说并不困难，最主要就是让我们从一个比较简单基础的项目入手，对Android的内容有初步的认识和了解。
我的对这次的认识主要是通过对一些样式和页面变化的了解，这是之前的学习中不太经常接触到的，让我觉得移动端的开发上是同样充满趣味，让我也学到很多知识。

代码仓库链接

https://github.com/hxlzzz/hxl-

微信界面Android实现相关推荐

微信界面Android开发
一:开发环境: MacBook Air (M1, 2020) 芯片Apple M1 内存8G 二:实验环境: Android Studio 三:实验内容完成类微信的门户页面框架设计,APP最少必须包 ...
android studio微信界面设计,android studio开发微信界面
android studio开发微信界面 android studio开发微信界面功能说明:主要是做微信的简单的聊天界面,利用Fragment,进行微信界面的跳转项目代码: 源代码地址 MainA ...
Android微信界面的设计
Android微信界面的设计 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51777792 微信6.0主界面: (1 ...
Android之微信界面设计
Android Studio 学习之实现微信首页界面一.界面布局分析. 首先进行界面布局,看需要几个.xml文件. 1.top.xml对微信界面的顶部进行设计 2.bottom.xml对于微信界面的 ...
Android 二维码扫描(仿微信界面),根据Google zxing
Android 二维码扫描(仿微信界面),根据Google zxing Android项目开发中经常会用到二维码扫描,例如登陆.支付等谷歌方面已经有了一个开源库(地址: https://github. ...
安卓移动开发实验：Android Studio设计微信界面
一.实验的目的通过使用Android Studio的Fragment和layout,来实现简单的微信界面切换. 二.app的功能能够通过应用底部的bottom来实现四个页面的来回切换. 三.实验过 ...
Android studio实现类微信界面
1.需要实现的功能: 页面具有标题微信页面具有中间显示框页面具有底部选择框,并且具有选择事件页面底部选择框在进行改变的时候,我们需要中间显示框的页面同步改变页面的布局清晰效果展示如下 1.按 ...
Android studio 微信界面设计
一.微信界面的功能 1.可展示出四个可切换界面:微信.联系人.朋友圈.设置: 2.上方栏标题居中,界面中间显示内容,内容随下方栏的选择而切换,下方栏可点击切换,点击过的界面的图标为绿色,没有点击的界面 ...
Android studio设计一个简易微信界面
一.设计要求及实现构想 1.设计一个简易微信界面框架,包含至少4个tab页面(我设计的4个分别为message.contact.find.config),要求能实现四个页面之间的点击切换. 2.首先分 ...

微信界面Android实现