前言
本项目为安卓基础实战开发，利用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：
<RelativeLayout 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" android:id="@+id/container" tools:context=".MainActivity"> <RelativeLayout android:id="@+id/bottomArea" android:background="#C6D9DC" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" > <LinearLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="1dp" android:gravity="center_horizontal" android:orientation="horizontal"> <!-- 全部笔记按钮 --> <FrameLayout android:id="@+id/fullLayout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="1" android:paddingTop="3dp" android:paddingBottom="2dp"> <ImageView android:id="@+id/fullImageView" android:layout_width="96px" android:layout_height="84px" android:layout_gravity="top|center" android:src="@drawable/full" /> <TextView android:id="@+id/fullTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:text="全部笔记" android:textColor="#333030" android:textSize="13sp" /> </FrameLayout> <!-- 新建笔记按钮 --> <FrameLayout android:id="@+id/addLayout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="1" android:paddingTop="3dp" android:paddingBottom="2dp"> <ImageView android:id="@+id/addImageView" android:layout_width="96px" android:layout_height="84px" android:layout_gravity="top|center" android:src="@drawable/add" /> <TextView android:id="@+id/addTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:text="新建笔记" android:textColor="#333030" android:textSize="13sp" /> </FrameLayout> <!-- 我的信息 --> <FrameLayout android:id="@+id/meLayout" android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="1" android:paddingTop="3dp" android:paddingBottom="2dp"> <ImageView android:id="@+id/meImageView" android:layout_width="96px" android:layout_height="84px" android:layout_gravity="top|center" android:src="@drawable/me" /> <TextView android:id="@+id/meTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:text="我的信息" android:textColor="#333030" android:textSize="13sp" /> </FrameLayout> </LinearLayout> </RelativeLayout> </RelativeLayout>
full_information.xml：
<?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" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottomArea" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_marginLeft="0dp" android:layout_marginTop="-2dp" android:layout_marginRight="0dp" android:layout_marginBottom="2dp" android:background="#FFFFFF" android:orientation="horizontal"> <ImageView android:id="@+id/imageView2" android:layout_width="47dp" android:layout_height="32dp" app:srcCompat="@drawable/student" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="38dp" android:layout_marginTop="6dp" android:text="小慕笔记" /> </LinearLayout>
add_content.xml ：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/back" /> <TextView android:id="@+id/tv_01" android:layout_width="wrap_content" android:layout_height="28dp" android:layout_toRightOf="@+id/iv_01" android:gravity="bottom" android:text="编辑笔记" android:textSize="18sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/iv_01" android:layout_marginTop="15dp" android:orientation="vertical"> <EditText android:id="@+id/et_01" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="10dp" android:maxLines="1" android:hint="请输入标题" /> <EditText android:id="@+id/et_02" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="top" android:background="@null" android:hint="请输入内容" android:paddingLeft="10dp" /> </LinearLayout> <ImageView android:id="@+id/iv_02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:background="@drawable/delete" /> </RelativeLayout>
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、当点击“我的信息”显示效果如下图（显示图片和“我的信息”标题），标题下面显示“用户信息”，显示个人信息具体内容。
创作不易， 欢迎点赞、收藏、支持博主，您的支持是我进步最大的动力！！！
