1.引言

2.实现

1.写出顶部和底部的layout

2.主页面

3.写四个fragment用于显示不同的内容

4.写MainActivity中的代码

3.总结

1.引言

这是我第一次接触安卓的开发，因为之前学过c#和java，感觉使用AS开发就像使用java在写winform，同样是放置控件，设置控件属性，同样的获取控件对象，监听事件。当然这样说太肤浅了一些，毕竟也是初学，只是发表初学者的一些小观点。下面是实现过程。

2.实现

1.写出顶部和底部的layout

顶部和底部分别为bottom.xml和top.xml，样式设置如下，注意bottom不需要放在底部，因为后续放在main.xml中的时候，FrameLayout权重设置为1，会将头顶部撑开。

top.xml没什么难度，自己尝试一下就可以写出来

bottom.xml需要熟练使用LinearLayout布局，同时包括了imageView使用，代码如下：

<?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/bottm_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#D6D6D6"><LinearLayoutandroid:id="@+id/tap01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:layout_weight="1"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/message02" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="微信" /></LinearLayout><LinearLayoutandroid:id="@+id/tap02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/friends" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="朋友" /></LinearLayout><LinearLayoutandroid:id="@+id/tap03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="match_parent"android:layout_height="match_parent"app:srcCompat="@drawable/founding" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="发现" /></LinearLayout><LinearLayoutandroid:id="@+id/tap04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@drawable/mine" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="我的" /></LinearLayout>
</LinearLayout>

2.主页面

主页面main.xml就是将写好的top和bottom引用进来，中间放一个FrameLayout显示内容，如下

<include>在代码中写出，格式如下：

<includelayout="@layout/top"android:layout_width="match_parent"android:layout_height="wrap_content"></include>

3.写四个fragment用于显示不同的内容

由于微信主页面包括四个大模块，“消息”，“朋友”，“发现”和“我的”，所以需要四个fragment来显示这些内容，格式基本一致，拿消息页面举例，格式如下

接下来只要在MainActivty中编写代码将这四个页面添加进FrameLayout，并通过监听按钮来点击切换不同页面就可以了。

4.写MainActivity中的代码

通过代码来将各个组件联系在一起，并实现切换效果，代码如下：（附注释）

package com.example.myapp;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
/*implements View.OnClickListener 实现点击监听的接口，@override注解*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener {/*创建四个Fragment对象*/private Fragment weixin_Fragment;private Fragment context_Fragment;private Fragment friend_Fragment;private Fragment setting_Fragment;/*创建一个FragmentManager和FragmentTransaction*/private FragmentManager fm;private FragmentTransaction transaction;/*创建四个LinearLayout和四个ImageView*/private LinearLayout tab01,tab02,tab03,tab04;private ImageView img01,img02,img03,img04;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);/*将四个Fragment对象创建为对应的Fragment*/weixin_Fragment = new Weixin_Fragment();context_Fragment = new Context_Fragment();friend_Fragment = new FriendFragment();setting_Fragment = new Setting_Fragment();/*通过findViewById找到四个按钮和四个图标*/tab01 = findViewById(R.id.tap01);tab02 = findViewById(R.id.tap02);tab03 = findViewById(R.id.tap03);tab04 = findViewById(R.id.tap04);img01 = findViewById(R.id.imageView1);img02 = findViewById(R.id.imageView2);img03 = findViewById(R.id.imageView3);img04 = findViewById(R.id.imageView4);fm = getSupportFragmentManager();/*页面初始函数*/initialFragment();/*为四个按钮绑定点击监听*/tab01.setOnClickListener(this);tab02.setOnClickListener(this);tab03.setOnClickListener(this);tab04.setOnClickListener(this);}private void initialFragment() {FragmentTransaction transaction = fm.beginTransaction();transaction.add(R.id.id_content,weixin_Fragment);transaction.add(R.id.id_content,friend_Fragment);transaction.add(R.id.id_content,context_Fragment);transaction.add(R.id.id_content,setting_Fragment);Hide(transaction);transaction.show(weixin_Fragment);transaction.commit();}/*实现点击监听接口，一旦点击按钮，便会触发，通过分支结构来判断显示对应的内容*/@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.tap01: show(1);break;case R.id.tap02: show(2);break;case R.id.tap03: show(3);break;case R.id.tap04: show(4);break;default:break;}}/*显示内容*/private void show(int i) {FragmentTransaction transaction=fm.beginTransaction();Hide(transaction);switch (i){case 1:transaction.show(weixin_Fragment);/*先将图标置为未点击状态*/ResetImage();/*设置图标图片*/img01.setImageResource(R.drawable.message02);break;case 2:transaction.show(friend_Fragment);ResetImage();img02.setImageResource(R.drawable.friends02);break;case 3:transaction.show(context_Fragment);ResetImage();img03.setImageResource(R.drawable.founding02);break;case 4:transaction.show(setting_Fragment);ResetImage();img04.setImageResource(R.drawable.mine02);break;default:break;}transaction.commit();}/*隐藏Fragment*/private void Hide(FragmentTransaction transaction) {transaction.hide(weixin_Fragment);transaction.hide(friend_Fragment);transaction.hide(context_Fragment);transaction.hide(setting_Fragment);}/*将图标设置为未点击*/private void ResetImage(){img01.setImageResource(R.drawable.message);img02.setImageResource(R.drawable.friends);img03.setImageResource(R.drawable.founding);img04.setImageResource(R.drawable.mine);}
}

