家庭记账本（三）记录页面的完善

　　昨天我们已经可以让记录页面显示出来。可是添加备注与时间的地方依然是写死的，我们需要可以让用户自定义备注信息和选择时间。我们今天继续对记录页面信息进行完善。

　　我们可以对备注与时间添加点击事件，分别弹出对话框进行对于备注与时间的修改。

　　下面先编写备注的对话框。我们新建dialog_mark.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="wrap_content"
    android:padding="10dp"
    android:background="@color/white">

    <TextView
        android:id="@+id/dialog_mark_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/add_remark"
        android:textSize="16sp"
        android:textColor="@color/black"/>

    <EditText
        android:id="@+id/dialog_mark_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/dialog_mark_tv"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        android:background="@color/white">
        <requestFocus/>
    </EditText>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/dialog_mark_et"
        android:padding="10dp">

        <Button
            android:id="@+id/dialog_mark_btn_cancel"
            android:layout_width="10dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="10dp"
            android:text="@string/cancel"
            android:textColor="@color/green_006400"
            android:background="@drawable/dialog_btn_bg"/>

        <Button
            android:id="@+id/dialog_mark_btn_ensure"
            android:layout_width="10dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="10dp"
            android:background="@drawable/main_recordbtn_bg"
            android:text="@string/ensure"
            android:textColor="@color/white"/>

    </LinearLayout>
</RelativeLayout>

 　　新建MarkDialog对此对话框进行设置

public class MarkDialog extends Dialog implements View.OnClickListener {

    EditText et;
    Button btn_cancel;
    Button btn_ensure;
    OnEnsureListener onEnsureListener;

    public void setOnEnsureListener(OnEnsureListener onEnsureListener) {
        this.onEnsureListener = onEnsureListener;
    }

    public MarkDialog(@NonNull Context context) {
        super(context);
    }

    public interface OnEnsureListener {
        public void onEnsure();
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dialog_mark_btn_cancel:
                cancel();
                break;
            case R.id.dialog_mark_btn_ensure:
                if (onEnsureListener!=null) {
                    onEnsureListener.onEnsure();
                }
                break;
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置对话框显示布局
        setContentView(R.layout.dialog_mark);

        et = findViewById(R.id.dialog_mark_et);
        btn_cancel = findViewById(R.id.dialog_mark_btn_cancel);
        btn_ensure = findViewById(R.id.dialog_mark_btn_ensure);
        btn_ensure.setOnClickListener(this);
        btn_cancel.setOnClickListener(this);
    }

    public String getText() {
        return et.getText().toString().trim();
    }

    /*设置dialog尺寸和屏幕尺寸一致*/

    public void setDialogSize() {
        /*获取当前窗口对象*/
        Window window = getWindow();
        /*获取窗口对象参数*/
        WindowManager.LayoutParams attributes = window.getAttributes();
        /*获取屏幕宽度*/
        Display defaultDisplay = window.getWindowManager().getDefaultDisplay();
        /*对话框窗口为屏幕窗口*/
        attributes.width = (int) defaultDisplay.getWidth();

        attributes.gravity = Gravity.BOTTOM;
        window.setBackgroundDrawableResource(android.R.color.transparent);
        window.setAttributes(attributes);
        handler.sendEmptyMessageDelayed(1, 100);
    }

    Handler handler = new Handler() {
        @Override
        public void handleMessage(@NonNull Message msg) {
            /*自动弹出软键盘*/
            InputMethodManager inputMethodManager = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
            inputMethodManager.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
        }
    };
}

　　这里注意一下自动弹出软键盘需要做延时处理，否则不能自动弹出。

　　下面是dialog_calendar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <DatePicker
        android:id="@+id/dialog_time_dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/please_input_time"
        android:padding="10dp"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">
        <EditText
            android:id="@+id/dialog_time_hour"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:maxLength="2"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=":"
            android:textSize="20dp"
            android:textStyle="bold"/>
        <EditText
            android:id="@+id/dialog_time_minute"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:maxLength="2"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:orientation="horizontal">

        <Button
            android:id="@+id/dialog_time_btn_cancel"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="@string/cancel"
            android:textColor="@color/green_006400"
            android:layout_marginRight="20dp"
            />

        <Button
            android:id="@+id/dialog_time_btn_ensure"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="@string/cancel"
            android:textColor="@color/green_006400"/>
    </LinearLayout>
</LinearLayout>

 　　

/**
 * 在记录页面弹出时间对话框
 */
public class SelectTimeDialog extends Dialog implements View.OnClickListener {

    EditText et_hour, et_minute;
    DatePicker datePicker;
    Button btn_ensure, btn_cancel;

    OnEnsureListener onEnsureListener;

    public void setOnEnsureListener(OnEnsureListener onEnsureListener) {
        this.onEnsureListener = onEnsureListener;
    }

    public interface OnEnsureListener{
        public void onEnsure(String time, int year, int month, int day);
    }

