Android development log punch APP (2)

Android development log punch APP (2)

---

foreword

In the previous article, the preparations have been completed, and now we will start the real production. The production process of the Today page will be shown here .

---

development process

1. Background and Title

The general situation of the file directory has been introduced in the previous chapter. The layout of the Today page will be written in the fragment_home.xml file.
Here we use the RelativeLayout layout

First, add a suitable top tab bar for the Today page :

Because it will be used in other pages later, here we use the custom component method and call it in fragment_home.xml :

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

View the custom_control_home_title.xml file as follows:

<?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>

In this way, on the Today page , you can see that the title bar already exists at the top.

Next, we add a good-looking background to the Today page . For convenience, we directly use high-definition pictures as the background:

    //背景
    <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"/>

I have uploaded the background image to the image bed for your reference:
Background image connection

At this point the page is as follows:

---

The log icon

Next, we add a log icon to the Today page .
Here we use ImageButton and TextView to create a log icon:

    //听音乐

    <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" />

Here is some code for you to explain:

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

The music icon introduced in it is shown in the figure:
the rest of the code is to keep the position of the icon and text on the page.
On this basis, we have added five types of sleep early, memorize words, exercise, get up early, and think . I will not introduce them one by one here. At this point, the basic page of our Today page has been completed:

---

3. Log box

Next, we make a popover for the log icon.
Here we create a file: dialog_tips_custom_style.xml
first on the renderings:

Here, we will nest a LinearLayout layout in a large RelativeLayout layout:
the first is the title of the popup box:

        <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"/>

The text here is temporarily set to "hint", and the text is displayed horizontally and centered.
Then introduce the separating solid line:

        <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" />

Here, the solid line is placed under the prompt text.
Then, introduce the log icon:

        <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"
            />

Next, we introduce an inputable text box:

        //文本框，最长可输入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" />

Among them:
maxLines - set the text box to input up to 8 lines
hint - set the prompt text
textMultiLine - set the multi-line input
The imported style dialog_edittext_shape is as follows:

<?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>

Finally, set the click button for the popup:

        <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>

At this point, the style of the pop-up box is complete!
Let's create a new CustomTipDialog.kt file:
let it inherit the Dialog class:

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

Import the popup style:

    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
    }

Bind the click event in the HomeFragment.kt file:

    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()
    }

So far, the basic production process of the style of the home page has been introduced. How to read and store the content of the pop-up box will be introduced in the following chapters.