Android项目实战训练：倒计时（一）——UI设计（IMUDGES）

实现工具：Android studio 3.3.1

---

布局选用线性布局，在activity_main.xml中代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <EditText
            android:id="@+id/inputTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="请输入倒计时的时间" />

        <Button
            android:id="@+id/getTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="获取时间" />

        <TextView
            android:id="@+id/time"
            android:layout_width="match_parent"
            android:layout_height="30dp" />

        <Button
            android:id="@+id/beginTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="开始计时" />

        <Button
            android:id="@+id/stopTime"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="停止计时" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

下面是代码所对应的视图：

---

下面是为倒计时设置按钮的点击事件以及获取用户输入的倒计时

MainActivity.java 中的代码：

package com.example.counttime;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText inputet;
    private Button gettime,starttime,stoptime;
    private TextView time;
    private int i = 0;//获取当前时间时间
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view();
    }

    private void view(){
//        寻找控件
        inputet = findViewById(R.id.inputTime);
        gettime = findViewById(R.id.getTime);
        starttime = findViewById(R.id.beginTime);
        stoptime = findViewById(R.id.stopTime);
        time = findViewById(R.id.time);
//       添加点击事件
        gettime.setOnClickListener(this);
        starttime.setOnClickListener(this);
        stoptime.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.getTime:
                time.setText(inputet.getText().toString());
                i = Integer.parseInt(inputet.getText().toString());
                break;
            default:
                break;
        }
    }
}

现在就可以运行了.........

下面，让我们看一看运行结果：

左图为初始图片，右图是在输入框输入“100”后，在文本框显示了“100”的图片

哈，倒计时UI设计就到这里了

下一节，倒计时的逻辑实现。。。。。。