设计工具：

Android studio

Android开发者官网上下载 Android 开发者 | Android Developer

设计目的

设计一个微信界面Android界面

要求界面的样式和微信打开后的界面相似，并且底部的四个按钮可以点击跳转界面。界面上方栏有标题居中，界面中间显示内容，内容随下方栏的选择而切换，界面下方栏分成四个小板块可点击切换，且正在使用的界面的图标为绿色，没有使用的界面的图标为灰色。

布局设置

1.top.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="60dp"android:background="@color/grey"> <TextViewandroid:id="@+id/textView"android:layout_width="match_parent"  android:layout_height="60dp"    android:layout_weight="1"android:gravity="center"  android:text="微信"      android:textColor="@color/black"  android:textSize="24sp" />
</LinearLayout>

设置宽高字体大小，背景设为灰色，文字为黑色，并且文本内容居中

2.bottom.xml

对底端界面进行配置

<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/chat" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:textColor="@color/black"android:text="微信"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/mail_list"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="wrap_content"android:layout_weight="1"app:srcCompat="@drawable/mail_list" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="通讯录"android:textColor="@color/black"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/find"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/find" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="发现"android:textColor="@color/black"android:textSize="15sp" /></LinearLayout><LinearLayoutandroid:id="@+id/me"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="37dp"android:layout_weight="1"app:srcCompat="@drawable/me" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="我"android:textColor="@color/black"android:textSize="15sp" /></LinearLayout>
</LinearLayout>

进行布局的调整和图片资源的设置

在res文件夹的layout中新建bottom.xml，拖入TextView拖入ImageButton后会调用drawable，选取所需的图标

点击每个按钮后的内容设置

这里写四个fragment.xml对应四个按钮

以fragment_chat为例

<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=".Fragment_chat"><TextViewandroid:id="@+id/textView5"android:layout_width="wrap_content"android:layout_height="50dp"android:gravity="center"android:text="我的微信"android:textColor="@color/black"android:textSize="30sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

其余三个只需稍作修改即可

activity_main.xml

<?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=".MainActivity"><include layout="@layout/top"></include><FrameLayoutandroid:id="@+id/frame_chat"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom"></include></LinearLayout>

activity_main.xml里需要加上FrameLayout和include

java文件

MainActivity

