做一款自己的安卓天气闹钟（2）——顶部导航栏+ViewPager滑动切换页面

先看设计图

设计图

依然是丑的要死的一幅图，这一次只关注整体框架，即顶部导航栏，我们需要完成一个可以点击的导航栏，点击四个按钮之后，下面的界面会有一个滑动切换的效果

知识点

1. ViewPager（页面切换组件）
   我们可以往里面填充多个View，然后我们可以通过触摸屏幕左右滑动切换不同的View，我们需要一个Adapter(适配器)，将要显示的View和 我们的ViewPager进行绑定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google 官方是建议我们使用Fragment来填充ViewPager的,这样可以更加方便的生成每个Page以及管理 每个Page的生命周期!当然它给我们提供了两个不同的Adapter，他们分别是： FragmentPageAdapter和FragmentStatePagerAdapter！我们这次要用的便是FragmentPageAdapter。
2. Fragment(碎片)
   相当于一个布局块，有自己的生命周期，用来做这种滑动视图很方便
3. RadioButton(单选按钮)
   只能够选中一个，所以我们需要把RadioButton放到RadioGroup按钮组中，从而实现单选功能

项目结构

项目结构

开始写代码

1. 创建一个acticity，名字是config.xml，代码如下

   
       //顶部导航栏
       

           

           

           

           

       
       //页面切换组件
       


   

2. 由于每一个RadioButton都是一样的样式，所以我们把样式单独提出来放在style.xml中

3. 创建一个MyFragment.java文件，用来表示页面切换里的每个页，暂时四个页面都用同一个类，在每个页中显示不同的字而已

package love.xzjs.t_android;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Administrator on 2017/11/14.
 */

public class MyFragment extends android.support.v4.app.Fragment {
    public String content;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.config_show,container,false);
        Log.e("HEHE",content);
        return view;
    }
}

此处MyFragment 继承的是android.support.v4.app.Fragment，因为ViewPager也是v4库中的

4. 创建一个MyFragmentPagerAdapter.java文件，用来管理页面的切换

package love.xzjs.t_android;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private final int PAGE_COUNT = 4;
    private Show show;
    private MyFragment myFragment2, myFragment3, myFragment4;

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        show = new Show();
        myFragment2 = new MyFragment();
        myFragment3 = new MyFragment();
        myFragment4 = new MyFragment();
        myFragment2.content = "2";
        myFragment3.content = "3";
        myFragment4.content = "4";
    }

    /**
     * Return the Fragment associated with a specified position.
     *
     * @param position
     */
    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case MainActivity.PAGE_ONE:
                fragment = show;
                break;
            case MainActivity.PAGE_TWO:
                fragment = myFragment2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = myFragment3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = myFragment4;
                break;
        }
        return fragment;
    }

    /**
     * Return the number of views available.
     */
    @Override
    public int getCount() {
        return PAGE_COUNT;
    }
}

5. 修改MainActivity.java，使横屏显示原来的主页面，竖屏显示刚创建好的布局

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        int mCurrentOrientation = getResources().getConfiguration().orientation;

        if (mCurrentOrientation == Configuration.ORIENTATION_PORTRAIT) {
            Log.i("info", "port");
            setContentView(R.layout.config);
            myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
            bindViews();
            radioButtonShow.setChecked(true);

        } else {
            Log.i("info", "land");
            setContentView(R.layout.activity_main);
        }
    }

绑定每个按钮和对应的点击事件

  private void bindViews() {
        radioGroup = (RadioGroup) findViewById(R.id.rg_tab_bar);
        radioGroup.setOnCheckedChangeListener(this);
        radioButtonShow = (RadioButton) findViewById(R.id.show);
        radioButtonClock = (RadioButton) findViewById(R.id.clock);
        radioButtonTime = (RadioButton) findViewById(R.id.time);
        radioButtonMy = (RadioButton) findViewById(R.id.my);

        viewPager = (ViewPager) findViewById(R.id.vpager);
        viewPager.setAdapter(myFragmentPagerAdapter);
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        switch (i) {
            case R.id.show:
                viewPager.setCurrentItem(PAGE_ONE);
                break;
            case R.id.clock:
                viewPager.setCurrentItem(PAGE_TWO);
                break;
            case R.id.time:
                viewPager.setCurrentItem(PAGE_THREE);
                break;
            case R.id.my:
                viewPager.setCurrentItem(PAGE_FOUR);
                break;
        }
    }

页面滑动之后修改顶部导航栏按钮的状态

 @Override
    public void onPageScrollStateChanged(int state) {
        if (state == 2) {
            switch (viewPager.getCurrentItem()) {
                case PAGE_ONE:
                    radioButtonShow.setChecked(true);
                    break;
                case PAGE_TWO:
                    radioButtonClock.setChecked(true);
                    break;
                case PAGE_THREE:
                    radioButtonTime.setChecked(true);
                    break;
                case PAGE_FOUR:
                    radioButtonMy.setChecked(true);
                    break;
            }
        }
    }

结果演示

因为有下一节的代码，所以最后结果和代码不太一样，不过只要能竖屏显示这个界面，并实现页面的滑动效果就可以了

demo.gif

代码地址

https://github.com/xzjs/t_android