鬧鐘+秒表+倒計時三合一

各位大佬，這就是秒表和倒計時和鬧鐘的界面。

那我們先實作界面好嗎？

我們可以看到上面一行有鬧鐘，有計時，有倒計時，點選或者滑動就可以去到相應的界面了。

我們實作這三個界面主要用到了 Fragment+Viewpager //碎片（類似Activity）

viewpager的使用一定要用到它獨特的擴充卡，這個擴充卡适配了三個Fragment。

主Activity上面放一個Tab.layout，主體放一個Viewpager元件。看看下面Acivitiy的代碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/back"//背景貓
    tools:context="com.bbg.myclock.MainActivity">

    <include

        android:id="@+id/tabBar"
        layout="@layout/tab" /> //鬧鐘計時...那幾個字

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabBar">

    </android.support.v4.view.ViewPager>
</RelativeLayout>

tab的代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"

    android:clipToPadding="true"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tab1"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp"
        android:gravity="center"
        android:layout_width="0dp"
        android:text="@string/page1name"   //鬧鐘
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:id="@+id/tab2"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp"
        android:gravity="center"
        android:layout_width="0dp"
        android:text="@string/page2name"  //計時
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:id="@+id/tab3"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp"
        android:gravity="center"
        android:layout_width="0dp"
        android:text="@string/timer"  //倒計時
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
</LinearLayout>

那現在看看第一個鬧鐘的界面XML：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

     <AnalogClock                                       //一個元件，可以看到時鐘的
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/ac"
         android:layout_centerHorizontal="true"/>

    <Button
        android:backgroundTint="@color/transparentblue"     //最下面添加按鈕
        android:text="@string/add"
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
    <ListView
        android:divider="@color/divider"
        android:dividerHeight="1sp"
        android:layout_above="@id/btn1"                  //鬧鐘的清單
        android:layout_below="@id/ac"
        android:id="@+id/naozhonglv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

    </ListView>


</RelativeLayout>

下面是計時的XML：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_height="match_parent">
<LinearLayout
    android:orientation="horizontal"
    android:layout_centerHorizontal="true"
    android:id="@+id/cm"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:gravity="center"
        android:layout_weight="3"
        android:text="0"
        android:textSize="48sp"
        android:textColor="@color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/minute"/>
    <TextView
        android:layout_weight="1"
        android:text=":"
        android:textSize="48sp"
        android:textColor="@color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
       />
    <TextView
        android:gravity="center"
        android:layout_weight="3"
        android:text="0"
        android:textSize="48sp"
        android:textColor="@color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/second"/>
    <TextView
        android:layout_weight="1"
        android:text="."
        android:textSize="48sp"
        android:textColor="@color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
       />
    <TextView
        android:gravity="center"
        android:layout_weight="3"
        android:text="0"
        android:textSize="48sp"
        android:textColor="@color/white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/mills"/>

</LinearLayout>

 <android.support.v7.widget.ButtonBarLayout
     android:layout_width="match_parent"
     android:id="@+id/btnbar"
     android:layout_alignParentBottom="true"
     android:layout_height="wrap_content">
     <Button
         android:text="@string/reset"
         android:backgroundTint="@color/transparent"
         android:id="@+id/reset"
         android:layout_width="0dp"
         android:layout_weight="1"
         android:layout_height="wrap_content" />
     <Button
         android:textColor="@color/colorAccent"
         android:text="@string/stopT"
         android:layout_weight="2"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:backgroundTint="@color/transparent"
         android:id="@+id/stopT"/>
     <Button
         android:textColor="@color/green"
         android:backgroundTint="@color/transparent"
         android:text="@string/startT"
         android:layout_weight="2"
         android:id="@+id/startT"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         />
 </android.support.v7.widget.ButtonBarLayout>

    <ListView
        android:layout_above="@id/btnbar"
        android:layout_below="@+id/cm"
        android:layout_width="match_parent"
        android:id="@+id/lv2"
        android:layout_height="match_parent">

    </ListView>

</RelativeLayout>

下面是倒計時的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:focusableInTouchMode="true"
        android:focusable="true"
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">

        <com.bbg.myclock.mynumberpicker
            android:overScrollMode="always"
            android:id="@+id/hour"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="wrap_content">

        </com.bbg.myclock.mynumberpicker>

        <TextView
            android:textColor="@color/white"
            android:id="@+id/tv1"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text=":"
            android:textSize="26sp"
            android:textStyle="bold" />

        <com.bbg.myclock.mynumberpicker    //可用自帶的numberpicker

            android:id="@+id/minute"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="wrap_content">

        </com.bbg.myclock.mynumberpicker>

        <TextView
            android:text=":"
            android:textColor="@color/white"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:textSize="26sp"
            android:textStyle="bold" />

        <com.bbg.myclock.mynumberpicker
            android:id="@+id/second"
            android:layout_weight="2"
            android:layout_width="0dp"
            android:layout_height="wrap_content">

        </com.bbg.myclock.mynumberpicker>
    </LinearLayout>

    <Button
        android:text="@string/startCount"
        android:id="@+id/btnok"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="26sp"
        android:textColor="@color/white"
        android:backgroundTint="#836e"/>
    <ProgressBar
        android:layout_margin="10dp"
        android:id="@+id/pb"
        android:backgroundTint="#a94d"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_above="@id/btnok"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
    <TextView
        android:textColor="@color/white"
        android:textSize="48sp"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/pb"
        android:id="@+id/num"/>