效果如下：

3.总结

虽然这个项目看上去很简单，但是对于初学者，在实现的过程中还是有不少问题。因为对开发流程的不熟练，对属性的不了解，以及粗心大意，都会造成一些小问题，而这些小问题积累起来就变成了最大的绊脚石，比如由于将android:layout_weight写成了tools:layout_weight，造成按钮分布不均的情况，排查这些小问题大大阻碍了开发进度，所以写代码在于精而不在于快，这一点我深有体会。

代码仓库：杨少杰/MyAPP

安卓类微信界面实现相关推荐

安卓类微信界面开发(一)
目录一.编写微信头部. 二.编写微信底部. 三.编写四个内容区. 四.编写MainActivity和activity_main.xml文件. 项目结构: 一.编写微信头部. 创建layout_hea ...
安卓类微信开发(二)
目录一.主要内容二.核心代码三.效果展示在UI的基础上: 安卓类微信界面开发(一)_qingsongxyz的博客-CSDN博客一.主要内容对聊天主界面chatFragement进行完善, ...
安卓类微信开发(三)
目录一.主要内容二.核心代码三.效果展示在上次的基础上: 安卓类微信开发(二)_qingsongxyz的博客-CSDN博客一.主要内容完成好友聊天界面的开发和activity之间的数据传 ...
Android studio实现类微信界面
1.需要实现的功能: 页面具有标题微信页面具有中间显示框页面具有底部选择框,并且具有选择事件页面底部选择框在进行改变的时候,我们需要中间显示框的页面同步改变页面的布局清晰效果展示如下 1.按 ...
Android Studio——类微信界面设计
设计目标:Android studio制作简易类微信界面. 功能:展示四个可切换界面,当点击下方按钮时,界面随之切换. 布局:顶部和底部layout.主页面(中间放一个framelayout显示界面内 ...
安卓仿微信界面，导航，右上角菜单栏
下面是安卓开发仿微信界面的代码. 分为3步,第一步是界面的编写,第二步是导航界面,第三步是右上角菜单栏. 开始第一步前先预览一下效果. 第一步,界面. 界面的思路是利用ViewPager+Fragme ...
Android Studio 类微信界面的制作
设计目标使用Android Studio完成类微信的门户页面框架设计,APP包含4个tab页面.框架设计使用fragment,activity. 功能说明界面的样式和微信打开后的界面相似 1点击底 ...
类微信界面框架的搭建
目录 1.目的 2.过程一.界面框架设计思路 Ⅰ:顶部标题区域top.xml Ⅰ:底部功能选择区域botten.xml Ⅲ:中间显示区域 ①:创建不同的Fragment.java及layout ②: ...
类微信界面的制作-1 类微信app界面框架
使用Android Studio制作一个类微信APP界面的框架系统是win10,sdk是Android 33 创建一个新项目,语言为java 将UI素材文件导入(复制直接在drawable中粘贴)到 ...

安卓类微信界面实现

1.引言

2.实现

1.写出顶部和底部的layout

2.主页面

3.写四个fragment用于显示不同的内容

4.写MainActivity中的代码

3.总结

安卓类微信界面实现相关推荐

最新文章

热门文章

安卓 类微信界面实现

1.引言

2.实现

1.写出顶部和底部的layout

2.主页面

3.写四个fragment用于显示不同的内容

4.写MainActivity中的代码

3.总结

安卓 类微信界面实现相关推荐

最新文章

热门文章

安卓类微信界面实现

安卓类微信界面实现相关推荐