Android基础实战开发--小慕笔记UI设计（Fragment的使用）

目录

前言

一、需求

二、主要步骤

1.Fragment容器操作

2.封装删除工具类

三、关键代码

四、效果展示

---

前言

本项目为安卓基础实战开发，利用Fragment进行小慕笔记UI设计，学习之前需要对Fragment生命周期有所了解，并且熟悉安卓相关控件。推荐下载安装Android Studio软件进行程序开发。在开始进行Android编程开发之前需要对Java基础知识有一定的了解和掌握，此项目为练手项目，适合初学者，如有不足请指正。

---

一、需求

1）要求App底部菜单从左⾄右依次为“全部笔记”、“新建笔记”和“我的信息”，默认显示“全部笔记”界⾯（进入APP的第一个界面）。

2）当点击“新建笔记”时，标题和内容输⼊框提示输⼊相应内容，标题左侧为返回按钮，中间为标题“编辑笔记”，右侧为删除按钮。

A、当点击返回按钮时，返回到1）中效果。

B、当点击删除按钮，清空标题及内容输⼊框。

3）当点击“我的信息”，要求显示图⽚和“我的信息”标题，标题下⾯显示“⽤户信息”。

---

二、主要步骤

1.Fragment容器操作

1）为了简化操作，我们将MainActivity.java文件作为Fragment容器的逻辑处理文件，执行容器操作，先实例化全部笔记Fragment，再将全部笔记添加进容器里，便于一打开小慕笔记，主界面便是全部笔记界面。

fullInformation=new FullInformation();//实例化全部笔记fragment
        getSupportFragmentManager().beginTransaction().add(R.id.container,fullInformation).commitAllowingStateLoss();//将其添加进容器中

 2）增加回退栈，按返回键直接跳转到上一界面，而不直接退出程序

 getSupportFragmentManager().beginTransaction().replace(R.id.container,addContent).addToBackStack(null).commitAllowingStateLoss();

3） 找到全部笔记的布局界面full_information，fragment容器为container

FullInformation.Java
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //找到全部笔记的布局界面full_information，fragment容器为container
        View view=inflater.inflate(R.layout.full_information,container,false);
        return view;
    }

4） 使用inflate方法加载布局

AddContent.java
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.add_content,container,false);//使用inflate方法加载布局
        return view;
    }

注意：在Fragment布局里，利用回退栈，即在返回按键的监听事件上加上：popBackStack()，可返回到上一界面

imageView1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getFragmentManager().popBackStack();//在返回按键的监听事件上加上：popBackStack()，可返回上一界面
                }
            });

2.封装删除工具类

1）为了满足输入文字后，会出现删除按键，并且点击删除按键能一键清空输入的文字内容，我们封装了一个删除工具类。先获取到editText中的文字，包括标题和内容，并且根据editText中是否有文字，进行删除按钮可见或不可见的判断，当标题或内容有文字时，显示删除按钮。

 // 获取得editText中的文字，包括标题和内容
        String etInputString = et1.getText().toString();
        String etInputString1 = et2.getText().toString();
        // 根据editText中是否有文字，进行删除按钮可见或不可见的判断，当标题或内容有文字时，显示删除按钮
        if (TextUtils.isEmpty(etInputString)&&TextUtils.isEmpty(etInputString1)) {
            view.setVisibility(view.INVISIBLE);
        } else {
            view.setVisibility(View.VISIBLE);
        }

2）对标题栏的输入状态进行监听

et1.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void afterTextChanged(Editable s) {
                if (s.length() == 0) {
                    view.setVisibility(View.INVISIBLE);
                } else {
                    view.setVisibility(View.VISIBLE);
                }
            }
        });
        

3） 点击删除时，清空editText里的所有内容

view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et1.setText("");
                et1.requestFocusFromTouch();
                et2.setText("");
                et2.requestFocusFromTouch();
            }
        });

---

三、关键代码

activity_main.xml：

full_information.xml：

add_content.xml ：

MainActivity.java：

