iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Mobile Development

就是從無到有寫app系列 第 29

第29天-Picker:Date / Time選日期時間

2022/2

Picker:Date / Time

開新檔案-
https://ithelp.ithome.com.tw/upload/images/20220205/20119035liAdAjqB0c.png

建入string.xml

https://ithelp.ithome.com.tw/upload/images/20220205/201190358YErpxbXnB.png

<resources>
    <string name="app_name">MyDateTimePicker</string>
    <string name="date_picker_dialog">DatePickerDialog</string>
    <string name="time_picker_dialog">TimePickerDialog</string>


</resources>

布置XML檔

https://ithelp.ithome.com.tw/upload/images/20220205/20119035hvLu7S3Nt9.png

https://ithelp.ithome.com.tw/upload/images/20220205/20119035QObNPLxhyK.png

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/btnDateDlg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/date_picker_dialog"
        android:textAllCaps="false"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.033" />

    <Button
        android:id="@+id/btnTimeDlg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/time_picker_dialog"
        android:textAllCaps="false"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/btnDateDlg"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/btnDateDlg"
        app:layout_constraintTop_toBottomOf="@+id/btnDateDlg"
        app:layout_constraintVertical_bias="0.027" />

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:textSize="16sp"
        android:gravity="center_horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnTimeDlg" />
</androidx.constraintlayout.widget.ConstraintLayout>

到JAVA檔

1-宣告:
2-加偵聽器
3-timePickerDialog.setCancelable(false);一定要選日期就要改true

package com.huang.mydatetimepicker;
import androidx.appcompat.app.AppCompatActivity;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    Context context;
    Button btn_date, btn_time;
    TextView show;

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

        show = findViewById(R.id.txtResult);
        btn_date = findViewById(R.id.btnDateDlg);
        btn_time = findViewById(R.id.btnTimeDlg);
        context = this;

        btn_date.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Calendar now = Calendar.getInstance();

                DatePickerDialog datePickerDialog = new DatePickerDialog(
                        context,
                        datePickerOnDateSet,
                        now.get(Calendar.YEAR),
                        now.get(Calendar.MONTH),
                        now.get(Calendar.DAY_OF_MONTH)
                );
                datePickerDialog.setTitle("選擇日期");
                datePickerDialog.setMessage("XXXXXXXX");
                datePickerDialog.setIcon(android.R.drawable.ic_dialog_info);
                datePickerDialog.setCancelable(false);
                datePickerDialog.show();
            }
        });

        btn_time.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Calendar now2 = Calendar.getInstance();

                TimePickerDialog timePickerDialog = new TimePickerDialog(
                        context,
                        timePickerOnDateSet,
                        now2.get(Calendar.HOUR_OF_DAY),
                        now2.get(Calendar.MINUTE),
                        true
                );
                timePickerDialog.setTitle("選擇時間");
                timePickerDialog.setMessage("XXXXXXXX");
                timePickerDialog.setIcon(android.R.drawable.ic_dialog_info);
                timePickerDialog.setCancelable(false);
                timePickerDialog.show();
            }
        });
    }

    DatePickerDialog.OnDateSetListener datePickerOnDateSet = new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
            show.setText("您選擇的日期是: "+
                    String.valueOf(year)+" 年"+
                    month+" 月"+
                    dayOfMonth+" 日");
        }
    };

    TimePickerDialog.OnTimeSetListener timePickerOnDateSet = new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            show.setText("您選擇的時間是: "+
                    String.valueOf(hourOfDay)+" 點"+
                    minute+" 分");
        }
    };

}

模擬器長這樣~

https://ithelp.ithome.com.tw/upload/images/20220205/20119035OYggnPQynK.png

https://ithelp.ithome.com.tw/upload/images/20220205/20119035K2UkC3GWbn.png

https://ithelp.ithome.com.tw/upload/images/20220205/20119035IwE1rVTljy.png

https://ithelp.ithome.com.tw/upload/images/20220205/201190359FUjDD2Dv9.png

https://ithelp.ithome.com.tw/upload/images/20220205/20119035jGxvb0SZc7.png

/images/emoticon/emoticon05.gif

專案開始-單選RadioButton+複選CheckBox
開工~

Group先做再做button
button一定會縮排-要有2個選項要選2個button

Compontaint Tree預設是由上往下排
要橫的排要放入Layouts

要記得綁定
放checkBox

Layouts不好調-按紐和字都會跑入~要靠移動旁邊的tree
或許調程式碼還比較快

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="36dp"
    android:text="調查表"
    android:textSize="36sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView">

    <RadioButton
        android:id="@+id/radioButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton" />

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton" />
</RadioGroup>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="409dp"
    android:layout_height="139dp"
    android:layout_marginTop="36dp"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/radioGroup">

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="CheckBox" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="CheckBox" />

    <CheckBox
        android:id="@+id/checkBox3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="CheckBox" />
</LinearLayout>

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="36dp"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="36dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>
要GROUP去管理...所以要有ID
button也重命名ID

如果text不能改就要從CODE去改



到onClick的orientation可以看到變橫的horizontal
讓linerlayout跟著副容器的大小

在Declared Attributs裡layout_wiudth和match_wiudth 選wrap_content或0dp
然後讓邊邊有留邊要選到padding

