Android Multifunctional Clock Development Case (Basic)

  • 2021-07-18 09:01:56
  • OfStack

In this article, we enter the practical study of Android multifunctional clock development. The specific effect can refer to the clock on the mobile phone, as follows

First let's look at the layout file layout_main. xml

Overall layout:


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/container" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <TabHost 
 android:id="@android:id/tabhost" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <LinearLayout 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" > 
 
  <TabWidget 
  android:id="@android:id/tabs" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" > 
  </TabWidget> 
 
  <FrameLayout 
  android:id="@android:id/tabcontent" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <com.example.clock.TimeView 
   android:id="@+id/tabTime" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
  </com.example.clock.TimeView> 
 
  <com.example.clock.AlarmView 
   android:id="@+id/tabAlarm" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
<span style="white-space:pre"> </span> ...  
  </com.example.clock.AlarmView> 
 
  <com.example.clock.TimerView 
   android:id="@+id/tabTimer" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
<span style="white-space:pre"> </span> ...  
  </com.example.clock.TimerView> 
 
  <com.example.clock.StopWatchView 
   android:id="@+id/tabStopWatch" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
<span style="white-space:pre"> </span> ...  
  </com.example.clock.StopWatchView> 
  </FrameLayout> 
 </LinearLayout> 
 </TabHost> 
 
</FrameLayout> 

The whole layout is an FrameLayout, and we put an TabHost in it. Next, we can directly add the layout we want. Maybe beginners will have a question at the beginning of 1, that is, < com. example. clock... > < /com. example. clock... > What is this thing? ? This is a custom control, and we created a class that inherits from LinearLayout (see here//www. ofstack. com/article/85515. htm for explanation). We saw four such tags above, indicating that we have four such Tab pages. About the layout of things here is not much to talk about, after I will be in the process of learning 1 do not understand, and related knowledge points uploaded to the resources, you can download to see.

Complete layout file code:


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/container" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <TabHost 
 android:id="@android:id/tabhost" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <LinearLayout 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" > 
 
  <TabWidget 
  android:id="@android:id/tabs" 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" > 
  </TabWidget> 
 
  <FrameLayout 
  android:id="@android:id/tabcontent" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <com.example.clock.TimeView 
   android:id="@+id/tabTime" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
 
   <TextView 
   android:id="@+id/tvTime" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   android:gravity="center" 
   android:textAppearance="?android:attr/textAppearanceLarge" /> 
  </com.example.clock.TimeView> 
 
  <com.example.clock.AlarmView 
   android:id="@+id/tabAlarm" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical" > 
 
   <ListView 
   android:id="@+id/lvListAlarm" 
   android:layout_width="fill_parent" 
   android:layout_height="0dp" 
   android:layout_weight="1" > 
   </ListView> 
 
   <Button 
   android:id="@+id/btnAddAlarm" 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:text="@string/add_alarm" > 
   </Button> 
  </com.example.clock.AlarmView> 
 
  <com.example.clock.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:id="@+id/etHour" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:inputType="number" 
    android:singleLine="true" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text=":" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <EditText 
    android:id="@+id/etMin" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:inputType="number" 
    android:singleLine="true" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text=":" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <EditText 
    android:id="@+id/etSec" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:inputType="number" 
    android:singleLine="true" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
   </LinearLayout> 
 
   <LinearLayout 
   android:id="@+id/btnGroup" 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:orientation="horizontal" > 
 
   <Button 
    android:id="@+id/btnStart" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/start" /> 
 
   <Button 
    android:id="@+id/btnPause" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/pause" /> 
 
   <Button 
    android:id="@+id/btnResume" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/resume" /> 
 
   <Button 
    android:id="@+id/btnReset" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/reset" /> 
   </LinearLayout> 
  </com.example.clock.TimerView> 
 
  <com.example.clock.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" /> 
 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text=":" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:id="@+id/timeMin" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text=":" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:id="@+id/timeSec" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="." 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
 
   <TextView 
    android:id="@+id/timeMsec" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:textAppearance="?android:attr/textAppearanceLarge" /> 
   </LinearLayout> 
 
   <ListView 
   android:id="@+id/lvWatchTime" 
   android:layout_width="fill_parent" 
   android:layout_height="0dp" 
   android:layout_weight="1" > 
   </ListView> 
 
   <LinearLayout 
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:orientation="horizontal" > 
 
   <Button 
    android:id="@+id/btnSWStart" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/start" /> 
 
   <Button 
    android:id="@+id/btnSWPause" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/pause" /> 
 
   <Button 
    android:id="@+id/btnSWResume" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/resume" /> 
 
   <Button 
    android:id="@+id/btnSWLap" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/lap" /> 
 
   <Button 
    android:id="@+id/btnSWReset" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:text="@string/reset" /> 
   </LinearLayout> 
  </com.example.clock.StopWatchView> 
  </FrameLayout> 
 </LinearLayout> 
 </TabHost> 
 
</FrameLayout> 

Having finished the layout, let's talk about MainActivity


private TabHost tabHost; 
 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_main); 
 
 tabHost = (TabHost) findViewById(android.R.id.tabhost); 
 tabHost.setup(); 
 
 //  For TabHost Add Label  
 //  New 1 A newTabSpec(newTabSpec) Object used to specify the label id Which is used to distinguish labels  
 //  Set its labels and charts (setIndicator) 
 //  Setting content (setContent) 
 /* 
 *  Settings tab  : --  Set button name  : setIndicator( Clock ); --  Setting tab contents  : setContent(), 
 *  You can set the view component ,  You can set Activity,  You can also set the Fragement; 
 */ 
 tabHost.addTab(tabHost.newTabSpec("tabTime").setIndicator(" Clock ") 
  .setContent(R.id.tabTime)); 
 tabHost.addTab(tabHost.newTabSpec("tabAlarm").setIndicator(" Alarm clock ") 
  .setContent(R.id.tabAlarm)); 
 tabHost.addTab(tabHost.newTabSpec("tabTimer").setIndicator(" Timer ") 
  .setContent(R.id.tabTimer)); 
 tabHost.addTab(tabHost.newTabSpec("tabStopWatch").setIndicator(" Stopwatch ") 
  .setContent(R.id.tabStopWatch)); 
} 

The main operation in MainActivity is to set TabHost. The explanation has been posted in the above code, so we won't talk about it here. In the next article, we will focus on the four parts of clock, alarm clock, timer and stopwatch. I hope everyone will continue to learn.

The above is the whole content of this article, hoping to help everyone learn Android software programming.


Related articles: