安卓作业——类微信页面的设计

已于 2022-09-30 16:45:35 修改
阅读量647 收藏 4
点赞数
文章标签： android 微信 android studio
于 2022-09-28 17:05:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fan12191118/article/details/127091459
版权

一.设计目标

在Android studio 上开发一个简单的微信界面，并实现切换效果

二.功能说明

设计好的微信界面共有四个页面，点击不同按钮后，显示四个不同的界面

三.代码解析

先分别创建两个布局文件bottom.xml、top.xml用于展示页面的顶部和底部，中间用一个framelayout填充，用四个fragement来展示四个tab页面，并实现四个页面之间的点击切换，且能够通过监听控制实现在点击不同控件时能展示出对应的tab页面。

1.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="80dp"
    android:gravity="center"
    android:background="#3C3737"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="WeChat"
        android:textColor="#ffffff"
        android:textSize="20sp" />

</LinearLayout>

效果图
在这里插入图片描述
2.buttom.xml设计
在一级linearlayout下再放置4个linearlayout，每个二级linearlayout下分别再放置一个imageview和一个textview用于填充相应的微信图标和文字

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:contentDescription="TODO"
        app:srcCompat="@drawable/xiaoxi" />

    <TextView
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="消息"
        android:textSize="25sp" />
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

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

    <TextView
        android:id="@+id/contact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="通讯录"
        android:textSize="25sp" />
    </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        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/faxian" />

    <TextView
        android:id="@+id/find"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="发现"
        android:textSize="25sp" />
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        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/me" />

        <TextView
            android:id="@+id/config"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textSize="25sp" />
    </LinearLayout>
</LinearLayout>

在这里插入图片描述
3.在mainactivity.xml中加入一个framelayout用于展示页面信息，下面是相关代码

<?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=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/top"></include>

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

        </FrameLayout>

        <include layout="@layout/bottom"></include>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
四个fragment的代码如下，其格式基本一致
MessageFragement.java代码如下：

package com.example.practice1;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class MessageFragment extends Fragment {
    public MessageFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_message, container, false);
    }

}

fragement_message.xml代码如下：

<?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=".MessageFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/messageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是消息界面"
        android:gravity="center"
        android:textSize="30sp"/>

</FrameLayout>

在这里插入图片描述
CommunicationFragement.java代码如下：

package com.example.practice1;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * A simple {@link Fragment} subclass.
 */
public class CommunicationFragment extends Fragment {

    public CommunicationFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_communication, container, false);
    }

}

fragement_communication.xml代码如下：

<?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=".CommunicationFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/messageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是通讯界面"
        android:gravity="center"
        android:textSize="30sp"/>

</FrameLayout>

在这里插入图片描述
FindFragement.java代码如下：

package com.example.practice1;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FindFragment extends Fragment {


    public FindFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_find, container, false);
    }

}

fragement_find.xml代码如下：

<?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=".FindFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/messageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是发现界面"
        android:gravity="center"
        android:textSize="30sp"/>
    —

</FrameLayout>

在这里插入图片描述
MeFragement.java代码如下：

package com.example.practice1;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class MeFragment extends Fragment {


    public MeFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_me, container, false);
    }

}

fragement_me.xml代码如下：

<?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=".MeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/messageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是本地用户界面"
        android:gravity="center"
        android:textSize="30sp"/>
</FrameLayout>

在这里插入图片描述
MainActivity.java代码：

