类微信界面的制作-1 类微信app界面框架

使用Android Studio制作一个类微信APP界面的框架
系统是win10,sdk是Android 33

在这里插入图片描述
创建一个新项目,语言为java
在这里插入图片描述
将UI素材文件导入(复制直接在drawable中粘贴)到drawable中
全部选是

在layout的XML中创建一个新的Layout XML file
在layout的XML中创建一个新的Layout XML file

在这里插入图片描述
拖动一个Textview修改文本为WeChat

<?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="65dp"android:gravity="center"android:background="#000000"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="WeChat"android:textColor="#ffffff"android:textSize="20sp" />
</LinearLayout>

同样的操作,创建一个新的XML文件命名为bottom
在这里插入图片描述
在这里插入图片描述
先创建一个LinearLayout(vertical)
拖动textView和ImageBottom在LinearLayout中

在这里插入图片描述
选择你要导入的图片****就是之前导入到drawable中的

    <ImageButtonandroid:id="@+id/id_tab_weixin_img"android:layout_width="match_parent"android:layout_height="80dp"android:contentDescription="@string/app_name"android:background="#000000"app:srcCompat="@drawable/tab_weixin_pressing"android:scaleType="centerInside"/><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="对话"android:gravity="center"android:textColor="#ffffff"android:textSize="15dp" />
</LinearLayout>

修改文本背景和bottom背景

android:scaleType="centerInside"

如果图片格式不匹配,这行代码能将图片完整居中显示在这里插入图片描述
将bottom挪到文本上方

在这里插入图片描述
同时复制粘贴三次LinearLayout,在代码行修改文本,名字,和图片
在这里插入图片描述
最后显示为这样

在layout中创建XML文件activity_main

<?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"android:orientation="vertical"><include layout="@layout/top" /><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom"/>
</LinearLayout>

在这里插入图片描述
最后形成这样的效果

在这里插入图片描述
创建四个XML文件填充各个界面的空白

在这里插入图片描述
创建4个Fragment
在这里插入图片描述
在最后把tab02的位置的代码替换成tab02

最后MainActivity

package com.example.work;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;import com.example.work.ContactBlankFragment;
import com.example.work.MeBlankFragment;
import com.example.work.SettingBlankFragment;
import com.example.work.WeChatBlankFragment;public class MainActivity extends AppCompatActivity implements View.OnClickListener{private Fragment mTab01 = new WeChatBlankFragment();private Fragment mTab02 = new ContactBlankFragment();private Fragment mTab03 = new MeBlankFragment();private Fragment mTab04 = new SettingBlankFragment();private ImageButton mImgMessage;private ImageButton mImgFriend;private ImageButton mImgAddress;private ImageButton mImgSetting;private FragmentManager fm;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initFragment();initEvent();setSelect(0);}private void setSelect(int i) {FragmentTransaction transaction = fm.beginTransaction();hideFragment(transaction);switch (i) {case 0:transaction.show(mTab01);mImgMessage.setImageResource(R.drawable.tab_weixin_pressing);break;case 1:transaction.show(mTab02);mImgFriend.setImageResource(R.drawable.tab_adress_pressing);break;case 2:transaction.show(mTab03);mImgAddress.setImageResource(R.drawable.tab_me_pressing);break;case 3:transaction.show(mTab04);mImgSetting.setImageResource(R.drawable.tab_setting_pressing);break;default:break;}transaction.commit();}private void hideFragment(FragmentTransaction transaction) {transaction.hide(mTab01);transaction.hide(mTab02);transaction.hide(mTab03);transaction.hide(mTab04);}private void initEvent() {mImgMessage.setOnClickListener(this);mImgFriend.setOnClickListener(this);mImgAddress.setOnClickListener(this);mImgSetting.setOnClickListener(this);}private void initFragment() {fm = getSupportFragmentManager();FragmentTransaction transaction = fm.beginTransaction();transaction.add(R.id.id_content,mTab01);transaction.add(R.id.id_content,mTab02);transaction.add(R.id.id_content,mTab03);transaction.add(R.id.id_content,mTab04);transaction.commit();}private void initView() {mImgMessage = findViewById(R.id.id_tab_weixin_img);mImgFriend = findViewById(R.id.id_tab_frd_img);mImgAddress = findViewById(R.id.id_tab_contact_img);mImgSetting = findViewById(R.id.id_tab_setting_img);}public void onClick(View v){Log.d("onClick","1");resetImg();switch (v.getId()){case R.id.id_tab_weixin_img:Log.d("onClick", "2");setSelect(0);break;case R.id.id_tab_frd_img:setSelect(1);break;case R.id.id_tab_contact_img:setSelect(2);break;case R.id.id_tab_setting_img:setSelect(3);break;default:break;}}private void resetImg() {mImgMessage.setImageResource(R.drawable.tab_weixin_normal);mImgFriend.setImageResource(R.drawable.tab_adress_normal);mImgAddress.setImageResource(R.drawable.tab_me_normal);mImgSetting.setImageResource(R.drawable.tab_setting_normal);}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最后提交一下代码仓库的地址
https://gitee.com/makiro/work/tree/57be5f3592f957a26730e6d4889ed368e3d75198

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

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

