本文详细介绍了如何使用Android Studio构建一个类似微信的移动应用，包括界面框架搭建、功能实现和源码解析。通过XML布局文件创建底部导航栏、顶部标题栏和中间内容区域，利用Fragment实现页面切换，以及Java代码实现点击事件监听和处理。这是一个初学者的学习记录，旨在巩固Android开发基础知识。
Android Studio移动开发 类微信界面
`
第一节 框架初步搭建
文章目录
一、 设计目的
创建第一个AS项目，仿照微信的外观和基本功能，搭建基本的应用框架，为后续功能的完善打下基础。外观上实现top栏吸顶，buttom栏吸底，中间为主题内容的效果。并完成点击底部按钮对不同页面的切换功能。
二、功能说明
2.通过点击页面底部不同的按键来切换不同的文本内容
三、代码解析
(1)界面基础框架布局（主要关注layout文件下的各个xml文件）
1. 底部buttom.xml
我们要达成的效果如下：
layout布局：
小按钮的实现我们没有采用buttom，而是用imgview和textview的组合实现
具体代码如下：
//buttom.xml 为避免重复 此处只展示一个小按钮的具体代码e.g第一个小按钮"微信"
-------------------------------------------------------------------------------
<!-- linearLayout weight=1 左右对齐-->
<!-- 要使linearlayout的子控件平分需将所有子控件的layout_width设为0dp-->
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="50dp"
app:srcCompat="@android:drawable/sym_action_chat" />
<!--text gravity="center"居中-->
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textSize="20sp" />
</LinearLayout>
2. 顶部top.xml
我们要达成的效果如下：
直接拖一个textview进去就可以
//top.xml
-----------------------------------------------------------------------------------
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Mywechat"
android:textColor="#ffff"
android:textSize="25sp" />
3. 中间部分fragment.xml
fragment就是之后我们点击按钮切换时呈现不同效果的页面，四个按钮对应4个fragment
，也就是4个fragment.xml文件
注：fragment.xml是在java文件夹下创建fragment时自动生成的，而不是手动创建的。
4个fragment.xml文件如下：
对于每一个fragment.xml文件里面也是只写了一个textview
具体代码如下：
//fragment.xml
-----------------------------------------------------------------------------------
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" //相对于控件本身居中
android:text="这是微信界面"
android:textSize="40dp" />
4. 组装环节！activity.xml
做到将top buttom fragment 三个部分显示到一个屏幕上的效果，我们的做法是将top.xml
和buttom.xml用include引入到activity中，然后再在中间加上一个framelayout用来放四个fragment
我们要达成的效果如下：
具体代码如下：
//activity.xml
//对于include的控件 设置android:layout_width="0dp"表示由控件本身的属性来限制
-----------------------------------------------------------------------------------
<include
android:id="@+id/include"
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" />
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/include2"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="@+id/include"></FrameLayout>
<include
android:id="@+id/include2"
layout="@layout/buttom"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
(2)功能实现（主要针对java目录下的Mainactivity.java文件）
要实现点击切换的功能，具体思路就是，初始时，将4个fragment层叠起来摞在一起，相当于图层的效果，我们先将这四个fragment进行隐藏，再对每一个小按钮添加监听，当监听到点击事件的发生时对对应的fragment进行显示从而实现点击切换。
详情如下：
private void hidden() 实现对fragment进行隐藏
public void onClick(View view) 实现监听和对应
private void showfragment(Fragment fragment) 显示对应的fragment
private void select(int i) 用switch实现选择
public void onClick(View view) 用重载实现监听
具体代码如下
//Mainactivity.java
-----------------------------------------------------------------------------------
package com.example.mywork;
//引入包
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.view.View;
import android.widget.LinearLayout;
//需要一个接口类型
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//声明fragment layout mannager
private Fragment fragment1, fragment2, fragment3, fragment4;
private FragmentManager manager; //用于管理fragment的一个工具
private LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
private FragmentTransaction transaction;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//调入linearlayout按钮控件
linearLayout1 = findViewById(R.id.linearLayout1);
linearLayout2 = findViewById(R.id.linearLayout2);
linearLayout3 = findViewById(R.id.linearLayout3);
linearLayout4 = findViewById(R.id.linearLayout4);
//调入fragment控件
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();
manager = getSupportFragmentManager();
initial();
hidden();
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
// 全屏监听耗电===>性能低 冗余
// linearLayout1.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View view) {
//
// }
// });
}
private void initial() {
transaction = manager.beginTransaction()
.add(R.id.framelayout, fragment1)
.add(R.id.framelayout, fragment2)
.add(R.id.framelayout, fragment3)
.add(R.id.framelayout, fragment4);
transaction.commit();
}
// onclick不能写在onclick中
// view父类基础类 父类的方法可以被所有子类调用
// 事务多次commit会导致事务提交混乱
//---------------------------------用onclick的重载实现监听--------------------------
@Override
public 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;
}
}
//----------------------------用switch实现选择---------------------------------
private void select(int i){
hidden();
switch(i){
case 1:showfragment(fragment1);
break;
case 2:showfragment(fragment2);
break;
case 3:showfragment(fragment3);
break;
case 4:showfragment(fragment4);
break;
}
}
//----------------------------显示对应的fragment---------------------------------
private void showfragment(Fragment fragment) {
transaction.show(fragment);
}
//--------------------------实现对fragment进行隐藏---------------------------------
private void hidden() {
transaction=manager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
transaction.commit();
}
}
值得一提的是接口的实现，我们需要重写监听的方法（这个我是真的不太会）
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
四、运行展示截图
AS 界面动态效果展示
五、源码仓库地址
六、补充资料
fragmentManager
java继承（implements与extends）总结
写在最后：作者处于初学阶段，本文只用于记述学习内容和浅显理解，如果读者发现任何问题，还请不吝赐教，多多评论指出或者私信 谢谢！
扫一扫
8518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
