Android Studio之仿微信APP界面设计

文章目录

一、功能需求
二、页面布局设置
- 1. 顶部top.xml布局
- 2. 底部bottom.xml布局
- 3. 中间页面设置
- 4. activity_main.xml
- 5. 资源控制drawable文件
三、页面跳转控制（java文件）
- 1. MainActivity
- 2. 其他Java文件
四、运行界面展示
五、源码

一、功能需求

完成一个类似微信页面的布局，要求：

页面最上方是标题居中
页面中间界面显示内容，内容随下方栏的选择而切换
页面最下方有四个按钮
点击按钮后，按钮图标会变换颜色，且显示框变换内容

二、页面布局设置

1. 顶部top.xml布局

创建layout文件top.xml中，添加文本框，添加文字，设置为居中，修改文字颜色和LinearLayout背景颜色。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:orientation="vertical"android:gravity="center"android:layout_height="50dp"android:background="#0E0D0D"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center_horizontal"android:text="我的微信"android:textColor="@color/white"android:textSize="25sp" />
</LinearLayout>

效果如下：

2. 底部bottom.xml布局

新建layout布局文件button.xml。
先添加一个LinearLayout(vertical)，修改LinearLayout大小和颜色：修改gravity所对应的配置信息为center，再修改大小，添加id。
在刚刚添加的LinearLayout(vertical)下添加ImageButton，选择要放入的图片

在这里插入代码片<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="60dp"android:background="@color/colorViewNormal"android:gravity="center"><LinearLayoutandroid:id="@+id/chat"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"app:srcCompat="@drawable/chat2" /></LinearLayout><LinearLayoutandroid:id="@+id/contacts"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"app:srcCompat="@drawable/contracts2" /></LinearLayout><LinearLayoutandroid:id="@+id/circle_friend"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"app:srcCompat="@drawable/circleoffriend2" /></LinearLayout><LinearLayoutandroid:id="@+id/settings"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"app:srcCompat="@drawable/setting1" /></LinearLayout>
</LinearLayout>

复制三个修改好的LinearLayout，修改ImageButton的资源路径，分别修改LinearLayout、ImageView的id。
效果如下：

3. 中间页面设置

新建四个layout.xml文件，分别添加一个ImageView，修改文字内容，并将ImageView设置居中

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"tools:context=".chat"><ImageViewandroid:id="@+id/imageView6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/chat"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

ps：这里可能会出现“Missing Constraints in ConstraintLayout”的报错
解决方案是:拖拽界面中按钮四周的圆点，到你想要设置的相对距离

4. activity_main.xml

我们想要的效果是页面最上方是标题，中间显示文本，最下方有四个按钮，故在activity_main.xml中先添加一个LinearLayout
在LinearLayout中按顺序添加三个部分：
通过include标签添加top.xml和button.xml
由于四个显示文本的页面都是在中间，故选择通过放一个FrameLayout在top和button的中间

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"android:orientation="vertical"tools:context="com.example.mydemo.MainActivity"><include layout="@layout/top"></include><FrameLayoutandroid:id="@+id/frame_content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/imageView9"android:layout_width="wrap_content"android:layout_height="wrap_content"app:srcCompat="@drawable/setting" /></FrameLayout><include layout="@layout/bottom"></include></LinearLayout>

5. 资源控制drawable文件

在使用之前先将图片文件导入到/res/drawable中，可以直接将windows本地文件拖拽至目标文件夹中

三、页面跳转控制（java文件）

1. MainActivity

先为fragment类创建实例对象
定义一个FragmentManager来控制Fragment

    //FragmentManagerprivate FragmentManager fragmentManager;

再写一个初始化Fragment的函数，将四个fragment放到FrameLayout中

 //初始化中间的部分的图层片段private void initFragment(){fragmentManager=getSupportFragmentManager();FragmentTransaction transaction=fragmentManager.beginTransaction();transaction.add(R.id.frame_content, Fragment_chat);transaction.add(R.id.frame_content, Fragment_contacts);transaction.add(R.id.frame_content, Fragment_circleoffriend);transaction.add(R.id.frame_content, Fragment_setting);//提交事务transaction.commit();}

我们需要实现的是，点击按钮，按钮会变色，并且跳转到相应的页面。所以我们需要对ImageButton所属的LinearLayout来进行监听，但是ImageButton和LinearLayout都属于布局文件中的一部分，我们不能直接调用，所以需要创建一个函数initView()来实现对ImageButton和LinearLayout控件实例化，方便我们后续调用

为实现点击按钮之后可以跳转到相应的页面，我们可以先隐藏四个界面，在点击button后再显示出选择的页面。可以选择自定义一个**HideFragment()**函数，调用hide()函数隐藏四个界面。

为实现点击按钮后变色，我们可以定义一个Fragment_select()函数来实现：传入一个参数，通过调用transaction的show()函数，展示对应的页面。

为实现点击按钮跳转页面，我们需要对进行监听。在最开头的MainActivity后添加implements View.OnClickListener，函数具体作用代码中有注释：

