一、微信界面的功能

1、可展示出四个可切换界面：微信、联系人、朋友圈、设置；
2、上方栏标题居中，界面中间显示内容，内容随下方栏的选择而切换，下方栏可点击切换，点击过的界面的图标为绿色，没有点击的界面的图标为灰色；
3.主要从top、bottom、中间布局以及MainActivity四个方面分析。

二、top布局

在res->layout新建top.xml文件，将将标题栏的内容居中，并将背景色调为黑色，文字调为白色。

<?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="50dp"android:background="@color/black"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView6"android:layout_width="wrap_content"android:layout_height="40dp"android:text="WeChat"android:textColor="@color/white"android:layout_gravity="center"android:textSize="30sp" />
</LinearLayout>

三、bottom布局

1.将图标文件夹粘贴到drawable中；
2.在res文件夹的layout中新建bottom.xml，拖入TextView拖入ImageButton后会调用drawable，选取所需的图标；
3.复制粘贴四个并调整水平平铺布局

<?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="80dp"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:background="@color/black"android:orientation="horizontal"><LinearLayoutandroid:id="@+id/LinearLayout_weixin"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_wechat_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:clickable="false"android:contentDescription="@string/app_name"app:srcCompat="@drawable/p1" /><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="129dp"android:layout_weight="1"android:gravity="center"android:text="聊天"android:textColor="@color/white"android:textSize="20dp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/LinearLayout_lianxiren"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_friend_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:clickable="false"android:contentDescription="@string/app_name"android:src="@drawable/p2" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="155dp"android:layout_weight="1"android:text="联系人"android:gravity="center"android:textColor="@color/white"android:textSize="20dp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/LinearLayout_pengyouquan"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_contact_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:clickable="false"android:contentDescription="@string/app_name"android:src="@drawable/p3" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:text="朋友圈"android:gravity="center"android:textColor="@color/white"android:textSize="20dp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/LinearLayout_shezhi"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_settings_image"android:layout_width="match_parent"android:layout_height="53dp"android:background="#000000"android:contentDescription="@string/app_name"android:clickable="false"android:src="@drawable/p4" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:text="设置"android:gravity="center"android:textColor="@color/white"android:textSize="20dp" /></LinearLayout></LinearLayout>
</LinearLayout>

四、中间布局

四个tab.xml分别对应四个界面的中间内容，此处以微信界面为例。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".weixinFragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="这是微信聊天界面！"android:textSize="40sp" /></LinearLayout>

五、activity_main.xml

activity_main.xml里面需要加上FragmentLayout（重叠布局）和include

<?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"/><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/buttom" />
</LinearLayout>

六、MainActivity

实现fragment的切换、图标颜色的改变、隐藏未使用界面等功能

package com.example.mywork;import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.View;
import android.app.FragmentManager;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.widget.ImageButton;
import android.widget.LinearLayout;public class MainActivity extends Activity implements View.OnClickListener{private Fragment mTab01=new weixinFragment();private Fragment mTab02=new lianxirenFragment();private Fragment mTab03=new pengyouquanFragment();private Fragment mTab04=new shezhiFragment();private FragmentManager fm;LinearLayout mTabWechat;LinearLayout mTabFriend;LinearLayout mTabContact;LinearLayout mTabSettings;ImageButton mimgWechat;ImageButton mimgFriend;ImageButton mimgContact;ImageButton mimgSettings;@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 initEvent(){mTabWechat.setOnClickListener(this);mTabFriend.setOnClickListener(this);mTabContact.setOnClickListener(this);mTabSettings.setOnClickListener(this);}private void initFragment(){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 initView(){mTabWechat=findViewById(R.id.LinearLayout_weixin);mTabFriend = findViewById(R.id.LinearLayout_lianxiren);mTabContact = findViewById(R.id.LinearLayout_pengyouquan);mTabSettings = findViewById(R.id.LinearLayout_shezhi);mimgWechat = findViewById(R.id.id_tab_wechat_image);mimgFriend = findViewById(R.id.id_tab_friend_image);mimgContact = findViewById(R.id.id_tab_contact_image);mimgSettings = findViewById(R.id.id_tab_settings_image);}private void hideFragment(FragmentTransaction transaction){transaction.hide(mTab01);transaction.hide(mTab02);transaction.hide(mTab03);transaction.hide(mTab04);}private void resetImgs(){mimgWechat.setImageResource(R.drawable.p1);mimgFriend.setImageResource(R.drawable.p2);mimgContact.setImageResource(R.drawable.p3);mimgSettings.setImageResource(R.drawable.p4);}private void selectfragment(int i){FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);switch (i){case 0:transaction.show(mTab01);mimgWechat.setImageResource(R.drawable.p1_press);break;case 1:transaction.show(mTab02);mimgFriend.setImageResource(R.drawable.p2_press);break;case 2:transaction.show(mTab03);mimgContact.setImageResource(R.drawable.p3_press);break;case 3:transaction.show(mTab04);mimgSettings.setImageResource(R.drawable.p4_press);break;default:break;}transaction.commit();}public void onClick(View v){resetImgs();switch (v.getId()){case R.id.LinearLayout_weixin:selectfragment(0);break;case R.id.LinearLayout_lianxiren:selectfragment(1);break;case R.id.LinearLayout_pengyouquan:selectfragment(2);break;case R.id.LinearLayout_shezhi:selectfragment(3);break;}}
}

七、其余文件

1、weixinFragment

