类微信界面设计1

 1. 设计目标

实现一个类似微信的底部tab栏切换

2. 功能说明

一个类微信的app，现阶段完成功能为点击对应按钮能够切换到对应界面

3. 代码解析

1).头部

使用LinearLayout布局。

<?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"><TextViewandroid:id="@+id/textView_top"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:background="#E8E8E8"android:gravity="center"android:paddingTop="44dp"android:paddingBottom="10dp"android:text="微信"android:textColor="@color/black"android:textSize="20sp" />
</LinearLayout>

2).底部

 外层使用LinearLayout垂直布局，内层使用LinearLayout水平布局，内嵌四个导行按钮，分别对应聊天，联系人，发现和个人中心界面。

<?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="wrap_content"><LinearLayoutandroid:id="@+id/LinearLayout0"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical"android:orientation="horizontal"android:paddingBottom="10dp"android:background="@drawable/underline"app:layout_constraintTop_toTopOf="parent"android:baselineAligned="false"><LinearLayoutandroid:id="@+id/LinearLayout1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:orientation="vertical"android:paddingTop="10dp"><ImageViewandroid:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="40dp"app:srcCompat="@drawable/ic___wx" /><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="12dp"android:layout_gravity="center"android:text="微信" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:orientation="vertical"android:paddingTop="10dp"><ImageViewandroid:id="@+id/imageView2"android:layout_width="wrap_content"android:layout_height="40dp"app:srcCompat="@drawable/ic___txl" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="12dp"android:layout_gravity="center"android:text="通讯录" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:orientation="vertical"android:paddingTop="10dp"><ImageViewandroid:id="@+id/imageView3"android:layout_width="wrap_content"android:layout_height="40dp"app:srcCompat="@drawable/ic___fx" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="12dp"android:layout_gravity="center"android:text="发现" /></LinearLayout><LinearLayoutandroid:id="@+id/LinearLayout4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:orientation="vertical"android:paddingTop="10dp"><ImageViewandroid:id="@+id/imageView4"android:layout_width="wrap_content"android:layout_height="40dp"app:srcCompat="@drawable/ic___me" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="12dp"android:layout_gravity="center"android:text="我" /></LinearLayout></LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

3).四个界面

创建四个Fragment类和对应的XML文件分别表示聊天，联系人，发现和个人中心界面。

以联系人界面为例：

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"><ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:contentDescription="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="200dp"android:textSize="50dp"android:text="TextView1" /><TextViewandroid:id="@+id/textView5"android:layout_width="match_parent"android:layout_height="200dp"android:textSize="50dp"android:text="TextView2" /><TextViewandroid:id="@+id/textView6"android:layout_width="match_parent"android:layout_height="200dp"android:textSize="50dp"android:text="TextView3" /><TextViewandroid:id="@+id/textView7"android:layout_width="match_parent"android:layout_height="200dp"android:textSize="50dp"android:text="TextView4" /></LinearLayout></ScrollView>
</LinearLayout>

 java文件：

package com.example.applicationtest;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import androidx.fragment.app.Fragment;public class Fragment2 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.tab02, container, false);}
}

4).MainActivity

使用FrameLayout布局填充activity_main.xml中间部分四个内容区fragment

xml文件：

<?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"><includeandroid:id="@+id/include2"layout="@layout/top"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><FrameLayoutandroid:id="@+id/frameLayout"android:layout_width="match_parent"android:layout_height="0dp"app:layout_constraintBottom_toTopOf="@+id/include"app:layout_constraintTop_toBottomOf="@+id/include2"app:layout_constraintVertical_bias="0.0"tools:layout_editor_absoluteX="0dp"></FrameLayout><includeandroid:id="@+id/include"layout="@layout/tab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:visibility="visible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

Java文件：

