Android开发日志打卡APP（二）

文章目录

Android开发日志打卡APP（二）
- 前言
- 开发过程
- - 一、背景和标题
  - 二、日志图标
  - 三、日志弹框

前言

在之前的文章中，准备工作已经完成，现在我们将开始真正的制作。这里将展示 Today页面 的制作过程。

开发过程

一、背景和标题

在之前章节中已经介绍了文件目录的大致状况。Today页面的布局将在fragment_home.xml文件中进行编写。
这里我们采用RelativeLayout的布局方式

首先，为Today页面添加适合的顶部标签栏：

因为之后在其他页面中也将用到，所以这里我们采用自定义组件的方法，在fragment_home.xml中进行了调用：

    <includeandroid:id="@+id/ic_main"layout="@layout/custom_control_home_title"/>

查看custom_control_home_title.xml文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="60dp"android:background="@color/pink_02"><TextViewandroid:id="@+id/home_title_main"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Today"android:textSize="26dp"android:textColor="@color/white"android:layout_centerHorizontal="true"android:layout_marginTop="10dp"/>
</RelativeLayout>

这样，在Today页面就可以看到顶部已经存在该标题栏了。

接着，我们为Today页面增加一个好看的背景，为了方便，这边直接使用了高清的图片作为了背景：

    //背景<ImageViewandroid:layout_below="@+id/ic_main"android:layout_marginLeft="-25dp"android:layout_width="500dp"android:layout_height="match_parent"android:scaleType="fitXY"android:src="@drawable/back_icon"/>

背景图片我已经上传到图床，供大家参考：
背景图连接

此时页面如下：

二、日志图标

接着，我们为Today页面添加上日志图标。
这里我们采用ImageButton和TextView两个组件来实现一个日志图标的制作：

//听音乐<ImageButtonandroid:id="@+id/btn_listen_music"style="?android:attr/borderlessButtonStyle"android:layout_width="90dp"android:layout_height="86dp"android:layout_alignParentStart="true"android:layout_alignParentTop="true"android:layout_marginStart="27dp"android:layout_marginTop="80dp"android:scaleType="fitXY"android:src="@mipmap/music6" /><TextViewandroid:id="@+id/text_listen_music"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/btn_listen_music"android:layout_alignParentStart="true"android:layout_centerVertical="true"android:layout_marginStart="48dp"android:text="听音乐"android:textColor="#000000"android:textSize="16sp" />

这里为大家解释一些一些代码：

1.  style="?android:attr/borderlessButtonStyle"       用于消除按钮的默认背景色
2.  android:scaleType="fitXY"        用于调整图片的比例

其中引入的听音乐图标如图所示：
其余的代码是为了保持图标和文字在页面的位置。
在此基础上，我们又增加了早睡、背单词、做运动、早起、思考五个类型，这里就不一一介绍了，到这里，我们Today页面的基本页面已经完成了：

三、日志弹框

接着，我们为日志图标制作弹出框。
这里我们创建一个文件：dialog_tips_custom_style.xml
先上效果图：

这里，我们将在一个大的RelativeLayout布局中，嵌套一个LinearLayout布局：
首先是弹框的标题：

        <TextViewandroid:id="@+id/dialog_custom_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:padding="10dp"android:text="提示"android:textColor="#000"android:textSize="14dp"/>

这里的文字暂时设为“提示”，文字水平居中显示。
接着引入分隔实线：

        <Viewandroid:layout_marginBottom="6dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_width="match_parent"android:layout_height="1dp"android:background="#ECEAEA"android:layout_above="@+id/ll_btn" />

这里将实线置于提示文字下放。
然后，引入日志图标：

        <ImageViewandroid:id="@+id/dialog_custom_image"style="?android:attr/borderlessButtonStyle"android:layout_width="match_parent"android:layout_height="66dp"android:layout_gravity="center"android:src="@mipmap/music4"/>

接着，我们引入可输入的文本框：

        //文本框，最长可输入200字<EditTextandroid:id="@+id/dialog_custom_edittext"android:layout_width="match_parent"android:layout_height="180dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:background="@drawable/dialog_edittext_shape"android:hint="写点什么吧..."android:gravity="top|left"android:padding="10dp"android:inputType="textMultiLine"android:textSize="13sp"android:maxLines="8" />

其中：
maxLines——设置文本框最多输入8行
hint——设置提示文字
textMultiLine——设置多行输入
引入的样式dialog_edittext_shape如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="16dp"/><stroke android:width="2dp" android:color="#F2F2F2"/><solid android:color="#ffffff"/><padding android:top="2dp" android:bottom="2dp" android:left="2dp"/>
</shape>

最后，为弹框设置点击按钮：

        <RelativeLayoutandroid:id="@+id/ll_btn"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:orientation="vertical"><Buttonandroid:id="@+id/dialog_button_save"android:layout_width="80dp"android:layout_height="33dp"android:layout_marginTop="20dp"android:layout_marginBottom="30dp"android:layout_centerHorizontal="true"android:background="@drawable/dialog_button_shape"android:text="保存"android:textSize="10sp"android:textColor="#ffffff"/></RelativeLayout>

到此位置，弹框的样式完成了！
下面我们新建一个CustomTipDialog.kt文件：
让它继承Dialog类：

class CustomTipDialog(context: Context) : Dialog(context, R.style.DialogTheme){}

导入弹框样式：

    private val mTvTitle:TextViewinit {val view=LayoutInflater.from(context).inflate(R.layout.dialog_tips_custom_style,null)mTvTitle=view.findViewById(R.id.dialog_custom_title)setContentView(view)}fun setTitle(title:String){mTvTitle.text=title}

在HomeFragment.kt文件中绑定点击事件：

    binding = FragmentHomeBinding.inflate(inflater, container, false)val dialog_fragment: View = inflater!!.inflate(R.layout.dialog_tips_custom_style,container,false)//听音乐按钮binding.btnListenMusic.setOnClickListener{val customTipDialog=CustomTipDialog(activity as Context)customTipDialog.setTitle("打卡日志")customTipDialog.show()}

到此为止，首页的样式的基本制作过程已经介绍完毕，关于如何将弹框内容读取和存储，将在之后的章节中介绍。