package com.example.mywork;import android.os.Bundle;import android.app.Fragment;import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class weixinFragment extends Fragment {private static final String ARG_PARAM1 = "param1";private static final String ARG_PARAM2 = "param2";private String mParam1;private String mParam2;public weixinFragment() {// Required empty public constructor}/*** Use this factory method to create a new instance of* this fragment using the provided parameters.** @param param1 Parameter 1.* @param param2 Parameter 2.* @return A new instance of fragment BlankFragment.*/// TODO: Rename and change types and number of parameterspublic static weixinFragment newInstance(String param1, String param2) {weixinFragment fragment = new weixinFragment();Bundle args = new Bundle();args.putString(ARG_PARAM1, param1);args.putString(ARG_PARAM2, param2);fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() != null) {mParam1 = getArguments().getString(ARG_PARAM1);mParam2 = getArguments().getString(ARG_PARAM2);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_weixin, container, false);}}

2、lianxirenFragment

package com.example.mywork;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import android.app.Fragment;public class lianxirenFragment extends Fragment {private static final String ARG_PARAM1 = "param1";private static final String ARG_PARAM2 = "param2";private String mParam1;private String mParam2;public lianxirenFragment() {// Required empty public constructor}public static weixinFragment newInstance(String param1, String param2) {weixinFragment fragment = new weixinFragment();Bundle args = new Bundle();args.putString(ARG_PARAM1, param1);args.putString(ARG_PARAM2, param2);fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() != null) {mParam1 = getArguments().getString(ARG_PARAM1);mParam2 = getArguments().getString(ARG_PARAM2);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_lianxiren, container, false);}
}

3、pengyouquanFragment

package com.example.mywork;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import android.app.Fragment;public class pengyouquanFragment extends Fragment {private static final String ARG_PARAM1 = "param1";private static final String ARG_PARAM2 = "param2";private String mParam1;private String mParam2;public pengyouquanFragment() {// Required empty public constructor}public static weixinFragment newInstance(String param1, String param2) {weixinFragment fragment = new weixinFragment();Bundle args = new Bundle();args.putString(ARG_PARAM1, param1);args.putString(ARG_PARAM2, param2);fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() != null) {mParam1 = getArguments().getString(ARG_PARAM1);mParam2 = getArguments().getString(ARG_PARAM2);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_pengyouquan, container, false);}
}

4、shezhiFragment

package com.example.mywork;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import android.app.Fragment;public class shezhiFragment extends Fragment {private static final String ARG_PARAM1 = "param1";private static final String ARG_PARAM2 = "param2";private String mParam1;private String mParam2;public shezhiFragment() {// Required empty public constructor}public static weixinFragment newInstance(String param1, String param2) {weixinFragment fragment = new weixinFragment();Bundle args = new Bundle();args.putString(ARG_PARAM1, param1);args.putString(ARG_PARAM2, param2);fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() != null) {mParam1 = getArguments().getString(ARG_PARAM1);mParam2 = getArguments().getString(ARG_PARAM2);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_shezhi, container, false);}
}

八、运行界面

![请添加图片描述](https://img-blog.csdnimg.cn/36da37bffea847c1a1a334c85a532370.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y-95q2q5q2q5Y-9,size_16,color_FFFFFF,t_70,g_se,x_16

源码GitHub地址：
链接: https://github.com/Tsundere12/Mywork01.git

Android studio 微信界面设计相关推荐

android studio微信界面设计,android studio开发微信界面
android studio开发微信界面 android studio开发微信界面功能说明:主要是做微信的简单的聊天界面,利用Fragment,进行微信界面的跳转项目代码: 源代码地址 MainA ...
Android之微信界面设计
Android Studio 学习之实现微信首页界面一.界面布局分析. 首先进行界面布局,看需要几个.xml文件. 1.top.xml对微信界面的顶部进行设计 2.bottom.xml对于微信界面的 ...
Android Studio 微信界面开发——主页面框架
目录功能说明设计流程核心代码详解总结源码开源地址(gitee) 一.功能说明类似微信界面的设计.本次主要进行初步设计,完成微信页面的基础框架,即当点击下方按钮时,页面随之转换,分别包括&q ...
Android——类微信界面设计
移动开发技术1 设计类微信APP门户界面,包含4个tab切换效果 1.页面分为上中下三部分:分别为标题,显示内容,切换按钮: 2.底部选择框发生改变时,中间显示内容也发生相对应的改变: 导入相关文件 ...
用AS实现微信界面设计
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录设计目标一.结果展示二.top.xml 三.bottom.xml 四.4个fragment.xml 五.activity ...
Android简易微信界面
Android简易微信界面专选课移动互联网开发的第一次作业,利用Android Studio进行了简易Android微信界面的搭建完整项目代码界面样式展示: 界面xml源码主界面xml源码 & ...
Android之登录界面设计
Android之登录界面设计这篇文章主要讲述Android开发中常用的APP开发界面–登录界面的开发(由于博主是初学安卓,可能有些小伙伴会感到简陋,我会继续努力学习新知识的,大家一起加油). (1) ...
Android Studio Design界面不显示layout控件的解决方法
Android Studio Design界面不显示layout控件的解决方法参考文章: (1)Android Studio Design界面不显示layout控件的解决方法 (2)https:// ...
android xml 预览,解决Android studio xml界面无法预览问题
解决Android studio xml界面无法预览问题发布时间:2020-10-05 18:48:37 来源:脚本之家阅读:140 作者:张雨明如下图修改style.xml中的 parent ...

Android studio 微信界面设计