AS中类微信界面设计

用Android studio编写类微信应用之基本界面

要编写一个类似微信那样的应用，第一步是写出一个类似那样的界面，之后的各种功能都是在完成界面之后实现的。完成之后界面大致是这样的。

XML文件的编写

要实现的功能是一个类似微信的界面，并且选择下方的不同功能可以在不同的界面之间切换，那么首先要实现的就是各个界面的XML文件。
我们首先对这个界面进行分析，容易看出这个界面可以大致分为三个部分，分别是上面的顶部文件，中间部分的文件和底部的文件。
顶部文件的编写
顶部是我们的界面名称，这个地方是MyWechat.
我们在res/layout中创建一个名为top的XML文件，之后在code界面向其中添加android:text="@string/app_name"
或是在Design界面中向框内拖动TextView选项，之后为了让该文字在框中居中显示，需要先将orientation设置为vertical,然后在Code界面添加语句
android:layout_gravity=“center_horizontal”
之后WeChat就会在页面的正中上方显示

之后为了将其设计成白色字体，在code中添加
android:textColor="#ffffff"
添加
android:background="#000000"
以将背景设为黑色效果如下图

至此，XML的上端部分就设计完成。
底端文件编写
底端文件的理想要设计为下图所示

我们可将此底端文件视作一个horizontal型的LinearLayout包含有四个vertical型的LinearLayout
，因此，设计的模式如图：

最外层的LinearLayout将其layout_height设置为100dp，具体多少可以设置之后在视图中查看实际效果，重点是第一个vertical型的LinearLayout的设置，这里有三个比较关键的参数，分别是
android:layout_width=“0dp”
android:gravity=“center”
android:layout_weight=“1”
这样的三个参数设置好之后，之后在添加后续的vertical型的LinearLayout时，会发现所有的vertical型的LinearLayout会平分横向的空间，框架就设计好了，之后是给其添加字体颜色与图片，背景颜色等，图片的设置方式是@+此项目中的某文件夹名/文件名。
至此，底端的XML文件编写完成。
中间部分文件编写
由于这个类微信的界面有四个不同的中间部分文件，需要分别编写，但他们的格式大致相同，写了一个之后其他的三个作轻微的修改即可。
在之后这部分的文件会添加更多丰富的功能，这里先用文本来代替，要完成的是居中文本显示
android:layout_width=“wrap_content”
android:layout_height=“match_parent”
android:gravity=“center”
android:layout_weight=“1”

效果如图，四个文件相似，解释文本不同，至此中间部分文件编写完成。
activity_main.xml文件编写
此文件的目的是将此前编写的上中下三个部分进行整合
分别添加


可将上端文件和底部文件导入

Java文件编写

概述
首先根据这个项目的结构可以知道大致要编写5个Java文件，分别是MainActivity和四个界面的实现，且四个界面的设计应当是类似的。
界面实现的文件
new一个fragment文件

Fragment是一种可以嵌入在活动中的UI片段，能够让程序更加合理和充分地利用大屏幕的空间，出现的初衷是为了适应大屏幕的平板电脑，可以将其看成一个小型Activity，又称作Activity片段。
在其return中写入要输出的界面文件名，四个文件是相似的。
主文件编写
编写之前应当要知道要完成什么功能，点击对应的图片之后要有相应，且响应的是对应的界面，并且图标的颜色会随着点击发生变化，之前生成的界面也会在下一个点击之后隐藏起来，这样可以避免生成的界面发生重叠现象。
然后我们就可以就开始编写函数
首先，我们需要将4个页面放到Framelayout中，为此，需要编写一个initfragment()函数

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();

下一个我们需要做的是将button与图片联系起来，因为监听是通过button来的，这个函数要实现的功能就是通过点击图片完成监听，代码如下

private void initView(){
mTabWeiXin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFri = (LinearLayout) findViewById(R.id.id_tab_fri);
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);
mImgFri = (ImageButton) findViewById(R.id.id_tab_fri_img);
mImgContact = (ImageButton) findViewById(R.id.id_tab_contact_img);
mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);
}

接下来写一个函数来控制图片颜色的变换，其意义是点击一个图片之后该图片就会变亮，代码实现如下：

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);
mImgFri.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;
}
其功能是通过点击之后调出相应的图片来实现
由于四个页面都在fragment中，如果不隐藏会造成显示内容的重叠，因此我们的解决思路是在显示一个界面之前将所有的界面都hide，点击对应的button之后再把对应的页面显示出来，所以需要一个hide功能的函数，实现如下：
private void hidefragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
transaction.commit();
}
在完成了上述的功能之后，会发现我们还缺少一个监听函数
public void onClick(View v){
resetimg();
switch (v.getId()){
case R.id.id_tab_weixin_img:
selectfragment(0);
break;
case R.id.id_tab_fri_img:
selectfragment(1);
break;
case R.id.id_tab_contact_img:
selectfragment(2);
break;
case R.id.id_tab_setting_img:
selectfragment(3);
break;
default:
break;
}
它通过获取到指定页面的id来实现监听
完成之后我们意识到可能还需要一个函数来调用灰色的图片，以让点击过后的图片回复原色，这个函数的功能就是调出指定图片的位置
private void resetimg(){
mImgWeiXin.setImageResource(R.drawable.tab_weixin_normal);
mImgFri.setImageResource(R.drawable.tab_find_frd_normal);
mImgContact.setImageResource(R.drawable.tab_address_normal);
mImgSetting.setImageResource(R.drawable.tab_settings_normal);
}
最后的onCreate函数如下：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initFragment();
initView();
selectfragment(0);
initEvent();
}
要注意的是这个程序采用的是监听整个屏幕，这样对内存的消耗巨大，因此在最后可以编写一个优化的函数：
private void initEvent(){
mImgWeiXin.setOnClickListener(this);
mImgFri.setOnClickListener(this);
mImgContact.setOnClickListener(this);
mImgSetting.setOnClickListener(this);
}
这个函数的意义是指定要监听的部分，可以减少内存的消耗。
最后，由于点击的是底端文件中的不分完成的监听，因此需要在每个部分中添加
android:clickable=“false”
android:onClick=“onClick”
以完成监听，至此，功能就全部实现了。
效果如下：




代码仓库地址
https://gitee.com/atbon/mobile-development-technology.git