目录
前言
一、需求
二、主要步骤
1.Fragment容器操作
2.封装删除工具类
三、关键代码
四、效果展示
本项目为安卓基础实战开发,利用Fragment进行小慕笔记UI设计,学习之前需要对Fragment生命周期有所了解,并且熟悉安卓相关控件。推荐下载安装Android Studio软件进行程序开发。在开始进行Android编程开发之前需要对Java基础知识有一定的了解和掌握,此项目为练手项目,适合初学者,如有不足请指正。
1)要求App底部菜单从左⾄右依次为“全部笔记”、“新建笔记”和“我的信息”,默认显示“全部笔记”界⾯(进入APP的第一个界面)。
2)当点击“新建笔记”时,标题和内容输⼊框提示输⼊相应内容,标题左侧为返回按钮,中间为标题“编辑笔记”,右侧为删除按钮。
A、当点击返回按钮时,返回到1)中效果。
B、当点击删除按钮,清空标题及内容输⼊框。
3)当点击“我的信息”,要求显示图⽚和“我的信息”标题,标题下⾯显示“⽤户信息”。
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(),可返回上一界面
}
});
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、当点击“我的信息”显示效果如下图(显示图⽚和“我的信息”标题),标题下⾯显示“⽤户信息”,显示个人信息具体内容。