命名checkbox的變數
Button-onCilck可以動做

回到程式碼.java檔
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

public void onClick(View view){

}

}
預先被V只能選一個

回到程式碼.java檔
從放入變數開始~
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

RadioGroup sex;
CheckBox c1,c2,c3;
TextView show;

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

public void onClick(View view){

}

}
顯示字串:String all="";
就是顯示有人打的東西
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

RadioGroup sex;
CheckBox c1,c2,c3;
TextView show;
String all="";


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

public void onClick(View view){

}

}
繼續寫.java程式碼=讓他去檢查誰被勾選
sex=findViewById(R.id.sex);
sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup grroup, int checkedId) {

}

});
新增變數String s1,s2;
逐一檢查:
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

RadioGroup sex;
CheckBox c1,c2,c3;
TextView show;
String all="";
String s1,s2;

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

    sex = findViewById(R.id.sex);
    sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch(checkedId){
                case R.id.r1:
                    s1 = "先生";
                    Toast.makeText(MainActivity.this,
                            s1,
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.r2:
                    s1 = "女士";
                    Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                    break;
                case R.id.r3:
                    s1 = "不顯示";
                    Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    });

    //CheckBox
}

public void onClick(View view) {
}

}

再來是各做各的CheckBox
c1=findViewById(R.id.c1);
c2=findViewById(R.id.c2);
c3=findViewById(R.id.c3);
加入偵聽器c1.setOnCheckedChangeListener(new MM());..看自己有沒有被V
還有最下面的textview
package com.huang.myui3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

RadioGroup sex;
CheckBox c1,c2,c3;
TextView show;
String all="";
String s1,s2;

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

    sex = findViewById(R.id.sex);
    sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch(checkedId){
                case R.id.r1:
                    s1 = "先生";
                    Toast.makeText(MainActivity.this,
                            s1,
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.r2:
                    s1 = "女士";
                    Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                    break;
                case R.id.r3:
                    s1 = "不顯示";
                    Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    });

    //CheckBox
    c1=findViewById(R.id.c1);
    c2=findViewById(R.id.c2);
    c3=findViewById(R.id.c3);

    c1.setOnCheckedChangeListener(new MM());
    c2.setOnCheckedChangeListener(new MM());
    c3.setOnCheckedChangeListener(new MM());

    show=findViewById(R.id.show);
}

public void onClick(View view) {
}

}


按鈕蒐集資料顯示在show

public void onClick(View view) {


}

宣告物件被取出來

for(int i:cbs){
            //CheckBox cc = findViewById(i);
            cc = findViewById(i);
            if(cc.isChecked()){
                s2 += cc.getText()+"\t";
            }

偵聽器可以被改寫
//c1.setOnCheckedChangeListener(new MM());
//c2.setOnCheckedChangeListener(new MM());
//c3.setOnCheckedChangeListener(new MM());
改寫成
c1 = findViewById(R.id.c1);
c2 = findViewById(R.id.c2);
c3 = findViewById(R.id.c3);


import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    //宣告變數
    RadioGroup sex;
    CheckBox c1, c2, c3;
    TextView show;
    String all="";
    String s1="先生", s2="沒有點選";

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

        //RadioGroup
        sex = findViewById(R.id.sex);
        sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch(checkedId){
                    case R.id.r1:
                        s1 = "先生";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r2:
                        s1 = "女士";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.r3:
                        s1 = "不顯示";
                        Toast.makeText(MainActivity.this, s1, Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });

        //CheckBox
        c1 = findViewById(R.id.c1);
        c2 = findViewById(R.id.c2);
        c3 = findViewById(R.id.c3);
        //c1.setOnCheckedChangeListener(new MM());
        //c2.setOnCheckedChangeListener(new MM());
        //c3.setOnCheckedChangeListener(new MM());

        show = findViewById(R.id.show);
    }
    //CheckBox的偵聽器:內部類
    private class MM implements CompoundButton.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //判斷元件
            CheckBox box = (CheckBox)buttonView;
            //取出元件的名稱
            String name = box.getText().toString();
            //判斷點選狀態
            if(isChecked){
                Toast.makeText(MainActivity.this, name+"被選中", Toast.LENGTH_SHORT).show();
            }else{
                Toast.makeText(MainActivity.this, name+"被取消", Toast.LENGTH_SHORT).show();
            }
        }
    }
    //按鈕收集資料,顯示在show
    public void onClick(View view) {

        //先清空s2
        s2 = "";
        //收集CheckBox的結果
        int[] cbs = {R.id.c1, R.id.c2, R.id.c3};
        CheckBox cc;
        for(int i:cbs){
            //CheckBox cc = findViewById(i);
            cc = findViewById(i);
            if(cc.isChecked()){
                s2 += cc.getText()+"\t";
            }
        }
        //判斷文字欄位是否為空
        //TextUtils需 import android.text.TextUtils;(舊版)
        if(TextUtils.isEmpty(s2)){
            s2 = "沒有點選";
        }
        all = s1+"\n"+s2;
        show.setText(all);
    }
}

我自己會寫到30天用另外一種…QQ
希望...可以讓我繼續有鐵人發文的機會~拜託拜託


上一篇
第28天~Notofication
下一篇
第30天~TTS(文字轉語音)+STT(語音轉文字)
系列文
就是從無到有寫app31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言