</RelativeLayout>

好，那現在界面的XMl都有啦，現在把三個界面添加到Activity吧！

Activity中主要是有Viewpager，Viewpager有三個頁面。

鬧鐘+秒表+倒計時三合一

看看Activity！

public class MainActivity extends AppCompatActivity {

   TextView tv1,tv2,tv3;
    ViewPager viewPager;
    MyPageadapter pageadapter;  //這個在下面的類裡
    long exit=0;//可忽略
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initStatus();  //這個是使得狀态欄透明
        pageadapter=new MyPageadapter(getSupportFragmentManager());
        FindID();
        tv1.setTextColor(getResources().getColor(R.color.textselected));

        tv1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                initTabColor();
                tv1.setTextColor(getResources().getColor(R.color.textselected));
                viewPager.setCurrentItem(0);
            }
        });
        tv2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                initTabColor();
                tv2.setTextColor(getResources().getColor(R.color.textselected));
                viewPager.setCurrentItem(1);
            }
        });
        tv3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                initTabColor();
                tv3.setTextColor(getResources().getColor(R.color.textselected));
                viewPager.setCurrentItem(2);
            }
        });
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (state==2){
                    switch (viewPager.getCurrentItem()){
                        case 0:
                            initTabColor();
                            tv1.setTextColor(getResources().getColor(R.color.textselected));
                            viewPager.setCurrentItem(0);
                            break;
                        case 1:
                            initTabColor();
                            tv2.setTextColor(getResources().getColor(R.color.textselected));
                            viewPager.setCurrentItem(1);
                            break;
                        case 2:
                            initTabColor();
                            tv3.setTextColor(getResources().getColor(R.color.textselected));
                            viewPager.setCurrentItem(2);
                            break;
                    }
                }
            }
        });


    }
    public void FindID(){
        tv1=(TextView)findViewById(R.id.tab1);
        tv2=(TextView)findViewById(R.id.tab2);
        tv3=(TextView)findViewById(R.id.tab3);
        viewPager=(ViewPager)findViewById(R.id.viewpager);

        viewPager.setAdapter(pageadapter);
        viewPager.setCurrentItem(0);

    }
    public void initStatus(){
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
    public void initTabColor(){
        tv1.setTextColor(getResources().getColor(R.color.colorPrimary));
        tv2.setTextColor(getResources().getColor(R.color.colorPrimary));
        tv3.setTextColor(getResources().getColor(R.color.colorPrimary));
    }            }
           
              下面的MypagerAdatper的java：       
     public class MyPageadapter extends FragmentPagerAdapter {

    FragClock fragClock = null;
    FragJishi fragJishi = null;
    FragCalendar fragCalendar=null;//沒用
    FragTimer fragTimer=null;


    public MyPageadapter(FragmentManager fm) {
        super(fm);
        fragClock=new FragClock();
        fragJishi=new FragJishi();
        fragCalendar=new FragCalendar();//沒用
        fragTimer=new FragTimer();
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        switch (position){
            case 0:
                fragment=fragClock;
                break;
            case 1:
                fragment=fragJishi;
                break;
            case 2:
                fragment=fragTimer;
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }





    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        return super.instantiateItem(container,position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      super.destroyItem(container,position,object);
    }

}
                   

 
 我們這一次先把界面實作了，下次實作功能。 

 

 
 
這個是鬧鐘的
 

        public class FragClock extends Fragment {
    
    @Nullable
    @Override
    public View onCreateView(final LayoutInflater inflater, ViewGroup container, final Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.naozhong, null);
        return view；}
}
           
                這個是秒表，計時的。      
    public class FragJishi extends Fragment {
   

    @Nullable
    @Override
    public View onCreateView(final LayoutInflater inflater, ViewGroup container, final Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.jishi, null);return view;}}
           
   
            這個是倒計時Timer：      
    public class FragTimer extends Fragment {
    
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.timer, container, false);return view;}}
                       

你們現在試一試，界面能不能實作出來！？？      
    如果界面有問題的，請及時留言哦～！！      
    下一期我們再來界面功能的問題～！

鬧鐘+秒表+倒計時三合一

下面的MypagerAdatper的java：

繼續閱讀

倒計時demo

uni-app 擷取驗證碼倒計時60秒

DirectX11 計時和動畫

數字鐘液晶顯示年月日,時間,鬧鐘,溫度c語言程式,基于89C52單片機數字鐘設計

Android 倒計時——Timer和CountDownTimer的使用，實作啟動，暫停，繼續，重複，重設時長以及啟動service背景倒計時自定義倒計時類

Android倒計時簡單實作

Android驗證碼倒計時實作方式總結

Android CountDownTimer學習使用

1.Android Skill 倒計時功能-CountDownTimer

用CountDownTimer實作商品秒殺的倒計時

Android最簡單的倒計時：CountDownTimer原理：使用：完。

Android鬧鐘的一些注意事項

android listview清單實作倒計時,類似商品搶購清單

Android 簡單實作倒計時CountDownTimer

Android倒計時和計時控件

Android 擷取伺服器與用戶端時差