package com.example.practice1;

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.SurfaceControl;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private FragmentManager fragmentManager;
    private FragmentTransaction fragmentTransaction;

    @Override
    protected void onCreate(Bundle savedInstanceState)  {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        linearLayout1.setBackgroundColor(Color.rgb(155,155,155));
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.id_content, new MessageFragment());
        fragmentTransaction.commit();
    }
    private void initEvent(){
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }

    private void initView(){
        linearLayout1 = findViewById(R.id.linearLayout1);
        linearLayout2 = findViewById(R.id.linearLayout2);
        linearLayout3 = findViewById(R.id.linearLayout3);
        linearLayout4 = findViewById(R.id.linearLayout4);
    }

    @Override
    public void onClick(View view){
        setAllColor();
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();
        switch (view.getId()){
            case R.id.linearLayout1:
                fragmentTransaction.replace(R.id.id_content,new MessageFragment());
                linearLayout1.setBackgroundColor(Color.rgb(155,155,155));
                break;

            case R.id.linearLayout2:
                fragmentTransaction.replace(R.id.id_content,new CommunicationFragment());
                linearLayout2.setBackgroundColor(Color.rgb(155,155,155));
                break;
            case R.id.linearLayout3:
                fragmentTransaction.replace(R.id.id_content,new FindFragment());
                linearLayout3.setBackgroundColor(Color.rgb(155,155,155));
                break;
            case R.id.linearLayout4:
                fragmentTransaction.replace(R.id.id_content,new MeFragment());
                linearLayout4.setBackgroundColor(Color.rgb(155,155,155));
                break;
        }
        fragmentTransaction.commit();
    }
    private void setAllColor() {
        linearLayout1.setBackgroundColor(Color.WHITE);
        linearLayout2.setBackgroundColor(Color.WHITE);
        linearLayout3.setBackgroundColor(Color.WHITE);
        linearLayout4.setBackgroundColor(Color.WHITE);
    }
}
四.运行截图

点击后相应图标变成深色，并显示相应的页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五.实验小结

本次实验后，我学会了安卓软件中的一些基本控件的使用以及相关设置，在微信页面的设计之中，认识到fragment和activity的使用技巧，以及页面切换如何实现。在实验中要注意一些语言的特殊格式，避免出现语法错误，以后更要勤加练习，熟悉其他的用法和功能。

六.仓库地址

源码仓库地址

