目录
一. 总体布局
类微信界面总体实现布局：
1.顶部的top区域 2.底部的bottom区域 3.分页的fragment区域
设计思路：将总体布局分为三个部分，分别是顶部的"微信"，底部的"bottom"，中通过间的四个"fragment"。通过设计Java代码，实现点击底部切换页面的效果。
二. 界面设计
1. top区域
top.xml文件：
a. 引入TextView组件，编辑需要显示的文字；
b. 设置TextView组件的约束条件，以及组件属性
c. 设置TextView组件中文字的各个属性，如：size，background，gravity等；
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8F9393" //背景颜色>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" //文字居中
android:text="微信"
android:textColor="@color/black" //字体颜色
android:textSize="35sp" //文字大小
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>实现效果：
2.bottom区域
bottom.xml文件：总体上采用一个大的LinearLayou(horizontal)中嵌入四个LinearLayout(vertical)
a. 引入一个水平LinearLayout
b. 在这个LinearLayout中再引入四个垂直的LinearLayout
c. 在四个LinearLayout中分别放入所需要的文字或图片，并调节属性
其中一个LinearLayout代码如下：
<LinearLayout
android:id="@+id/Linear1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#8AB1FF"
android:orientation="vertical">
<ImageView
android:id="@+id/Weixin_image"
android:layout_width="match_parent"
android:layout_height="75dp"
app:srcCompat="@drawable/img" />
<TextView
android:id="@+id/Weixin_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="微信"
android:textColor="#FF650A"
android:textSize="25sp" />
</LinearLayout>实现效果：
3.fragment区域
设计四个fragment区域，分别作为四个分区的显示内容。
//在编写java文件创建fragment时会自动生成与之相对应的xml文件。
tag1代码：
<?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=".Fragment1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="微信界面"
android:textSize="45sp"
android:layout_gravity="center"
android:gravity="center" />
</FrameLayout>4.整合
向最终的main.xml放入设计好的各个部分，完成界面设计：
a. 使用include导入top.xml
b. 使用include导入bottom.xml
c. 导入FrameLayout组件以显示Fragment内容
<?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">
<include
android:id="@+id/include3"
layout="@layout/bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="@+id/FrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/include3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include2">
</FrameLayout>
<include
android: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" />
</androidx.constraintlayout.widget.ConstraintLayout>实现效果：
三. Java程序设计
1. 新建变量并进行赋值，使其与设计好的组件相对应；
2. 新建四个fragment文件（自动生成对应的xml文件），创建FragmentManager管理各fragment，并向frameLayout中加入建好的fragment内容；
3. 对四个LinearLayout进行监听；
4. 设计onclick()函数对不同位置的监听做出不同的反应；
//使用switch...case结构对点击进行处理
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.Linear1:select(1);
break;
case R.id.Linear2:select(2);
break;
case R.id.Linear3:select(3);
break;
case R.id.Linear4:select(4);
break;
}
}5. 设计select()函数和showfragment()函数显示对应的内容；
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;
}
}
private void showfragment(Fragment fragment) {
transaction.show(fragment);
}6. 设计hidden()函数用于隐藏不需要显示的内容；
private void hidden() {
transaction=manager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
transaction.commit();
}总体逻辑：首先通过hidden函数对所有fragment内容进行隐藏（在程序开始时调用showfragment函数显示某一个fragment作为默认显示），然后对四个LinearLayout进行监听，通过判断用户点击哪一个LinearLayout返回id，并使用switch...case结构来显示相对应的内容。
完整代码：
package com.example.ikwechat;
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{
private Fragment fragment1,fragment2,fragment3,fragment4;
private FragmentManager manager;
private FragmentTransaction transaction;
private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1=findViewById(R.id.Linear1);
linearLayout2=findViewById(R.id.Linear2);
linearLayout3=findViewById(R.id.Linear3);
linearLayout4=findViewById(R.id.Linear4);
fragment1=new Fragment1();
fragment2=new Fragment2();
fragment3=new Fragment3();
fragment4=new Fragment4();
manager=getSupportFragmentManager();
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();
hidden();
showfragment(fragment1);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.Linear1:select(1);
break;
case R.id.Linear2:select(2);
break;
case R.id.Linear3:select(3);
break;
case R.id.Linear4:select(4);
break;
}
}
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;
}
}
private void showfragment(Fragment fragment) {
transaction.show(fragment);
}
private void hidden() {
transaction=manager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
transaction.commit();
}
}四. 结果演示
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
