一、闹钟功能的介绍以及界面的展示
该闹钟是根据我们手机闹钟设计的一个简单的闹钟APP，其中包含时钟、闹钟、秒表和计时器功能。用户可以对闹钟添加和删除，可以对秒表计时、暂停和重置，对计时器可以暂停、计时、继续和重置等功能。
下图为闹钟的时钟功能界面和闹钟功能界面
下图为闹钟的计时功能和秒表功能
基本的界面就是这样了，接下来我们就开始详细的介绍闹钟的设计过程。
二、介绍系统的设计界面
闹钟的布局文件代码如下
由于该闹钟系统包含时钟、闹钟、计时器、秒表四个功能，所以只要插入TabHost控件就能实现在手机上更加简洁地展示四个功能。后面只需要在TabHost中插入四个Tab用来切换展示的界面，具体的代码实现如下：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = (TabHost)findViewById(android.R.id.tabhost);
tabHost.setup();
TabWidget tabWidget = tabHost.getTabWidget();
tabHost.addTab(tabHost.newTabSpec("tabTime").setIndicator("时钟").setContent(R.id.tabTime));
tabHost.addTab(tabHost.newTabSpec("tabAlarm").setIndicator("闹钟").setContent(R.id.tabAlarm));
tabHost.addTab(tabHost.newTabSpec("tabTimer").setIndicator("计时器").setContent(R.id.tabTimer));
tabHost.addTab(tabHost.newTabSpec("tabStopWatch").setIndicator("秒表").setContent(R.id.tabStopWatch));
for (int i =0; i < tabWidget.getChildCount(); i++) {
//修改Tabhost高度和宽度
tabWidget.getChildAt(i).getLayoutParams().height = 90;
tabWidget.getChildAt(i).getLayoutParams().width = 65;
//修改显示字体大小
TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
tv.setTextSize(25);
tv.setTextColor(this.getResources().getColorStateList(android.R.color.black));
}
stopWatchView = (StopWatchView)findViewById(R.id.tabStopWatch);
}
1、 因为时钟功能中，只要显示当前的日期和时钟就可以了，所以只需要插入一个TextView用来显示日期时间就可以了。
<com.example.administrator.alarm5.TimeView
android:id="@+id/tabTime"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:textAlignment="center"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tvTime"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="36sp"
android:textAlignment="center"
android:textStyle="normal|bold" />
</com.example.administrator.alarm5.TimeView>2.1、闹钟功能就相对时钟功能就复杂很多了，因为这里需要对闹钟进行增加，删除等操作，而且可能需要展示多个闹钟的时间。所以这里需要用到有一个Button控件用来增加闹钟和一个ListView控件用来展示闹钟的时间。
<com.example.administrator.alarm5.AlarmView
android:id="@+id/tabAlarm"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ListView
android:id="@+id/lvAlarmList"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:headerDividersEnabled="true"
android:footerDividersEnabled="true">
</ListView>
<Button
android:id="@+id/btnAddAlarm"
android:text="添加闹钟"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="18sp" />
</com.example.administrator.alarm5.AlarmView>2.2、当闹钟想起来的时候，也需要展现一个界面提醒用户，所以我们还需要设计另外一个.xml布局文件。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/font_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="闹铃响起来了！" />
<Button
android:id="@+id/close_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="关闭闹钟"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"
/>
</RelativeLayout>效果图如下
3、秒表功能包含四个功能键，分别为开始，暂停、继续和重置。所以需要四个Button，然后需要三个EditText分别用来给用户输入时分秒。具体的代码如下：
<com.example.administrator.alarm5.TimerView
android:id="@+id/tabTimer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<EditText
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/etHour"
android:inputType="number"
android:singleLine="true"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"
android:textAlignment="center"
android:textStyle="normal|bold" />
<EditText
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/etMin"
android:inputType="number"
android:singleLine="true"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=":"
android:textAlignment="center"
android:textStyle="normal|bold" />
<EditText
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="@+id/etSec"
android:inputType="number"
android:singleLine="true"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textStyle="normal|bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/btnGroup"
android:orientation="horizontal">
<Button
android:id="@+id/btnStart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="开始"
android:textAlignment="center"
android:textSize="18sp" />
<Button
android:id="@+id/btnPause"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="暂停"
android:textSize="18sp"
android:textAlignment="center" />
<Button
android:id="@+id/btnResume"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="继续"
android:textSize="18sp"
android:textAlignment="center" />
<Button
android:id="@+id/btnReset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="重置"
android:textSize="18sp"
android:textAlignment="center" />
</LinearLayout>
</com.example.administrator.alarm5.TimerView>4、剩下最后一个功能项就是计时器了，这个和上面讲了秒表比较类似，不同的是多一个Button按钮用来计时，另外还需要一个ListView用来显示计时的时间，详细的代码如下：
<com.example.administrator.alarm5.StopWatchView
android:id="@+id/tabStopWatch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/timeHour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:fontFamily="sans-serif"
android:textStyle="normal|bold" />
<TextView
android:text=":"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:id="@+id/timeMin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:text=":"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:id="@+id/timeSec"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:text=":"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
<TextView
android:id="@+id/timeMSec"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textAlignment="center"
android:textStyle="normal|bold" />
</LinearLayout>
<ListView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/lvWatchTimeList"
android:background="@color/common_google_signin_btn_text_dark_default">
</ListView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="开始"
android:id="@+id/btnSWStart"
android:textAlignment="center"
android:textStyle="normal|bold"
android:textSize="18sp" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="暂停"
android:id="@+id/btnSWPause"
android:textAlignment="center"
android:textSize="18sp" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="继续"
android:id="@+id/btnSWResume"
android:textAlignment="center"
android:textSize="18sp" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="重置"
android:id="@+id/btnSWReset"
android:textSize="18sp"
android:textAlignment="center" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="计时"
android:id="@+id/btnSWLap"
android:textSize="18sp"
android:textAlignment="center" />
</LinearLayout>
</com.example.administrator.alarm5.StopWatchView>上面基本上都介绍完界面布局的代码，这些代码都是activity_mian.xml中的部分代码，这里只是展示了所要说明的部分，下一节将会介绍这个闹钟的后端代码。
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