相关文章

《Android》Chap.4 UI开发

常用控件的使用方法 TextView 理论 属性含义用法android:id唯一标识符\android:layout_width控件宽度match_parent&#xff1a;让当前控件的大小和父布局的一样&#xff1b; wrap_content&#xff1a;让当前控件的大小正好适配里面的内容&#xff1b;android:layout_height空…

类微信界面设计

类微信界面设计 v1.0 一、程序运行效果及界面二、实现代码1.xml文件界面设计2.class类文件控制3.主类 一、程序运行效果及界面 程序的界面包括上边框、下边框和中间的内容&#xff0c;上边框显示软件名“微信”&#xff0c;下边框内有四个部分&#xff0c;分别为“消息”、“好…

聊天界面的制作(一)——基本布局的实现

基本功能 1. 自定义标题栏。&#xff08;标题栏不做任何功能&#xff09; 2. 有左右发送按钮。&#xff08;这个只能自己和自己聊天哦&#xff0c;所以有左右发送按钮&#xff09; &#xff08;1&#xff09;点击左边按钮发送按钮&#xff0c;在ListView的左侧显示。   &…

AS中类微信界面设计

用Android studio编写类微信应用之基本界面 要编写一个类似微信那样的应用&#xff0c;第一步是写出一个类似那样的界面&#xff0c;之后的各种功能都是在完成界面之后实现的。完成之后界面大致是这样的。 XML文件的编写 要实现的功能是一个类似微信的界面&#xff0c;并且选…

移动开发一:类微信门户界面框架设计

设计目标&#xff1a; 本作业框架需要使用fragment&#xff0c;activity来实现一个类微信门户界面的设计。 功能说明&#xff1a; 这个框架需要设计出的要点有两点&#xff1a; 1. 顶部标识需要常驻 2. 底部按钮切换时可以变换样式或者颜色&#xff0c;同时主页面内容切换 代码…

安卓开发 微信ui界面设计 (Android Studio)

功能&#xff1a; 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面&#xff1a; 开发技术为&#xff1a; layout xml、控件、监听&#xff0c;fragment&#xff1b; 设计流程&#xff1a; 创建项目 改下项目名&#xff0c;编程语言为java UI界面 UI界面由多个…

移动开发技术一:微信门户界面设计

目录 一、设计目标二、功能说明三、代码解析1.顶部代码2.底部代码3.基本布局代码4.中部布局代码5.MainActivity.java 四、运行展示五、源码仓库地址Gitee 总结 一、设计目标 1&#xff09;完成类微信的门户页面框架设计&#xff0c;APP最少必须包含4个tab页面&#xff0c;框架设…

第004天:APP在平板上的UI布局设计

当今是移动设备发展非常迅速的时代&#xff0c;不仅手机已经成为了生活必需品&#xff0c;就连平板电脑也变 得越来越普及。平板电脑和手机最大的区别就在于屏幕的大小&#xff0c;一般手机屏幕的大小会在3英寸 到6英寸之间&#xff0c;而一般平板电脑屏幕的大小会在7英寸到10英…

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

功能要求 开发一个类微信的主界面框架&#xff0c;UI布局为上中下布局&#xff0c;包含4个tab界面&#xff0c;当点击选择底部部件的时候进行页面切换 开发技术 layout xml、控件、监听、fragment 页面设计 微信的界面布局分为上中下三个部分。 &#xff08;1&#xff09…

类微信界面设计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易错题 思维导图整理

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

GPT对SaaS领域有什么影响?

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