文章目录

一、设计目标
二、功能说明
三、代码解析
- 1. layout文件夹
- - 头部标签栏
  - 底部（四个按钮）
  - 中间信息栏
  - 主界面布局
- 2. drawable文件夹
- 3.java文件夹
- - Fragment
  - MainActivity
四、截图展示
五、源码仓库地址

一、设计目标

自制简易微信界面

二、功能说明

三个部分：头部标签栏，中间信息栏，底部四个按钮，并且每按一个按钮信息栏就会弹出对应的样式

三、代码解析

1. 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="60dp"android:background="@color/black"><TextViewandroid:id="@+id/top"android:textColor="@color/white"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="45sp"android:text="@string/top" />
</LinearLayout>

底部（四个按钮）

bottom.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="80dp"android:background="@color/black"android:orientation="horizontal"><LinearLayoutandroid:id="@+id/LinearLayout_chat"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/chat_btn"android:layout_width="match_parent"android:layout_height="55dp"android:backgroundTint="@color/white"android:contentDescription="@string/app_name"android:scaleType="centerInside"app:srcCompat="@drawable/chat" /><TextViewandroid:id="@+id/chat_text"android:layout_width="match_parent"android:layout_height="25dp"android:layout_weight="10"android:gravity="center"android:text="@string/chat_name"android:textColor="@color/white"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout_addressList"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/addressList_btn"android:layout_width="match_parent"android:layout_height="55dp"android:backgroundTint="@color/white"android:contentDescription="@string/app_name"android:scaleType="centerInside"app:srcCompat="@drawable/addresslist" /><TextViewandroid:id="@+id/addressList_text"android:layout_width="match_parent"android:layout_height="25dp"android:layout_weight="1"android:text="@string/addressList_name"android:textColor="@color/white"android:textSize="18sp"android:gravity="center" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout_find"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/find_btn"android:layout_width="match_parent"android:layout_height="55dp"android:backgroundTint="@color/white"android:contentDescription="@string/app_name"android:scaleType="centerInside"app:srcCompat="@drawable/find" /><TextViewandroid:id="@+id/find_text"android:layout_width="match_parent"android:layout_height="25dp"android:layout_weight="10"android:gravity="center"android:text="@string/find_name"android:textColor="@color/white"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout_me"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/me_btn"android:layout_width="match_parent"android:layout_height="55dp"android:backgroundTint="@color/white"android:contentDescription="@string/app_name"android:scaleType="centerInside"app:srcCompat="@drawable/me" /><TextViewandroid:id="@+id/me_text"android:layout_width="match_parent"android:layout_height="25dp"android:layout_weight="10"android:gravity="center"android:text="@string/me_name"android:textColor="@color/white"android:textSize="18sp" /></LinearLayout>
</LinearLayout>

中间信息栏

使用四个片段实现点击四个按钮显示出四个对应界面，fragment.xml文件会在java文件夹下创建fragment类时自动生成，这里展示其中一个聊天片段，即fragment_chat.xml,其他的类似，只需将textview控件的text值进行更改即可

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".chatFragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:layout_gravity="center"android:textSize="40sp"android:textColor="@color/black"android:text="这是微信聊天界面" /></FrameLayout>

主界面布局

activity_main.xml
使用linearlayout布局，设置orientation为垂直，自上而下依次是头部标签，中间信息栏，底部，使用<include layout=“@layout/…” / >进行引用layout目录下已经写好的界面，其中中间信息栏因为要绑定片段，使用framelayout布局

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

2. drawable文件夹

此文件夹用于存放imagebutton控件对应的图片，没带有press的是未点击状态下按钮的图片，带有press的是点击后按钮的图片

以chat.png为例，聊天按钮
未点击：
点击：

3.java文件夹

除了MainActivity是自带的，其他四个fragment类全都要新建，新建后在layout文件夹下会生成对应的.xml文件，新建后会自动生成代码无需更改

Fragment

这里以chatFragment为例，展示自动生成的代码

package com.example.myapplication_vx;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import androidx.fragment.app.Fragment;/*** A simple {@link Fragment} subclass.* Use the {@link chatFragment#newInstance} factory method to* create an instance of this fragment.*/
public class chatFragment extends Fragment {// TODO: Rename parameter arguments, choose names that match// the fragment initialization parameters, e.g. ARG_ITEM_NUMBERprivate static final String ARG_PARAM1 = "param1";private static final String ARG_PARAM2 = "param2";// TODO: Rename and change types of parametersprivate String mParam1;private String mParam2;public chatFragment() {// 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 chatFragment.*/// TODO: Rename and change types and number of parameterspublic static chatFragment newInstance(String param1, String param2) {chatFragment fragment = new chatFragment();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_chat, container, false);}
}