package com.example.mywork;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener{//Fragmentprivate Fragment fragment_first=new Fragment_chat();private Fragment fragment_second=new Fragment_mail_list();private Fragment fragment_third=new Fragment_find();private Fragment fragment_fourth=new Fragment_me();//底端菜单栏LinearLayoutprivate LinearLayout linear_first;private LinearLayout linear_second;private LinearLayout linear_third;private LinearLayout linear_fourth;//底端菜单栏中的Imageviewprivate ImageView imageView_first;private ImageView imageView_second;private ImageView imageView_third;private ImageView imageView_fourth;//底端菜单栏中的TextViewprivate TextView textView_first;private TextView textView_second;private TextView textView_third;private TextView textView_fourth;//FragmentManagerprivate FragmentManager fragmentManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE );setContentView(R.layout.activity_main);initView();initFragment();initEvent();selectFragment(0);//将第一个图标设为选中状态imageView_first.setImageResource(R.drawable.chat_green);textView_first.setTextColor(getResources().getColor(R.color.colorViewPress));}@Overridepublic void onClick(View view) {//每次点击之后，将所有的ImageView和TextView设置为未选中restartButton();switch(view.getId()){case R.id.chat://选择所点击的菜单对应的图层片段selectFragment(0);//将该菜单的点击状态置为点击态imageView_first.setImageResource(R.drawable.chat_green);textView_first.setTextColor(getResources().getColor(R.color.colorViewPress));break;case R.id.mail_list:selectFragment(1);imageView_second.setImageResource(R.drawable.mail_list_green);textView_second.setTextColor(getResources().getColor(R.color.colorViewPress));break;case R.id.find:selectFragment(2);imageView_third.setImageResource(R.drawable.find_green);textView_third.setTextColor(getResources().getColor(R.color.colorViewPress));break;case R.id.me:selectFragment(3);imageView_fourth.setImageResource(R.drawable.me_green);textView_fourth.setTextColor(getResources().getColor(R.color.colorViewPress));break;default:break;}}//重置菜单的点击状态，设为未点击private void restartButton() {//设置为未点击状态//第一片段imageView_first.setImageResource(R.drawable.chat);textView_first.setTextColor(getResources().getColor(R.color.black));//第二片段imageView_second.setImageResource(R.drawable.mail_list);textView_second.setTextColor(getResources().getColor(R.color.black));//第三片段imageView_third.setImageResource(R.drawable.find);textView_third.setTextColor(getResources().getColor(R.color.black));//第四片段imageView_fourth.setImageResource(R.drawable.me);textView_fourth.setTextColor(getResources().getColor(R.color.black));}//初始化中间的部分的图层片段private void initFragment(){fragmentManager=getSupportFragmentManager();FragmentTransaction transaction=fragmentManager.beginTransaction();transaction.add(R.id.frame_chat,fragment_first);transaction.add(R.id.frame_chat,fragment_second);transaction.add(R.id.frame_chat,fragment_third);transaction.add(R.id.frame_chat,fragment_fourth);//提交事务transaction.commit();}//初始化各底端的LinearLayout、ImageView和TextView组件private  void initView(){linear_first=findViewById(R.id.chat);linear_second=findViewById(R.id.mail_list);linear_third=findViewById(R.id.find);linear_fourth=findViewById(R.id.me);imageView_first=findViewById(R.id.imageView1);imageView_second=findViewById(R.id.imageView2);imageView_third=findViewById(R.id.imageView3);imageView_fourth=findViewById(R.id.imageView4);textView_first=findViewById(R.id.textView1);textView_second=findViewById(R.id.textView2);textView_third=findViewById(R.id.textView3);textView_fourth=findViewById(R.id.textView4);}//初始化点击监听事件private void initEvent(){linear_first.setOnClickListener(this);linear_second.setOnClickListener(this);linear_third.setOnClickListener(this);linear_fourth.setOnClickListener(this);}//隐藏所有图层分段private void hideView(FragmentTransaction transaction){transaction.hide(fragment_first);transaction.hide(fragment_second);transaction.hide(fragment_third);transaction.hide(fragment_fourth);}//选择相应的图层分段private void selectFragment(int i){FragmentTransaction transaction=fragmentManager.beginTransaction();//调用隐藏所有图层函数hideView(transaction);switch (i){case 0:transaction.show(fragment_first);break;case 1:transaction.show(fragment_second);break;case 2:transaction.show(fragment_third);break;case 3:transaction.show(fragment_fourth);break;default:break;}//提交转换事务transaction.commit();}}

四个调用按钮的java文件

以Fragment_chat为例

package com.example.mywork;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;public class Fragment_chat extends Fragment {public Fragment_chat() {}@Overridepublic View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
//        return super.onCreateView(inflater, container, savedInstanceState);return inflater.inflate(R.layout.fragment_chat,container,false);}
}

图片资源的设置

在res文件夹中的drawable中新建图片文件，以chat图标的两个文件为例

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="32dp"android:height="32dp"android:viewportWidth="1024"android:viewportHeight="1024"><pathandroid:fillColor="#FF000000"android:pathData="M64 981.333333a21.333333 21.333333 0 0 1-10.973333-39.626666c65.813333-39.486667 110.1-75.9 140.74-116.066667C97.473333 744.9 42.666667 631.68 42.666667 512a391.093333 391.093333 0 0 1 37.213333-166.806667c23.773333-50.853333 57.76-96.486667 101.02-135.626666C224 170.566667 274.173333 139.96 330 118.593333 387.666667 96.526667 448.906667 85.333333 512 85.333333s124.333333 11.193333 182 33.26c55.82 21.366667 106 52 149.093333 90.973334 43.26 39.14 77.246667 84.773333 101.02 135.626666a392.46 392.46 0 0 1 0 333.613334c-23.773333 50.853333-57.76 96.486667-101.02 135.626666-43.113333 39-93.273333 69.606667-149.093333 90.973334-57.666667 22.066667-118.906667 33.26-182 33.26a511.086667 511.086667 0 0 1-150.833333-22.513334c-34.453333 19.66-74.666667 35.113333-119.68 46C188.666667 974.873333 128.953333 981.333333 64 981.333333zM512 128c-235.266667 0-426.666667 172.26-426.666667 384 0 112.793333 54.833333 219.46 150.44 292.666667a21.333333 21.333333 0 0 1 4.833334 28.666666c-24.033333 36.413333-56.16 69.18-100.58 102 83.373333-7.64 154.166667-28.213333 207.453333-60.606666a21.333333 21.333333 0 0 1 17.76-2A467.673333 467.673333 0 0 0 512 896c235.266667 0 426.666667-172.26 426.666667-384s-191.4-384-426.666667-384z"/>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="32dp"android:height="32dp"android:viewportWidth="1024"android:viewportHeight="1024"><pathandroid:fillColor="#1afa29"android:pathData="M944.12 345.193333c-23.773333-50.853333-57.76-96.486667-101.026667-135.626666-43.093333-39-93.266667-69.606667-149.093333-90.973334C636.333333 96.526667 575.093333 85.333333 512 85.333333s-124.333333 11.193333-182 33.26c-55.82 21.366667-106 52-149.093333 90.973334-43.26 39.14-77.246667 84.773333-101.02 135.626666A391.093333 391.093333 0 0 0 42.666667 512c0 119.68 54.806667 232.9 151.1 313.64-30.666667 40.166667-74.926667 76.58-140.74 116.066667A21.333333 21.333333 0 0 0 64 981.333333c64.953333 0 124.666667-6.46 177.486667-19.206666 45.026667-10.86 85.226667-26.313333 119.68-46A511.086667 511.086667 0 0 0 512 938.666667c63.093333 0 124.333333-11.193333 182-33.26 55.82-21.333333 106-52 149.086667-90.973334 43.266667-39.14 77.253333-84.773333 101.026666-135.626666a392.46 392.46 0 0 0 0-333.613334z"/>
</vector>

其中fillcolor设置颜色，颜色的代码可以自行百度选择喜欢的颜色，图片的代码为pathData的内容，这里的图片全部来自iconfont-阿里巴巴矢量图标库

可以自行在网站上找合适的图片进行使用

结果展示

安装Android studio自带的模拟器尝试运行

可以看到简单的界面功能可以实现

代码已上传到gitee仓库墨黑色的白/Android

作为初学者还有很多不足，希望大佬可以指正错误

Android 初学模仿微信APP进行简单的界面设计相关推荐

Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计前 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
UI培训教程分享：APP启动页UI界面设计
本期为大家分享的ui培训教程是关于APP启动页面的UI设计方面,作为一名合格的UI设计师,APP产品的启动页是需要会的,下面就来看看详细的教程吧. UI培训教程分享:APP启动页UI界面设计启动页面 ...
UI素材模板|App搜索页UI界面设计版式
无论是在app还是在web端,搜索都是一个发现内容的重要方式.与web端不同,app上的搜索功能在设计方面有自己独特的展现方式. 下面就看看这些App搜索页UI界面设计吧. 工作搜索App免费UI ...
Android开发入门 - 简易开心消消乐界面设计
Android开发入门 - 简易开心消消乐界面设计第一步,点击File->NEW->new module,进入以下界面,选择第一个,即运行在手机和平板电脑上.点击next. 第二步,在第 ...
微信小程序的开发界面设计
微信小程序的开发界面设计需要遵循微信官方的设计规范和标准,以确保小程序具有一致的外观和用户体验.以下是一些微信小程序开发界面设计的建议: 界面布局:微信小程序的界面布局应该简洁明了,易于使用.界面中应 ...
uniapp简单UI界面设计《登录界面粉丝列表我的好友设置页面等》（附源码）
涉及Uniapp框架结构.UI图到界面标签元素的转换过程.标签Uniapp框架配置和Uniapp常见组件使用,熟练使用Uniapp常用API和Flex布局,熟练掌握页面跳转数据传参方法以及uniapp ...
Android Studio 开发–微信APP门户界面设计(二)
本次Github代码仓库 --crcr1013/MyWechat 文章目录一.成果要求二.关键步骤 1.准备工作 1.1环境准备 1.2布局构想及资源准备 2. 朋友圈的RecyclerView布 ...
Android仿QQ微信开场导航以及登陆界面
相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后进入应用,这一效果适用于多种项目中,相信今后开发应用一定会用得到 ...

Android 初学模仿微信APP进行简单的界面设计