Android Studio之仿微信APP界面设计

最新推荐文章于 2024-05-20 20:52:56 发布

祈雨uik

最新推荐文章于 2024-05-20 20:52:56 发布

阅读量1.4w

点赞数 27

文章标签： android 微信 java

本文链接：https://blog.csdn.net/m0_51620234/article/details/120663461

版权

文章目录

一、功能需求

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

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

二、页面布局设置

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"
    >
    
    <TextView
        android: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">

    <LinearLayout
        android:id="@+id/chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/chat2" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/contacts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:srcCompat="@drawable/contracts2" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/circle_friend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/circleoffriend2" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/settings"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android: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">

    <ImageView
        android: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>

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android: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

    //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连接
详细代码已上传至代码仓库

祈雨uik

关注

27
点赞
踩
279

收藏

觉得还不错? 一键收藏
4
评论
Android Studio之仿微信APP界面设计

文章目录一、功能需求二、页面布局设置1. 顶部top.xml布局2. 底部bottom.xml布局3. 中间页面设置4. activity_main.xml5. 资源控制drawable文件三、页面跳转控制（java文件）1. MainActivity2. 其他Java文件四、运行界面展示五、源码一、功能需求完成一个类似微信页面的布局，要求：页面最上方是标题居中页面中间界面显示内容，内容随下方栏的选择而切换页面最下方有四个按钮点击按钮后，按钮图标会变换颜色，且显示框变换内容二、页面布局设置
复制链接

扫一扫