MainActivity

使用接口View.OnClickListener

package com.example.myapplication_vx;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageSwitcher;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//定义四个ImageButton类型对象
private ImageButton chat_btn;
private ImageButton addressList_btn;
private ImageButton find_btn;
private ImageButton me_btn;

@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//通过ImageButton的id找到控件chat_btn = findViewById(R.id.chat_btn);addressList_btn = findViewById(R.id.addressList_btn);find_btn = findViewById(R.id.find_btn);me_btn = findViewById(R.id.me_btn);//为四个ImageButton类型的控件创点击事件监听器chat_btn.setOnClickListener(this::onClick);addressList_btn.setOnClickListener(this::onClick);find_btn.setOnClickListener(this::onClick);me_btn.setOnClickListener(this::onClick);
}
//重写点击事件
@Override
public void onClick(View view) {reseting();//将四个按钮恢复初始状态的方法switch(view.getId()){case R.id.chat_btn://“聊天按钮被点击”chat_btn.setImageResource(R.drawable.chat_press);replaceFragment(new chatFragment());break;case R.id.addressList_btn://“通讯录按钮被点击”addressList_btn.setImageResource(R.drawable.addresslist_press);replaceFragment(new addresslistFragment());break;case R.id.find_btn://“发现”按钮被点击find_btn.setImageResource(R.drawable.find_press);replaceFragment(new findFragment());break;case R.id.me_btn://“我的”按钮被点击me_btn.setImageResource(R.drawable.me_press);replaceFragment(new meFragment());break;}
}
//替换主页面中的信息栏方法
private void replaceFragment(Fragment fragment) {FragmentManager fragmentManager=getSupportFragmentManager();FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();fragmentTransaction.replace(R.id.framelayout,fragment);fragmentTransaction.commit();
}
//四个按钮恢复初始状态
public void reseting(){//使用setImageResource方法更改ImageButton控件的srcCompat属性的值，简单来说换个图片chat_btn.setImageResource(R.drawable.chat);addressList_btn.setImageResource(R.drawable.addresslist);find_btn.setImageResource(R.drawable.find);me_btn.setImageResource(R.drawable.me);
}

}

四、截图展示

五、源码仓库地址

https://gitee.com/zzzsssyyy/AS_study.git

使用AS自制简易微信界面相关推荐

Android studio设计一个简易微信界面
一.设计要求及实现构想 1.设计一个简易微信界面框架,包含至少4个tab页面(我设计的4个分别为message.contact.find.config),要求能实现四个页面之间的点击切换. 2.首先分 ...
Android简易微信界面
Android简易微信界面专选课移动互联网开发的第一次作业,利用Android Studio进行了简易Android微信界面的搭建完整项目代码界面样式展示: 界面xml源码主界面xml源码 & ...
Android Studio制作简易微信界面
文章目录制作要求一.top,buttom页面制作二.四个tab页面和activity_main页面制作 1.四个tab页面 2.activity_main页面三 . 五个java文件制作要求 ...
WPF仿微信界面发送消息简易版
WPF仿微信界面发送消息简易版参考别的博主的例子用WPF MVVM框架来仿了一个微信聊天界面,做了个发送消息简易功能,下面一起来看看吧! 以下为View视图布局代码,消息对话框的样式直接在这里定义了 ...
PC微信界面透明度修改美化自制小工具+壁纸1.1
最开始是换一张比较好看的壁纸,感觉在聊微信的时候,微信这界面太丑了,于是就突发奇想的让微信界面透明化,以便能灵活的搭配我的壁纸. 易编写,懒得上壳了. 透明值范围1-255可调 1.1更新内容 1.减 ...
Android Studio——类微信界面设计
设计目标:Android studio制作简易类微信界面. 功能:展示四个可切换界面,当点击下方按钮时,界面随之切换. 布局:顶部和底部layout.主页面(中间放一个framelayout显示界面内 ...
如何给自制的微信小程序设置一个密码
给自制的微信小程序设置密码,需要wxml文件和js文件.本文将wxml文件命名为fenliu.wxml,将js文件命名为fenliu.js. fenliu.wxml文件内容为: <view> ...
使用STM8单片机+NTC热敏电阻自制简易温度巡检仪
最近在测试设备的时候需要监测设备的温度,平常测试时都是通过红外热成像仪测试,然后手动记录数据.这样测试的话工作量比较大,需要几分钟就记录一次数据.于是想着能不能用单片机做一个测试温度的装置,用电脑 ...
基于Java和Socket实现局域网通讯的简易微信设计
资源下载地址:https://download.csdn.net/download/sheziqiong/85947114 资源下载地址:https://download.csdn.net/downl ...

使用AS自制简易微信界面