Android开发日志打卡APP（二）
文章目录
前言
在之前的文章中，准备工作已经完成，现在我们将开始真正的制作。这里将展示 Today页面 的制作过程。
开发过程
一、背景和标题
在之前章节中已经介绍了文件目录的大致状况。Today页面的布局将在fragment_home.xml文件中进行编写。
这里我们采用RelativeLayout的布局方式
首先，为Today页面添加适合的顶部标签栏：
因为之后在其他页面中也将用到，所以这里我们采用自定义组件的方法，在fragment_home.xml中进行了调用：
<include android: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"> <TextView android: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页面增加一个好看的背景，为了方便，这边直接使用了高清的图片作为了背景：
//背景 <ImageView android: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两个组件来实现一个日志图标的制作：
//听音乐 <ImageButton android: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" /> <TextView android: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布局：
首先是弹框的标题：
<TextView android: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"/>
这里的文字暂时设为“提示”，文字水平居中显示。
接着引入分隔实线：
<View android: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" />
这里将实线置于提示文字下放。
然后，引入日志图标：
<ImageView android: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字 <EditText android: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>
最后，为弹框设置点击按钮：
<RelativeLayout android:id="@+id/ll_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical"> <Button android: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:TextView init { 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() }
到此为止，首页的样式的基本制作过程已经介绍完毕，关于如何将弹框内容读取和存储，将在之后的章节中介绍。
