闹钟+秒表+倒计时三合一

各位大佬，这就是秒表和倒计时和闹钟的界面。

那我们先实现界面好吗？

我们可以看到上面一行有闹钟，有计时，有倒计时，点击或者滑动就可以去到相应的界面了。

我们实现这三个界面主要用到了  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;}}


你们现在试一试，界面能不能实现出来！？？
如果界面有问题的，请及时留言哦～！！
下一期我们再来界面功能的问题～！