Fan12191118
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android——类微信界面设计
weixin_45600557的博客
10-16 480
移动开发技术1 设计类微信APP门户界面，包含4个tab切换效果 1.页面分为上中下三部分：分别为标题，显示内容，切换按钮； 2.底部选择框发生改变时，中间显示内容也发生相对应的改变； 导入相关文件 阿里矢量图库 在线点九图片制作 实现思路 实验分为两个部分：界面UI设计以及页面逻辑控制 UI设计部分 **标题**使用垂直线性布局并设置标题在正中间； **底部按钮**布局使用水平线性布局，将四个按钮的垂直布局嵌套在页面的水平布局中 编写控制代码逻辑的Java文件 为实现在点击不同按钮时显示不同内
移动开发技术作业一：android studio开发微信界面
Christgumeng的博客
10-09 568
一、top.xml布局及代码 在layout里新建一个名为top.xml的文件，在布局小组件俩面拖一个LinearLayout，然后在LinearLayout之下拖一个textView进来。代码如下： <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" ..
Android仿微信应用(期末大作业)
热门推荐
qq_43553929的博客
12-19 2万+
Android仿微信应用 1.主要功能展示 注册登录 启动模拟器默认打开窗口 注册界面，用户名密码存入数据库（用户名唯一），注册会检查是否存在该用户名，存在则提示重新输入用户名；用户名不存在则注册成功，并将数据存入数据库 登录界面，对输入的用户名和密码进行验证，若不能对应，则提示错误信息，若能对应则成功登录进入主界面。 登录成功的默认打开碎片，用户界面由四个碎片组成，依次是消息、通讯录、朋友圈和我的。 消息界面的条目可以左滑动删除，条目过多的话还可以上下滑动，顶部有小菜单，可以点击跳转添加好
Android Studio制作微信界面（一）
最新发布
m0_62409036的博客
04-29 1814
Android Studio制作微信界面（一）实现目标实现微信底部导航栏功能：根据用户选择的选项切换不同的Fragment显示在FrameLayout中。每个选项对应一个Fragment，包括聊天界面、通讯录界面、发现界面和主页界面，并在界面中显示“这里是微信”，“这里是通讯录”等字样，底部按钮颜色，图片随之替换绿色。每个选项对应一个Fragment，包括聊天界面(FragChat)、通讯录界面(FragAddresslist)、发现界面(FragFind)和主页界面(FragHome)：
基于安卓的微信界面
05-03
基于安卓(eclipse工具)，模仿微信实现微信页面实现。页面精美。
Android Studio 微信界面开发——主页面框架
weixin_53723572的博客
03-06 1157
Android Studio 微信界面开发——主页面框架
Android大作业：模仿了wechat界面；用户登录；音乐播放等
06-25
微信界面通过Fragment实现；用户登录通过sqlite实现；音乐播放通过service实现并会发送通知；简单的ListView微信消息等实现
安卓Android源码——仿微信popupwindow.zip
10-11
描述中的内容简洁明了，"安卓Android源码——仿微信popupwindow.zip"与标题相同，强调这是一份Android源码，其设计灵感来源于微信应用中的PopupWindow实现。这意味着开发者可能已经对微信中弹出菜单或者提示框的交互...
安卓大作业——类似微信（可能）
01-27
【安卓大作业——类似微信（可能）】是一个项目，旨在模拟微信的部分功能，包括用户登录、注册、图像展示以及多媒体播放。这个项目可能是学生或初学者为了提升Android应用开发技能而进行的一个实践练习。在该项目中...
安卓Android源码——高仿微信.zip
10-14
【标题】"安卓Android源码——高仿微信.zip"揭示了这个压缩包包含的是一个针对Android平台的开源项目，目标是实现对微信应用界面的高度模仿。这个项目旨在帮助开发者理解和学习如何在Android平台上构建类似微信的...
安卓Android源码——模仿微信导航页效果源码.zip
10-14
这个压缩包"安卓Android源码——模仿微信导航页效果源码.zip"显然是为了帮助开发者理解并实现类似微信的导航页功能。下面我们将深入探讨这一主题。 首先，我们需要了解的是Android开发的基础知识，包括Activity、...
安卓Android源码——仿微信的录音功能.zip
10-11
本篇将深入探讨如何在Android中实现一个类似微信的录音功能，并基于提供的"安卓Android源码——仿微信的录音功能.zip"文件进行解析。 首先，我们需要了解Android系统中的MediaRecorder类，它是用于录制音频、视频的...
Android studio第一次作业：实现Wechat界面
weixin_51059385的博客
10-06 1286
移动开发.Android studio实现类Wechat界面 移动开发.Android studio实现类Wechat界面 文章目录 **1>类Wechat界面有哪些功能** **2>分析如何实现这些功能** **3>bottom.xml的构造** **4>top.xml的构造** **5>activity_main.xml的构造** **6>****MainActivity的构造** **7>调用的四个Fragment文件**
android studio——设计简单微信界面超详细教程
m0_73786116的博客
10-16 7545
android studio设计微信界面以及可能遇到的问题
Android Studio之搭建微信界面
s3177174210的博客
10-15 2614
在完成类微信界面实验时，我们需要熟悉常见控件的使用方法，如RecyclerView、EditText、Button等；了解常用布局的特点，如LinearLayout、RelativeLayout等；使用自定义View或第三方库来实现一些特殊的效果，如表情输入框、图片选择等。在这次的实验下我也对AS这款软件进行了熟悉，让我初步了解了安卓开发，对于其提词器的强大有了很深的印象，代码能力得到了一定的提升。RecyclerView是一个功能强大的Android控件，用于高效显示列表数据。
Android Studio Kotlin 简单实现微信主界面UI
oncegun_QAQ的博客
04-11 1590
Android Studio 使用Kotlin简单实现 微信 主界面UI
Android Studio完成微信朋友圈界面的设计
m0_56760139的博客
05-20 2156
源码在最下面，基本上下载下来自己改改图片就可以用了首先看结果：这里面的圆角头像使用一个工具类实现的RounRectImageView代码来源于这个博主。
安卓移动开发实验：Android Studio设计微信界面
m0_67588387的博客
09-30 3632
无
人工智能-机器学习-移动互联网时代游客使用社交媒体行为的影响因素研究.pdf
05-27
"该文档是关于移动互联网时代游客使用社交媒体行为的研究，特别是以微信为例，探讨人工智能和机器学习在其中的影响。" 随着智能终端（如手机、平板等）的普及和4G技术及应用的发展，我们已经步入了移动互联网时代，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值