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

<LinearLayoutandroid:id="@+id/id_tab_weixin"android:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:background="@drawable/bottom_bar"android:orientation="vertical">

调整文本为白色并调整大小

<TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center_horizontal"android:saveEnabled="false"android:text="微信"android:textColor="#ffffff"android:textSize="15sp" />

将imagebutton背景调整为黑色并调整宽度为80dp

<ImageButtonandroid:id="@+id/id_tab_weixin_img"android:layout_width="match_parent"android:layout_height="80dp"android:layout_weight="1"android:clickable="false"android:background="#000000"app:srcCompat="@drawable/weixin2"tools:ignore="SpeakableTextPresentCheck" /

然后将这个Linearlayout单元copy三份总共四份，由于四份的Linearlayout名字一样会报错，所以需要修改一下每一份的id，调整四个Linearlayout的参数

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="100dp">

此时bottom的基本雏形已经完成

4>top.xml的构造

拖入一个textview到linearlayout里，修改内容为WeChat，在Code中调整xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"
android:layout_height="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"
android:layout_weight="1"android:text="WeChat"
android:textColor="#ffffff"
android:textSize="40sp" />
</LinearLayout>

5>activity_main.xml的构造

layout中新建一个activity_main.xml文件将FrameLayout拖入，进入Code编辑代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/top" /><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom" />
</LinearLayout>

在其中引入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;
@Overrideprotected 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);}
@Overridepublic 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

库名：Wechat_lbw