android开发——类微信界面设计

功能要求

开发一个类微信的主界面框架，UI布局为上中下布局，包含4个tab界面，当点击选择底部部件的时候进行页面切换

开发技术

layout xml、控件、监听、fragment

页面设计

微信的界面布局分为上中下三个部分。

（1）第一部分，主要是显示界面的标题。

（2）第二部分，主要是“微信”、“通讯录”、“发现”和“我的”四个板块的具体内容。

（3）第三部分，主要是“微信”、“通讯录”、“发现”和“我的”四个板块的切换控件。

设计流程

创建项目

资源文件导入

创建top.xml、bottom.xml、frangment1（2、3、4）.xml、main.xml文件

 

顶部标题栏（top.xml)

app的标题,即"微信",标题居中显示

    <?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="#129166"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center|center_horizontal"android:text="@string/app_name"android:textColor="#181E1E"android:textSize="20sp" /></LinearLayout>

中间内容界面(fragment1.xml,2,3,4)

共"微信""通讯录""发现""我"四个界面,分别显示不同内容
<?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=".Fragmentxx">
 
    <TextView
        android:id="@+id/content1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是消息界面"
        android:textSize="50sp" />
    
</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"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><LinearLayoutandroid:id="@+id/LinearLayout1"android:layout_width="73dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="62dp"app:srcCompat="@drawable/wx1" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:text="微信"android:textColor="#5B000000"android:textSize="25sp" />
</LinearLayout>

activity_main主布局文件

    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:supportsRtl="true"android:theme="@style/Theme.HomeworkApplication"tools:targetApi="31">
<activityandroid:name=".MainActivity"android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application></manifest>

java文件编写

SettingFragment.java

package com.example.myichat;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 SettingFragment#newInstance} factory method to* create an instance of this fragment.*/
public class SettingFragment 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 SettingFragment() {// 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 SettingFragment newInstance(String param1, String param2) {SettingFragment fragment = new SettingFragment();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.setting, container, false);}
}

MainActivity.java

package com.example.myichat;import androidx.appcompat.app.AppCompatActivity;import androidx.fragment.app.Fragment;import androidx.fragment.app.FragmentManager;import androidx.fragment.app.FragmentTransaction;import android.annotation.SuppressLint;import android.os.Bundle;import android.view.View;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private LinearLayout chatLayout;private LinearLayout friendsLayout;private LinearLayout commLayout;private LinearLayout settingLayout;private ImageButton chatImageButton;private ImageButton friendsImageButton;private ImageButton commImageButton;private ImageButton settingImageButton;private TextView chatText;private TextView friendsText;private TextView commText;private TextView settingText;private Fragment chatFragment = new ChatFragment();private Fragment friendsFragment = new FriendsFragment();private Fragment commFragment = new CommFragment();private Fragment settingFragment = new SettingFragment();private FragmentManager fragmentManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvent();initFragment();selectFragment(0);//默认首页是聊天界面}private void initFragment(){
//        fragmentManager = getFragmentManager();fragmentManager = getSupportFragmentManager();FragmentTransaction transaction = fragmentManager.beginTransaction();transaction.add(R.id.content,chatFragment);transaction.add(R.id.content,friendsFragment);transaction.add(R.id.content,commFragment);transaction.add(R.id.content,settingFragment);transaction.commit();}private void initView(){chatLayout = findViewById(R.id.chatLayout);friendsLayout = findViewById(R.id.friendsLayout);commLayout = findViewById(R.id.commLayout);settingLayout = findViewById(R.id.settingLayout);chatImageButton = findViewById(R.id.chatImageButton);friendsImageButton = findViewById(R.id.friendsImageButton);commImageButton = findViewById(R.id.commImageButton);settingImageButton = findViewById(R.id.settingImageButton);chatText = findViewById(R.id.chatText);friendsText = findViewById(R.id.friendsText);commText = findViewById(R.id.commText);settingText = findViewById(R.id.settingText);}private void hideFragment(FragmentTransaction transaction){transaction.hide(chatFragment);transaction.hide(friendsFragment);transaction.hide(commFragment);transaction.hide(settingFragment);}@SuppressLint("ResourceAsColor")private void selectFragment(int i){//i是一个选择器，用于选择显示哪个界面FragmentTransaction transaction = fragmentManager.beginTransaction();hideFragment(transaction);//首先隐藏所有页面switch (i){case 0:transaction.show(chatFragment);chatImageButton.setImageResource(R.drawable.chat_pick);chatText.setTextColor(this.getResources().getColor(R.color.pickText));break;case 1:transaction.show(friendsFragment);friendsImageButton.setImageResource(R.drawable.friends_pick);friendsText.setTextColor(this.getResources().getColor(R.color.pickText));break;case 2:transaction.show(commFragment);commImageButton.setImageResource(R.drawable.comm_pick);commText.setTextColor(this.getResources().getColor(R.color.pickText));break;case 3:transaction.show(settingFragment);settingImageButton.setImageResource(R.drawable.setting_pick);settingText.setTextColor(this.getResources().getColor(R.color.pickText));break;default:break;}transaction.commit();}@Overridepublic void onClick(View view) {resetBtn();switch (view.getId()){case R.id.chatLayout:selectFragment(0);break;case R.id.friendsLayout:selectFragment(1);break;case R.id.commLayout:selectFragment(2);break;case R.id.settingLayout:selectFragment(3);break;default:break;}}@SuppressLint("ResourceAsColor")private void resetBtn(){chatImageButton.setImageResource(R.drawable.chat);friendsImageButton.setImageResource(R.drawable.friends);commImageButton.setImageResource(R.drawable.comm);settingImageButton.setImageResource(R.drawable.setting);chatText.setTextColor(this.getResources().getColor(R.color.nopickText));friendsText.setTextColor(this.getResources().getColor(R.color.nopickText));commText.setTextColor(this.getResources().getColor(R.color.nopickText));settingText.setTextColor(this.getResources().getColor(R.color.nopickText));}//仅仅对bottom的四个linerlayout监听private void initEvent(){chatLayout.setOnClickListener(this);friendsLayout.setOnClickListener(this);commLayout.setOnClickListener(this);settingLayout.setOnClickListener(this);}
}

结果展示

总结

  此次对android学习是安卓开发的第一个项目，设计了一个类微信界面。通过实验我了解了UI页面的基本设计，理解了了相对布局、线性布局等一些布局方式。通过组件的设置属性以及ID绑定完成了点击事件的监听功能。总之学到了很多东西。另外，由于本人并不从事计算机行业，做得不好的地方还请见谅。

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

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

相关文章

类微信界面设计1

类微信界面设计1

1. 设计目标 实现一个类似微信的底部tab栏切换 2. 功能说明 一个类微信的app&#xff0c;现阶段完成功能为点击对应按钮能够切换到对应界面 3. 代码解析 1).头部 使用LinearLayout布局。 <?xml version"1.0" encoding"utf-8"?> <LinearLayo…
阅读更多...
马原强化考点

马原强化考点

马原核心考点 考点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)

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

Copyright @ 2022~2023