前言

一、需求

二、主要步骤

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();//实例化全部笔记fragmentgetSupportFragmentManager().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容器为containerView 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() {@Overridepublic 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() {@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void afterTextChanged(Editable s) {if (s.length() == 0) {view.setVisibility(View.INVISIBLE);} else {view.setVisibility(View.VISIBLE);}}});

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

view.setOnClickListener(new View.OnClickListener() {@Overridepublic 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"><RelativeLayoutandroid:id="@+id/bottomArea"android:background="#C6D9DC"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentBottom="true"><LinearLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="1dp"android:gravity="center_horizontal"android:orientation="horizontal"><!-- 全部笔记按钮 --><FrameLayoutandroid:id="@+id/fullLayout"android:layout_width="match_parent"android:layout_height="50dp"android:layout_weight="1"android:paddingTop="3dp"android:paddingBottom="2dp"><ImageViewandroid:id="@+id/fullImageView"android:layout_width="96px"android:layout_height="84px"android:layout_gravity="top|center"android:src="@drawable/full" /><TextViewandroid: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><!-- 新建笔记按钮 --><FrameLayoutandroid:id="@+id/addLayout"android:layout_width="match_parent"android:layout_height="50dp"android:layout_weight="1"android:paddingTop="3dp"android:paddingBottom="2dp"><ImageViewandroid:id="@+id/addImageView"android:layout_width="96px"android:layout_height="84px"android:layout_gravity="top|center"android:src="@drawable/add" /><TextViewandroid: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><!-- 我的信息 --><FrameLayoutandroid:id="@+id/meLayout"android:layout_width="match_parent"android:layout_height="50dp"android:layout_weight="1"android:paddingTop="3dp"android:paddingBottom="2dp"><ImageViewandroid:id="@+id/meImageView"android:layout_width="96px"android:layout_height="84px"android:layout_gravity="top|center"android:src="@drawable/me" /><TextViewandroid: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"><ImageViewandroid:id="@+id/imageView2"android:layout_width="47dp"android:layout_height="32dp"app:srcCompat="@drawable/student" /><TextViewandroid: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"><ImageViewandroid:id="@+id/iv_01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/back" /><TextViewandroid: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" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/iv_01"android:layout_marginTop="15dp"android:orientation="vertical"><EditTextandroid:id="@+id/et_01"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="10dp"android:maxLines="1"android:hint="请输入标题" /><EditTextandroid: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><ImageViewandroid: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;@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onClick(View v) {if (fullInformation==null){fullInformation=new FullInformation();}getSupportFragmentManager().beginTransaction().replace(R.id.container,fullInformation).addToBackStack(null).commitAllowingStateLoss();}});fullInformation=new FullInformation();//实例化全部笔记fragmentgetSupportFragmentManager().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@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.add_content,container,false);//使用inflate方法加载布局return view;}@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onClick(View v) {et1.setText("");et1.requestFocusFromTouch();et2.setText("");et2.requestFocusFromTouch();}});//对et1标题栏的输入状态进行监听et1.addTextChangedListener(new TextWatcher() {@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void afterTextChanged(Editable s) {if (s.length() == 0) {view.setVisibility(View.INVISIBLE);} else {view.setVisibility(View.VISIBLE);}}});//对et2内容栏的输入状态进行监听et2.addTextChangedListener(new TextWatcher() {@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void afterTextChanged(Editable s) {if (s.length() == 0) {view.setVisibility(View.INVISIBLE);} else {view.setVisibility(View.VISIBLE);}}});}
}

四、效果展示

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

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

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

创作不易，欢迎点赞、收藏、支持博主，您的支持是我进步最大的动力！！！

Android实战开发--小慕笔记UI设计（Fragment布局的使用）相关推荐

Android应用开发-小巫CSDN博客客户端UI篇
Android应用开发-小巫CSDN博客客户端UI篇上一篇是给童鞋们介绍整个项目的概况,从这篇博文开始,后续也会详细介绍整个客户端的开发,但不会贴很多代码,我会贴核心代码然后提供实现思路,想看里面更 ...
安卓开发笔记-UI设计的概念
本文是哔哩哔哩上安卓开发教程的笔记 UI的概念: 就是用户界面的意思 ① View 下面是官方的翻译 This class represents the basic building block ...
Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计前 ...
Android应用开发-小巫CSDN博客客户端之显示博文详细内容
Android应用开发-小巫CSDN博客客户端之显示博文详细内容上篇博文给大家介绍的是如何嵌入有米广告并且获取收益,本篇博客打算讲讲关于如何在一个ListView里显示博文的详细信息,这个可能是童鞋 ...
Android实战开发——引导页面（ViewPager）篇
Android实战开发之引导页面文章目录 Android实战开发之引导页面前言一.概述二.操作步骤 1.操作准备 2.初始化 3.适配器设置 3.圆点的滑动事件三.总结前言本篇文章主要介 ...
暑期Android游戏开发——小兔子跳铃铛（附源码）
暑期Android游戏开发--小兔子跳铃铛(附源码) 一．背景说明我在南京的一所高校学习软件工程.学院里每年会举行一次"创新杯"软件比赛,鼓励同学自主学习和创新.我和几个好兄弟 ...
「Android」开发小技巧合集
「Android」开发小技巧合集沉浸式标题栏修改主题样式颜色隐藏标题栏进行自主设置状态栏设置代码圆型图片设置APP图标修改APP名称创建不同分辨率图片文件夹更改项目名称 Button ...
Android应用开发-小巫CSDN博客客户端之获取评论列表
Android应用开发-小巫CSDN博客客户端之获取评论列表上一篇博客介绍了博文详细内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能,获取评论列表,这个功能的实现跟前面获取文章列 ...
Android应用开发-小巫CSDN博客客户端之嵌入有米广告
Android应用开发-小巫CSDN博客客户端之嵌入有米广告上一篇博客给大家介绍如何集成友盟社会化组件,本篇继续带来干货,教大家如何嵌入广告到应用中去.小巫自称专业对接30年,熟悉各大渠道SDK的接 ...

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

前言

一、需求

二、主要步骤

1、Fragment容器操作

2、封装删除工具类

三、关键代码

四、效果展示

Android实战开发--小慕笔记UI设计（Fragment布局的使用）相关推荐

最新文章

热门文章