package com.example.mydemo;import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;public class MainActivity extends AppCompatActivity implements View.OnClickListener{//Fragmentprivate Fragment Fragment_chat =new chat();private Fragment Fragment_contacts =new contacts();private Fragment Fragment_circleoffriend =new circleoffriend();private Fragment Fragment_setting =new setting();//底端菜单栏LinearLayoutprivate LinearLayout linear_chat;private LinearLayout linear_contacts;private LinearLayout linear_ciecleoffriend;private LinearLayout linear_setting;//底端菜单栏中的Imageviewprivate ImageView imageView_chat;private ImageView imageView_contacts;private ImageView imageView_circleoffriend;private ImageView imageView_setting;//FragmentManagerprivate FragmentManager fragmentManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE );setContentView(R.layout.activity_main);initView();initFragment();initEvent();Fragment_select(0);//将第一个图标设为选中状态imageView_chat.setImageResource(R.drawable.chat);imageView_chat.setImageResource(R.drawable.chat1);}//监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容@Overridepublic void onClick(View view) {//每次点击之后，将所有的ImageView和TextView设置为未选中restartButton();switch(view.getId()){case R.id.chat://选择所点击的菜单对应的图层片段Fragment_select(0);//将该菜单的点击状态置为点击态imageView_chat.setImageResource(R.drawable.chat);imageView_chat.setImageResource(R.drawable.chat1);break;case R.id.contacts:Fragment_select(1);imageView_contacts.setImageResource(R.drawable.contracts);imageView_contacts.setImageResource(R.drawable.contracts1);break;case R.id.circle_friend:Fragment_select(2);imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);break;case R.id.settings:Fragment_select(3);imageView_setting.setImageResource(R.drawable.setting);imageView_setting.setImageResource(R.drawable.setting1);break;default:break;}}//重置菜单的点击状态，设为未点击private void restartButton() {//设置为未点击状态imageView_chat.setImageResource(R.drawable.chat);imageView_chat.setImageResource(R.drawable.chat1);imageView_contacts.setImageResource(R.drawable.contracts);imageView_contacts.setImageResource(R.drawable.contracts1);imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);imageView_setting.setImageResource(R.drawable.setting);imageView_setting.setImageResource(R.drawable.setting1);}//初始化中间的部分的图层片段private void initFragment(){fragmentManager=getSupportFragmentManager();FragmentTransaction transaction=fragmentManager.beginTransaction();transaction.add(R.id.frame_content, Fragment_chat);transaction.add(R.id.frame_content, Fragment_contacts);transaction.add(R.id.frame_content, Fragment_circleoffriend);transaction.add(R.id.frame_content, Fragment_setting);//提交事务transaction.commit();}//初始化各底端的LinearLayout、ImageView和TextView组件private  void initView(){//改变图标颜色linear_chat =findViewById(R.id.chat);linear_contacts =findViewById(R.id.contacts);linear_ciecleoffriend =findViewById(R.id.circle_friend);linear_setting =findViewById(R.id.settings);imageView_chat =findViewById(R.id.imageView1);imageView_contacts =findViewById(R.id.imageView2);imageView_circleoffriend =findViewById(R.id.imageView3);imageView_setting =findViewById(R.id.imageView4);}//初始化点击监听事件private void initEvent(){linear_chat.setOnClickListener(this);linear_contacts.setOnClickListener(this);linear_ciecleoffriend.setOnClickListener(this);linear_setting.setOnClickListener(this);}//把没有使用的界面的内容隐藏private void hideView(FragmentTransaction transaction){transaction.hide(Fragment_chat);transaction.hide(Fragment_contacts);transaction.hide(Fragment_circleoffriend);transaction.hide(Fragment_setting);}//显示选中界面的内容，选中界面图标为绿色private void Fragment_select(int i){FragmentTransaction transaction=fragmentManager.beginTransaction();//调用隐藏所有图层函数hideView(transaction);switch (i){case 0:transaction.show(Fragment_chat);break;case 1:transaction.show(Fragment_contacts);break;case 2:transaction.show(Fragment_circleoffriend);break;case 3:transaction.show(Fragment_setting);break;default:break;}//提交转换事务transaction.commit();}
}

2. 其他Java文件

这里因为有四个页面，分别是聊天、联系人、朋友圈、我，对应着chat.java、contacts.java、circleoffriend.java、setting.java文件。

四、运行界面展示

结果展示我只选了两个界面进行展示
中间的内容，我并没选择使用文本框，而是自己实际微信界面的截图，这样显得更加真实。

ps：这里运行后出现了“Emulator: handleCpuAcceleration: feature check for hvf”问题
解决办法：修改配置文件

五、源码

自己之前已有GitHub的账号，所以就直接将代码上传了。
ssh-keygen -t rsa -C "我的邮箱"生成密钥
出现了“invalid authentication data. 404 Not Found-Not Found”问题，这里应选择利用token连接
详细代码已上传至代码仓库