package com.example.applicationtest;import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private ImageView imageView1,imageView2,imageView3,imageView4;private TextView textView1,textView2,textView3,textView4;private Fragment fragment1, fragment2, fragment3, fragment4;private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;private FragmentManager manager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);StatusBar statusBar = new StatusBar(MainActivity.this);statusBar.setStatusBarColor(R.color.translucent);statusBar.setStatusBarColor(R.color.transparent);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {Window window = getWindow();window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);window.setNavigationBarColor(Color.TRANSPARENT);}setContentView(R.layout.activity_main);event_init();fragment_init();}private void fragment_init(){fragment1 = new Fragment1();fragment2 = new Fragment2();fragment3 = new Fragment3();fragment4 = new Fragment4();Log.d("ffff","init");manager = getSupportFragmentManager();FragmentTransaction transaction = manager.beginTransaction().add(R.id.frameLayout, fragment1).add(R.id.frameLayout,fragment2).add(R.id.frameLayout,fragment3).add(R.id.frameLayout,fragment4).hide(fragment2).hide(fragment3).hide(fragment4);transaction.commit();}private void event_init(){linearLayout1 = findViewById(R.id.LinearLayout1);linearLayout2 = findViewById(R.id.LinearLayout2);linearLayout3 = findViewById(R.id.LinearLayout3);linearLayout4 = findViewById(R.id.LinearLayout4);linearLayout1.setOnClickListener(this);linearLayout2.setOnClickListener(this);linearLayout3.setOnClickListener(this);linearLayout4.setOnClickListener(this);//四个svgimageView1=findViewById(R.id.imageView1);imageView2=findViewById(R.id.imageView2);imageView3=findViewById(R.id.imageView3);imageView4=findViewById(R.id.imageView4);//四个文字textView1=findViewById(R.id.textView1);textView2=findViewById(R.id.textView2);textView3=findViewById(R.id.textView3);textView4=findViewById(R.id.textView4);}@SuppressLint("NonConstantResourceId")@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.LinearLayout1:select(1);break;case R.id.LinearLayout2:select(2);break;case R.id.LinearLayout3:select(3);break;case R.id.LinearLayout4:select(4);break;default:break;}}private void hideall(FragmentTransaction transaction){transaction.hide(fragment1).hide(fragment2).hide(fragment3).hide(fragment4);Log.d("ffff","hide");}private void rebu(){imageView1.setImageResource(R.drawable.ic___wx);textView1.setTextColor(0xFF000000);imageView2.setImageResource(R.drawable.ic___txl);textView2.setTextColor(0xFF000000);imageView3.setImageResource(R.drawable.ic___fx);textView3.setTextColor(0xFF000000);imageView4.setImageResource(R.drawable.ic___me);textView4.setTextColor(0xFF000000);}private void select(int i) {TextView textView_top = findViewById(R.id.textView_top);FragmentTransaction transaction = manager.beginTransaction();hideall(transaction);switch (i) {case 1:transaction.show(fragment1);textView_top.setText("微信");rebu();imageView1.setImageResource(R.drawable.ic___wx_this);textView1.setTextColor(0xFF07C060);Log.d("show","case1");break;case 2:transaction.show(fragment2);textView_top.setText("通讯录");rebu();imageView2.setImageResource(R.drawable.ic___txl_this);textView2.setTextColor(0xFF07C060);Log.d("show","case2");break;case 3:transaction.show(fragment3);textView_top.setText("发现");rebu();imageView3.setImageResource(R.drawable.ic___fx_this);textView3.setTextColor(0xFF07C060);Log.d("show","case3");break;case 4:transaction.show(fragment4);textView_top.setText("我的");rebu();imageView4.setImageResource(R.drawable.ic___me_this);textView4.setTextColor(0xFF07C060);;break;default:break;}transaction.commit();}public static class StatusBar {private Activity activity;public StatusBar(Activity activity){this.activity = activity;}public void setStatusBarColor(int color){if (Build.VERSION.SDK_INT >= 21) {View view = activity.getWindow().getDecorView();view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);activity.getWindow().setStatusBarColor(activity.getResources().getColor(color));}}}}

4. 界面演示

 

4. 源码仓库地址

kkjoker/similarwechat1 (gitee.com)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/64249.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

马原强化考点

马原强化考点

马原核心考点 考点1 非重点 马克思主义的内涵和构成&#xff08;马克思主义是什么&#xff09; 内涵&#xff1a; 1.创立者 &#xff1a;马恩创立&#xff0c;后继者发展 2.内容 &#xff1a;自然&#xff0c;社会&#xff0c;人类思维&#xff08;唯物史观不包括自然&#xff…
阅读更多...
【自考】马原知识点梳理

【自考】马原知识点梳理

阅读更多...
复习总结：马克思主义基本原理概论（马原）

复习总结：马克思主义基本原理概论（马原）

阅读更多...
[哲学部分]马克思主义基本原理概论思维导图

[哲学部分]马克思主义基本原理概论思维导图

2020/3/3 更新 之前链接关了补一个 链接&#xff1a;https://pan.baidu.com/s/1tsmAkdRG7jE1eMz34Ea4qQ 提取码&#xff1a;7y2j 2019/10/23 更新 由于最近比较忙 没时间一一回复大家的评论和邮件&#xff0c;我把文件放到了百度云&#xff0c;大家自取 谢谢大家支持 链接&…
阅读更多...
马原，期末复习部分知识点，思维导图

马原，期末复习部分知识点，思维导图

原链接&#xff1a;https://gitmind.cn/app/doc/39a4c3a6e1a3d7892c79030d028cadbf 感谢观看&#xff01;
阅读更多...
马原复习思维导图-前三章

马原复习思维导图-前三章

一天一个奇迹系列&#xff0c;这个思维导图做的时候很爽&#xff0c;然而并没有什么用 ……马原这种东西看不懂就是看不懂&#xff0c;要应付考试还是要专心听课555 绪论部分 第一章 第二章 第三章
阅读更多...
《马克思主义基本原理》复习重点

《马克思主义基本原理》复习重点

什么是马克思主义&#xff1f; 1、马克思主义是马克思和恩格斯共同创立并为后继者所不断发展的科学理论体系。 2、马克思理论是关于科学、社会、人类思维发展一般规律的学说&#xff0c;是关于社会主义必将代替资本主义&#xff0c;最终实现共产主义的学说 3、马克思主义是关…
阅读更多...
《马克思主义基本原理》复习整理

《马克思主义基本原理》复习整理

马原是我第一门认真学习的政治类课程&#xff0c;当然要记录一下。听说马原期末很难&#xff0c;所以认真看了下书和提纲&#xff0c;学习马原之后&#xff0c;对事物的本质有了更深的理解&#xff0c;理论知识也没有想象中那么晦涩难懂&#xff0c;顺便整理出以下的资料&#…
阅读更多...
考研马原 知识点 做题技巧 同类比较 重要会议 1800易错题 思维导图整理

考研马原 知识点 做题技巧 同类比较 重要会议 1800易错题 思维导图整理

本文的思维导图将考研马原进行了整理并标记出重点内容&#xff0c;同时对于同类事件&#xff0c;按时间顺序的时间都进行了整理&#xff0c;而且对于1800中的易错题目等重点内容也有整理 思维导图源文件已经发布在我的资源当中&#xff0c;有需要的可以去 我的主页 了解更多学…
阅读更多...
GPT对SaaS领域有什么影响？

GPT对SaaS领域有什么影响？

GPT火了&#xff0c;Chat GPT真的火了。 突然之间&#xff0c;所有人都在讨论AI&#xff0c;最初的访客是程序员、工程师、AI从业者&#xff0c;从早高峰写字楼电梯里讨论声&#xff0c;到村里大爷们的饭后谈资&#xff0c;路过的狗子都要和它讨论两句GPT的程度。 革命的前夜…
阅读更多...
英语演讲稿01

英语演讲稿01

阅读更多...
计算机英语ppt演讲稿,英语的ppt演讲稿

计算机英语ppt演讲稿,英语的ppt演讲稿

英语的ppt演讲稿 to make a better city, planners aimed at creating a city in which the insalubrious environment and social structure would be defeated by a reordering of physical and social arrangements, so that all the citizens could attain the benefits of…
阅读更多...
网络安全复习总结

网络安全复习总结

目录 Ch1 网络安全基础1.1 网络安全的总的目标1.2 防范技术(主流网络安全技术)1.3 网络安全技术支撑1.4 专业网络安全技术1.5 信息安全保障体系组成(PDRR)1.6 网络体系结构的深入理解、各层加密的作用1.7 帧、IP报文、TCP报文、UDP报文格式TCP首部三次握手半连接队列OSI七层网络…
阅读更多...
软件安全期末总结

软件安全期末总结

写在前面 所用教材&#xff1a;彭国军等人编著的第一版 博客地址&#xff1a;https://blog.csdn.net/zss192 说明&#xff1a;博客为根据老师所画重点有针对性的总结&#xff0c;供个人复习使用&#xff0c;仅供参考 第一章 软件安全概述 1.软件安全包括三个方面&#xff…
阅读更多...
基于安全运营中心的工作总结

基于安全运营中心的工作总结

0x0 背景 日光之下&#xff0c;并无新事。又是一年新旧交替&#xff0c;去年年底的时候Freebuf的小编在关于安全工作总结这块还做了一个专题讨论&#xff0c;关于安全工作的总结复盘与规划估计也是许许多多安全从业者比较为难回答的问题了&#xff0c;最近大家也比较热门的讨论…
阅读更多...
业务安全漏洞总结

业务安全漏洞总结

目录 前言 一、登录认证模块 暴力破解 登录绕过 会话固定漏洞 Session会话注销 Cookie仿冒 二、越权 三、数量金额修改 四、前端js限制绕过 五、请求重放 六、短信/邮箱验证码漏洞 短信重放 验证码校验绕过 验证码重用/手机号修改 验证码回显 短信/邮箱验证码…
阅读更多...
【湃哒星说安全】攻防演练中数据库信息收集方法记录

【湃哒星说安全】攻防演练中数据库信息收集方法记录

0x00 背景 在攻防演练或红队评估项目中&#xff0c;项目成果往往依赖红队队员综合渗透技能和优良的自动化工具。信息收集贯穿整个项目生命周期&#xff0c;如果攻方通过获取互联网侧应用服务器权限&#xff0c;并以此为跳板突破目标单位互联网侧防线&#xff0c;进而对应用服务…
阅读更多...
日常安全运营工作的一些思考

日常安全运营工作的一些思考

0x0 安全运营的背景 安全运营是以企业安全能力成熟度为基础&#xff0c;运用适当的安全技术和管理手段整合人、技术、流程&#xff0c;持续降低企业安全风险的综合能力。在最近几年安全运营这个岗位出现之前&#xff0c;大部分的企事业单位都是由IT运维部门的少数几个工程师承担…
阅读更多...
账号安全总结-业务安全测试实操(27)

账号安全总结-业务安全测试实操(27)

电子邮件账号泄露事件 电子邮箱业务基于计算机和通信网的信息传递业务，利用电信号传递和存储信息，为用户传送电子信函、文件数字传真、图像和数字化语音等各类型的信息。电子邮件最大的特点是，人们可以在任何地方、任何时间收、发信件，解决了时空的限制，大大提高了工作效…
阅读更多...
安全回顾总结

安全回顾总结

目录 一、xss反射型漏洞复现二、dns过程解析过程dns查找方法域名解析记录 三、状态码四、https五、扩展1、弹窗函数2、iframe3、from表单 一、xss反射型漏洞复现 观察源码&#xff0c;可以看出源码中通过get传参到变量xss&#xff0c;并将一些特殊符号过滤了&#xff0c;则后续…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023