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

简介: Android实战开发--小慕笔记UI设计(Fragment布局的使用)

前言

本项目为安卓基础实战开发,利用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、当点击“我的信息”显示效果如下图(显示图片和“我的信息”标题),标题下面显示“用户信息”,显示个人信息具体内容。

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

相关文章
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
118 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
176 67
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
62 2
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
4月前
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式,包括线性布局(如Column和Row)、非线性布局(如Stack、Flex、Positioned)以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面,例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
118 1
|
4月前
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
247 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 9
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