    public SelectTimeDialog(@NonNull Context context) {
        super(context);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dialog_time_btn_ensure:

                int year = datePicker.getYear();
                int month = datePicker.getMonth()+1;
                int day = datePicker.getDayOfMonth();

                String monthStr = String.valueOf(month);
                if (month < 10) {
                    monthStr = "0"+month;
                }

                String dayStr = String.valueOf(day);
                if (day < 10) {
                    dayStr = "0"+day;
                }

                /*获取输入的小时和分钟*/
                String hourStr = et_hour.getText().toString();
                String minuteStr = et_minute.getText().toString();

                int hour = 0;
                if (!TextUtils.isEmpty(hourStr)) {
                    hour = Integer.parseInt(hourStr);
                    hour = hour%24;
                }

                int minute = 0;
                if (!TextUtils.isEmpty(minuteStr)) {
                    minute = Integer.parseInt(minuteStr);
                    minute = minute%60;
                }

                hourStr = String.valueOf(hour);
                minuteStr = String.valueOf(minute);
                if (hour<10) {
                    hourStr = "0"+hour;
                }
                if (minute<10){
                    minuteStr = "0"+minute;
                }

                String timeFormat = year+"年"+monthStr+"月"+dayStr+"日 "+hourStr+":"+minuteStr;
                if (onEnsureListener!=null) {
                    onEnsureListener.onEnsure(timeFormat, year, month, day);
                }
                break;
            case R.id.dialog_time_btn_cancel:
                cancel();
                break;
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_calendar);

        et_hour = findViewById(R.id.dialog_time_hour);
        et_minute = findViewById(R.id.dialog_time_minute);
        datePicker = findViewById(R.id.dialog_time_dp);
        btn_cancel = findViewById(R.id.dialog_time_btn_cancel);
        btn_ensure = findViewById(R.id.dialog_time_btn_ensure);

        btn_cancel.setOnClickListener(this);
        btn_ensure.setOnClickListener(this);

        hideDatePickerHeader();
    }

    /*隐藏datePicker头布局*/
    private void hideDatePickerHeader() {
        ViewGroup rootView = (ViewGroup) datePicker.getChildAt(0);

        if (rootView==null) {
            return;
        }
        View headerView = rootView.getChildAt(0);
        if (headerView!=null) {
            return;
        }
        //5.0+
        int headerId = getContext().getResources().getIdentifier("day_picker_selector_layout", "id", "android");
        if (headerId==headerView.getId()) {
            headerView.setVisibility(View.GONE);
            ViewGroup.LayoutParams layoutParams = rootView.getLayoutParams();
            layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT;
            rootView.setLayoutParams(layoutParams);

            ViewGroup animator = (ViewGroup) rootView.getChildAt(1);
            ViewGroup.LayoutParams layoutParamsAnimator = animator.getLayoutParams();
            layoutParamsAnimator.width = ViewGroup.LayoutParams.WRAP_CONTENT;
            animator.setLayoutParams(layoutParamsAnimator);

            View child = animator.getChildAt(0);
            ViewGroup.LayoutParams layoutParamsChild = child.getLayoutParams();
            layoutParamsChild.width = ViewGroup.LayoutParams.WRAP_CONTENT;
            child.setLayoutParams(layoutParamsChild);

            return;
        }

        //6.0+
        headerId = getContext().getResources().getIdentifier("date_picker_header", "id", "android");
        if (headerId==headerView.getId()) {
            headerView.setVisibility(View.GONE);
        }
    }
}

　　对记录页面中的备注与时间添加点击事件。

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.frag_record_tv_time:
                showTimeDialog();
                break;
            case R.id.frag_record_tv_mark:
                showMarkDialog();
                break;
        }
    }

    /*弹出备注对话框*/
    public void showMarkDialog() {
        MarkDialog dialog = new MarkDialog(getContext());
        dialog.show();
        dialog.setDialogSize();

        dialog.setOnEnsureListener(new MarkDialog.OnEnsureListener() {
            @Override
            public void onEnsure() {
                String text = dialog.getText();

                if (!TextUtils.isEmpty(text)) {
                    tv_mark.setText(text);

                    //TODO:将bean对象也做修改

                }
                dialog.cancel();
            }
        });
    }

    /*弹出时间对话框*/
    public void showTimeDialog() {
        SelectTimeDialog selectTimeDialog = new SelectTimeDialog(getContext());
        selectTimeDialog.show();

        selectTimeDialog.setOnEnsureListener(new SelectTimeDialog.OnEnsureListener() {

            @Override
            public void onEnsure(String time, int year, int month, int day) {
                tv_time.setText(time);

　　　　　　　　　　//TODO:将bean对象也做修改

　　　　　　　　} 
　　　　　});
　　}

　　进行到这里我们记录页面也就写好了。当我们填写了数据信息之后怎样进行保存，明天将实现把录入信息保存至数据库。