package com.example.xiaomunote;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private AddContent addContent;
    private FullInformation fullInformation;
    private PersonalInfomation personalInfomation;
    private ImageView fullImageView,addImageView, meImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        addImageView = findViewById(R.id.addImageView);
        meImageView=findViewById(R.id.meImageView);
        fullImageView=findViewById(R.id.fullImageView);
        addImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (addContent==null){
                    addContent=new AddContent();
                }
                //增加回退栈，按返回键直接跳转到上一界面，而不直接退出程序
                getSupportFragmentManager().beginTransaction().replace(R.id.container,addContent).addToBackStack(null).commitAllowingStateLoss();
            }
        });
        meImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (personalInfomation==null){
                    personalInfomation=new PersonalInfomation();
                }
                getSupportFragmentManager().beginTransaction().replace(R.id.container,personalInfomation).addToBackStack(null).commitAllowingStateLoss();
            }
        });
        fullImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (fullInformation==null){
                    fullInformation=new FullInformation();
                }
                getSupportFragmentManager().beginTransaction().replace(R.id.container,fullInformation).addToBackStack(null).commitAllowingStateLoss();
            }
        });
        fullInformation=new FullInformation();//实例化全部笔记fragment
        getSupportFragmentManager().beginTransaction().add(R.id.container,fullInformation).commitAllowingStateLoss();//将其添加进容器中
    }
}

AddContent.java：

package com.example.xiaomunote;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import com.example.xiaomunote.utils.EditTextUtils;

public class AddContent extends Fragment {
    private ImageView imageView1,imageView2;
    private EditText editText1,editText2;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.add_content,container,false);//使用inflate方法加载布局
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        imageView1=view.findViewById(R.id.iv_01);//绑定点击事件
        imageView2=view.findViewById(R.id.iv_02);
        editText1=view.findViewById(R.id.et_01);
        editText2=view.findViewById(R.id.et_02);
            EditTextUtils.clearButtonListener(editText1,editText2, imageView2);
            imageView1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getFragmentManager().popBackStack();//在返回按键的监听事件上加上：popBackStack()，可返回上一界面
                }
            });
        }
    }

EditTextUtils.java：

package com.example.xiaomunote.utils;

import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
public class EditTextUtils {
    //封装一个删除工具类
    public static void clearButtonListener(final EditText et1,final EditText et2, final View view) {
        // 获取得editText中的文字，包括标题和内容
        String etInputString = et1.getText().toString();
        String etInputString1 = et2.getText().toString();
        // 根据editText中是否有文字，进行删除按钮可见或不可见的判断，当标题或内容有文字时，显示删除按钮
        if (TextUtils.isEmpty(etInputString)&&TextUtils.isEmpty(etInputString1)) {
            view.setVisibility(view.INVISIBLE);
        } else {
            view.setVisibility(View.VISIBLE);
        }
        //点击删除时，清空editText里的所有内容
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et1.setText("");
                et1.requestFocusFromTouch();
                et2.setText("");
                et2.requestFocusFromTouch();
            }
        });
        //对et1标题栏的输入状态进行监听
        et1.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void afterTextChanged(Editable s) {
                if (s.length() == 0) {
                    view.setVisibility(View.INVISIBLE);
                } else {
                    view.setVisibility(View.VISIBLE);
                }
            }
        });
        //对et2内容栏的输入状态进行监听
        et2.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void afterTextChanged(Editable s) {
                if (s.length() == 0) {
                    view.setVisibility(View.INVISIBLE);
                } else {
                    view.setVisibility(View.VISIBLE);
                }
            }
        });
    }
}

---

四、效果展示

1、App启动界⾯如下，底部菜单从左⾄右依次为“全部笔记”、“新建笔记”和“我的信息”。顶部标题如下图（显示图⽚和“⼩慕笔记”标题），默认显示“全部笔记”界⾯。

2、 当点击“新建笔记”，效果如下图，标题和内容输⼊框提示输⼊相应内容，标题中左侧为返回按钮，中间为标题“编辑笔记”，右侧为删除按钮，当标题或内容有文字时，显示删除按钮，点击删除按钮，实现全部删除。

               

3、当点击“我的信息”显示效果如下图（显示图⽚和“我的信息”标题），标题下⾯显示“⽤户信息”，显示个人信息具体内容。