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

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

那我们先实现界面好吗？

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

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

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