Android Studio实现仿微信APP门户界面详解及源码
作者：一个丧乐的野指针 发布时间：2022-06-29 20:08:52
标签：Android,微信,实例
前言
你好！ 本文章主要介绍如何用Android Studio制作简易的门户界面，主要说明框架的各部分功能与实现过程，结尾处附有源码。
界面分析
注：按钮图标是从阿里矢量图标库获取，保存在drawable文件中调用。
首先根据我们的大致规划布局，我们可以先建立三个核心XML文件：
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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#070707"
android:gravity="center"
android:text="奶茶小样"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"
android:textColor="#F8F5F5"
android:textSize="26sp"
android:textStyle="bold"
android:typeface="monospace" />
</LinearLayout>
</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="100dp"
android:background="#0B0B0B"
android:baselineAligned="false"
android:gravity="center|center_horizontal">
<LinearLayout
android:id="@+id/bottom_zhenzhu_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|center_horizontal"
android:orientation="vertical">
<ImageButton
android:id="@+id/bottom_zhenzhu_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:clickable="false"
android:contentDescription="@string/app_name"
android:src="@drawable/zhenzhu" />
<!-- tools:srcCompat="@drawable/Zhengzhou" />-->
<TextView
android:id="@+id/bottom_zhenzhu_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="珍珠"
android:textColor="#FBFBFB"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/bottom_chadong_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/bottom_chadong_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:clickable="false"
android:contentDescription="@string/app_name"
android:src="@drawable/milktea1"
tools:srcCompat="@drawable/milktea1" />
<TextView
android:id="@+id/bottom_chadong_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="茶冻"
android:textColor="#FBFAFA"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/bottom_naigai_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/bottom_naigai_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:clickable="false"
android:contentDescription="@string/app_name"
android:src="@drawable/milktea2"
tools:srcCompat="@drawable/milktea2" />
<TextView
android:id="@+id/bottom_naigai_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="奶盖"
android:textColor="#FBF8F8"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/bottom_buding_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/bottom_buding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
android:clickable="false"
android:contentDescription="@string/app_name"
android:src="@drawable/milktea3"
tools:srcCompat="@drawable/milktea3" />
<TextView
android:id="@+id/bottom_buding_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="布丁"
android:textColor="#FAF8F8"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
lactivity_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:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical"
tools:context=".MainActivity">
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<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"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
注意：在top.xml和bottom.xml文件写好后，将其插入到lactivity_main.xml文件的头尾位置，并在中间加入FrameLayout来设置之后的Fragment文件切换。
界面动态实现代码
目录结构：
MainActivity:
建立相关变量：
private Fragment zhenzhuFragment=new zhenzhuFragment();
private Fragment naigaiFragment=new naigaiFragment();
private Fragment budingFragment=new budingFragment();
private Fragment chadongFragment=new chadongFragment();
private FragmentManager fragmentManager;
private LinearLayout mTzhenzhu,mTchadong,mTnaigai,mTbuding;
private ImageButton mTmgZhenZhu;
private ImageButton mTmgChaDong;
private ImageButton mTmgNaiGai;
private ImageButton mTmgBuDing;
private TextView text_zhenzhu;
private TextView text_chadong;
private TextView text_naigai;
private TextView text_buding;
主要函数方法：
OnCreate: 利用我们在XML文件中定义的View的id属性来获取相应的View对象，并且加上View.OnClickListener接口，使下方生成的OnClick()方法自动匹配相应，同时在此函数中我们有添加了相应的 * 。
initFragment:
我们为了实现界面切换，需定义Fragment文件，因为我们的转换界面有4种，故我们总共需要5个fragment文件。
wechatFragemt:
public class wechatFragment extends Fragment {
public wechatFragment() {
// 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_wechat, container, false);
}
}
其余四个文件大致上与此文件相似，但其中的onCreateView函数应根据我们自己配置的XML文件而有所不同，例如：
budingFragment:
public class budingFragment extends Fragment {
public budingFragment(){
}
@Override
public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// return super.onCreateView(inflater, container, savedInstanceState);
return inflater.inflate(R.layout.buding_fragment_wechat,container,false);
}
}
我们可以看到，此函数的返回值是根据XML文件而作出改变，如果忽视，界面转换将会失败。
initFragment函数主要作用就是向之前的lacitivity_main.xml文件中的Fragment部分添加我们要做切换的代码。
showfagment： 我们在此函数中通过调用索引值来设置相应的界面效果代码，例如Fragment界面展示、图片的改变、字体的设置。（由于我选择的按钮图片颜色过于鲜艳，故无法实现点击时的亮暗转换，为了体现按钮被点击，我设置了当点击按钮时字体颜色会发生变化作为替代）
hideFragment：顾名思义，此函数是为了隐藏Fragment，配合showFragment函数只显示我们目前需要显示的Fragment。
onClick：前面在介绍OnCreate函数时说过，是由View.OnClickListener接口生成，设置我们的点击过程，并且此函数调用showFragment，完全控制我们制作的界面转换流程。
静态界面实现
目录结构：
三个核心文件在前面已经介绍过，在此不做过多解释，如果不清楚可翻到上面去查看。根据上述创建5个Fragment文件，我们应对应生成5个Fragment的XML文件来设计界面效果。
fragment_wechat：
此文件是由上述的的Fragment的java文件自动生成，故其余四个文件可参考该文件进行配置。
<?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"
android:gravity="center"
android:orientation="vertical"
tools:context=".wechatFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="这是微信聊天界面"
android:textSize="48sp" />
</LinearLayout>
在此提醒，像我前面写的Fragment的java文件因与对应的XML文件联系起来，我们的XML文件也应与Fragment的java文件联系起来。
以buding_fragment_wechat为例：
<?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"
android:orientation="vertical"
tools:context=".budingFragment">
<!-- tools:context=".wechatFragment"-->
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="这是布丁界面"
android:textSize="48sp" />
</LinearLayout>
调用context属性与其JAVA文件联系。
来源：https://blog.csdn.net/m0_46436852/article/details/120652299
0
投稿猜你喜欢
- Thumbnailator 是一个优秀的图片处理的Google开源Java类库。处理效果远比Java API的好。从API提供现有的图像文件
- 提要本节继续给大家带来是显示提示信息的第三个控件AlertDialog(对话框)，同时它也是其他Dialog的的父类！比如ProgressD
- 在Android/Java开发中，用来处理字符串常用的类有3种: String、StringBuilder、StringBuffer。它们的
效果图代码 package com.jh.timelinedemo;import android.content.Context;- SpringBoot集成Mybatis时mybatis.mapper-locations和@MapperScan的作用1、mybatis.m
- 在网上很多关于dubbo异常统一处理的博文，90％都是抄来抄去。大多都是先上一段dubbo中对于异常的统一处理的原码，然后说一堆的（甚至有1
- 解决方法有如下两种：第一种如果你 repo sync 了 android 的整个源码，那么可以直接把你的 app 放到 /packages/
- 1.一段简单的代码首先来一段代码，这个是单例模式，可能有的人不知道什么是单例模式，我就简单说一下单例模式是指一个类有且只有一种对象实例。这里
- 一、自己封装URLConnection 连接请求类 public void downloadFile1() { try{ &nb
- 一、使用在非静态方法上public synchronized void syzDemo(){ System.out.print
- 代理OkHttp 支持设置代理，使用OkHttpClient.proxy()即可设置。什么是代理？根据代理的对象不同，可分为正向代理和反向代
- 本文实例分析了C#双缓冲技术。分享给大家供大家参考，具体如下：双缓冲解决闪烁问题。整理：GDI+的双缓冲问题一直以来的误区：.net1.1
- 大家对于 Spring 的 scope 应该都不会默认。所谓 scope，字面理解就是“作用域”、“范围”，如果一个 bean 的 scop
- 这篇文章主要介绍了Java List集合排序实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 本文实例讲述了Android DigitalClock组件用法。分享给大家供大家参考，具体如下：DigitalClock组件的使用很简单，先
- 前言对于广大java开发者而已，对于J2EE规范中的Session应该并不陌生，我们可以使用Session管理用户的会话信息，最常见的就是拿
- 本文实例讲述了C#启动进程的几种常用方法。分享给大家供大家参考。具体如下：1.启动子进程,不等待子进程结束private void simp
- 缓存，我相信大家对它一定不陌生，在项目中，缓存肯定是必不可少的。市面上有非常多的缓存工具，比如 Redis、Guava Cache 或者 E
- 我们都知道java是一种面向对象的编程语言，但是在实际意义上java并不是纯面向对象，因为面向对象的意义就是万物皆对象，那么如果说int类型
- 前言当你编写一个应用时，你通常都会希望用户能够定制化他们和应用交互的方式，以及应用与系统进行交互的方式。这种方式通常被称为 &ldq
