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背景颜色。

效果如下：

2. 底部bottom.xml布局

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

在这里插入代码片

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

3. 中间页面设置

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

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

4. activity_main.xml

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

5. 资源控制drawable文件

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

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

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

    //FragmentManager
    private 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{

    //Fragment
    private Fragment Fragment_chat =new chat();
    private Fragment Fragment_contacts =new contacts();
    private Fragment Fragment_circleoffriend =new circleoffriend();
    private Fragment Fragment_setting =new setting();

    //底端菜单栏LinearLayout
    private LinearLayout linear_chat;
    private LinearLayout linear_contacts;
    private LinearLayout linear_ciecleoffriend;
    private LinearLayout linear_setting;

    //底端菜单栏中的Imageview
    private ImageView imageView_chat;
    private ImageView imageView_contacts;
    private ImageView imageView_circleoffriend;
    private ImageView imageView_setting;

    //FragmentManager
    private FragmentManager fragmentManager;

    @Override
    protected 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);
    }

    //监听函数，监听到底是哪一个图标被击中从而显示哪一个界面的内容
    @Override
    public 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连接
详细代码已上传至代码仓库

Android Studio之仿微信APP界面设计

Java相关栏目本月热门文章