Android studio实现类微信界面
1.需要实现的功能:
- 页面具有标题微信
- 页面具有中间显示框
- 页面具有底部选择框,并且具有选择事件
- 页面底部选择框在进行改变的时候,我们需要中间显示框的页面同步改变
- 页面的布局清晰
效果展示如下
1.按钮图标文件准备:
这里是从阿里图标库获得的图标,可以自行选择图片格式和大小下载,由于需要做一个类微信界面,所以选择了微信,朋友,通讯录和我四个初始图标还有对应的四个点击按钮之后颜色变化的图标。
图标文件可以通过ctrl+C/V粘贴在res下的drawable文件夹下,注意图片命名不要有空格汉字。
2.主界面布局
首先可以观察到微信界面分为两部分部分:底部四个按钮,中间部分通过点击会显示不同的界面。
所以我们需要通过res新建两个layout xml文件,底部按钮的bottom.xml文件,包括了底部四个按钮的内容最后再在activity_main.xml文件里引入这些xml文件,中间加入一个FrameLayout开辟出一块空白区域可以自己加一些控件。
bottom_layout.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="55dp"android:background="@color/grey"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_weichat"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:background="@drawable/tab_wechat"android:id="@+id/tab_iv_wechat"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_wexin"android:gravity="center"android:text="微信"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_contact"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:background="@drawable/tab_contact"android:id="@+id/tab_iv_contact"></ImageView><TextViewandroid:layout_width="48dp"android:layout_height="wrap_content"android:id="@+id/text_contact"android:gravity="center"android:text="通讯录"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_find"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:background="@drawable/tab_find"android:id="@+id/tab_iv_find"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_find"android:gravity="center"android:text="发现"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:layout_gravity="center"android:gravity="center"android:orientation="vertical"android:id="@+id/id_tab_profile"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:background="@drawable/tab_profile"android:id="@+id/tab_iv_profile"></ImageView><TextViewandroid:layout_width="32dp"android:layout_height="wrap_content"android:id="@+id/text_profile"android:gravity="center"android:text="我"/></LinearLayout>
</LinearLayout>
到这里页面按钮设置全部完成。
activity_main.xml配置
LinearLayout设置为vertical,通过include引入底部和头部文件,中间再加一个FrameLayout设置layout_width,layout_height,layout_weight属性。
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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"><androidx.viewpager2.widget.ViewPager2android:layout_height="0dp"android:layout_width="match_parent"android:layout_weight="1"android:id="@+id/id_viewpager"/><include layout="@layout/bottom_layout"></include>
</LinearLayout>
这样主界面布局基本完成
3.主程序编写
编写的整体思路就是我们点击不同的按钮,主布局文件里的framelayout能够转换显示不同的界面,所以这里需要新建四个对应的fragment类为了添加显示framelayout的不同布局文件。
主程序代码如下:
package com.example.wechat2;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;import java.util.ArrayList;public class MainActivity extends AppCompatActivity implements View.OnClickListener{ViewPager2 viewPager;private LinearLayout llChat, llContact, llFind, llProfile;private ImageView ivChat, ivContact, ivFind, ivProfile, ivCurrent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initPager();initTabView();}private void initTabView() {llChat = findViewById(R.id.id_tab_weichat);llChat.setOnClickListener(this);llContact = findViewById(R.id.id_tab_contact);llContact.setOnClickListener(this);llFind = findViewById(R.id.id_tab_find);llFind.setOnClickListener(this);llProfile = findViewById(R.id.id_tab_profile);llProfile.setOnClickListener(this);ivChat = findViewById(R.id.tab_iv_wechat);ivContact = findViewById(R.id.tab_iv_contact);ivFind = findViewById(R.id.tab_iv_find);ivProfile = findViewById(R.id.tab_iv_profile);ivChat.setSelected(true);ivCurrent = ivChat;}private void initPager() {viewPager = findViewById(R.id.id_viewpager);ArrayList<Fragment> fragments = new ArrayList<>();fragments.add(BlankFragment.newInstance("微信聊天界面"));fragments.add(BlankFragment.newInstance("通讯录界面"));fragments.add(BlankFragment.newInstance("发现界面"));fragments.add(BlankFragment.newInstance("我"));MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);viewPager.setAdapter(pagerAdapter);viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position, positionOffset, positionOffsetPixels);}@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);changeTab(position);}@Overridepublic void onPageScrollStateChanged(int state) {super.onPageScrollStateChanged(state);}});}private void changeTab(int position) {ivCurrent.setSelected(false);switch (position){case R.id.id_tab_weichat:viewPager.setCurrentItem(0);case 0:ivChat.setSelected(true);ivCurrent = ivChat;break;case R.id.id_tab_contact:viewPager.setCurrentItem(1);case 1:ivContact.setSelected(true);ivCurrent = ivContact;break;case R.id.id_tab_find:viewPager.setCurrentItem(2);case 2:ivFind.setSelected(true);ivCurrent = ivFind;break;case R.id.id_tab_profile:viewPager.setCurrentItem(3);case 3:ivProfile.setSelected(true);ivCurrent = ivProfile;break;}}@Overridepublic void onClick(View view) {changeTab(view.getId());}
}
4.完整代码如下
完整代码
Android studio实现类微信界面相关推荐
- Android Studio在类微信程序完成“蓝牙聊天功能”实现蓝牙通信
Android Studio在类微信程序完成"蓝牙聊天功能"实现蓝牙通信 项目运行截图 通信原理 蓝牙权限 strings.xml tab01.xml 菜单文件option_men ...
- Android studio制作简单微信界面
Android studio微信界面简单制作 移动技术开发的第一课 完成展示 (先看看样子) 大概就是这个样子 1.放入图标 把下好的图标复制粘贴放在/app/res/drawble 目录下即可 2. ...
- Android studio实现仿微信界面
一.静态界面实现(.xml) 功能需求 1.上方有标题(居中) 2.中间显示内容,内容随着下方控件而切换. 3.下方四个控件可切换. 实现页面展示: 共三大部分,顶部和底部一直不变,中间部分随着点击切 ...
- Android Studio制作简易微信界面
文章目录 制作要求 一.top,buttom页面制作 二.四个tab页面和activity_main页面制作 1.四个tab页面 2.activity_main页面 三 . 五个java文件 制作要求 ...
- Android Studio 类微信界面的制作
设计目标 使用Android Studio完成类微信的门户页面框架设计,APP包含4个tab页面.框架设计使用fragment,activity. 功能说明 界面的样式和微信打开后的界面相似 1点击底 ...
- Android Studio——类微信界面设计
设计目标:Android studio制作简易类微信界面. 功能:展示四个可切换界面,当点击下方按钮时,界面随之切换. 布局:顶部和底部layout.主页面(中间放一个framelayout显示界面内 ...
- Android Studio类微信界面设计
文章目录 一.类微信界面能实现的功能 二.xml代码 top.xml bottom.xml tab.xml activity_main.xml 三.Java代码 MainActivity.java w ...
- android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人 如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
- 【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )
文章目录 前言 一. 报错信息 二. 解决方案 前言 在之前的博客 [错误记录]Android Studio 的 Flutter 代码界面没有 Logcat 面板 中 , 处理了该问题 , 不过时去年 ...
最新文章
- CVPR 9999 Best Paper:一种加辣椒的番茄炒蛋
- 提升tomcat服务器性能的七条经验
- Linux 线程与进程,以及通信
- CCNP自学之路——eigrp--1
- 随笔-使用时间管理有感
- pl/sql中文显示为乱码解决
- android音乐播放器音乐加载,Android开源音乐播放器之在线音乐列表自动加载更多...
- Microsoft SQL Server 2005数据库安装
- B 站神曲 damedane:精髓在于换脸,五分钟就能学会
- 【es】Elasticsearch:inverted index,doc_values及source
- cdf日上免税店_cdf会员购吐槽大会!从上海日上开始!
- Digikitz Linked Vibes for Mac(嘻哈风格乐器音源插件)
- Nginx + PHP + mysql CGI的一个可能的安全漏洞
- list 排序 java_java 怎么将List里面数据排序?
- 《人件》 精华版 为软件企业指明成功之路 为开发人员伸张权益
- shell脚本实例-交叉证认
- Vue 3 技术揭秘
- 2018年天源迪亚杯博弈赛后的感受
- linux minicon usb配置,USB、Mini-USB、Micro-USB接口的引脚定义
- 设计html网页时需要遵循的语言规范,CSS设计网页时的一些常用规范