ViewPager+RadioGroup实现页面切换 小白的成长之路（二）

前言

前一篇我们只是新建了一个项目，还没有正式做项目。做一个好的项目要考虑的东西实在太多了，当然我们现在只是想要做个东西提升自我锻炼自己比较光看不练的效果太差了。那么现在一个自己感兴趣的APP做它的模仿是个不错的选择，这样需要实现的那些功能UI的布局，相关的图片资源这些就都不用考虑了，我们就可以专注与技术层面的编写。

我选择模仿网易漫画。

分析设计

打开网易漫画可以看到底部一个控件，点击推荐，找漫画等按钮可以到不同的界面。话不多少先看我做的效果图

细节方面还不够，但是大概是这个样子，图标也不太一样大家有时间可以找更像的，我就先只这样了。

二话不说上代码

  <android.support.v4.view.ViewPager
        android:id="@+id/main_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></android.support.v4.view.ViewPager>

    <RadioGroup
        android:id="@+id/tab_rg"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/tab_recommend"
            android:drawableTop="@drawable/tab_recommend_btn_selector"
            android:text="@string/tab_recommend"
            style="@style/tab_swfg_btn" />

        <RadioButton
            android:id="@+id/tab_search"
            android:drawableTop="@drawable/tab_search_btn_selector"
            android:text="@string/tab_search"
            style="@style/tab_swfg_btn" />

        <RadioButton
            android:id="@+id/tab_comic"
            android:drawableTop="@drawable/tab_comic_btn_selector"
            android:text="@string/tab_comic"
            style="@style/tab_swfg_btn" />

        <RadioButton
            android:id="@+id/tab_topic"
            android:drawableTop="@drawable/tab_topic_btn_selector"
            android:text="@string/tab_topic"
            style="@style/tab_swfg_btn" />

        <RadioButton
            android:id="@+id/tab_account"
            android:drawableTop="@drawable/tab_account_btn_selector"
            android:text="@string/tab_account"
            style="@style/tab_swfg_btn" />

    </RadioGroup>

 布局文件简单ViewPager+RadioGroup

底部的Style

 <style name="tab_swfg_btn">

        <item name="android:gravity">center</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:textColor">@drawable/tab_swfg_tv_selector</item>
 </style>

 这样主界面的布局就完成了上面的五个Fragment先建个空白然后加个Text方便区分就好了 具体内容以后再写。

好了让我们看看main里面的Activity里怎么写

这里我用了黄油刀

  @BindView(R.id.main_vp)
    ViewPager mainVp;
    @BindView(R.id.tab_rg)
    RadioGroup tabRg;

    private RecommendFragment recommendFragment;
    private SearchFragment searchFragment;
    private ComicFragment comicFragment;
    private TopicFragment topicFragment;
    private AccountFragment accountFragment;

    private List<Fragment> mFragmentList = new ArrayList<>();
    private SimpleViewPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        initPager();
        initTab();
    }

    private void initPager() {
        recommendFragment = RecommendFragment.getInstance();
        searchFragment = SearchFragment.getInstance();
        comicFragment = ComicFragment.getInstance();
        topicFragment = TopicFragment.getInstance();
        accountFragment = AccountFragment.getInstance();

        mFragmentList.add(recommendFragment);
        mFragmentList.add(searchFragment);
        mFragmentList.add(comicFragment);
        mFragmentList.add(topicFragment);
        mFragmentList.add(accountFragment);

        mAdapter = new SimpleViewPagerAdapter(getSupportFragmentManager(), mFragmentList);
        mainVp.setAdapter(mAdapter);

    }

    private void initTab() {
        tabRg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i) {
                    case R.id.tab_recommend:
                        mainVp.setCurrentItem(0);
                        break;
                    case R.id.tab_search:
                        mainVp.setCurrentItem(1);
                        break;
                    case R.id.tab_comic:
                        mainVp.setCurrentItem(2);
                        break;
                    case R.id.tab_topic:
                        mainVp.setCurrentItem(3);
                        break;
                    case R.id.tab_account:
                        mainVp.setCurrentItem(4);
                        break;

                }
            }
        });
    }

 

public class SimpleViewPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList=new ArrayList<>();

    public SimpleViewPagerAdapter(FragmentManager fm,List<Fragment> fragmentList) {
        super(fm);
        mFragmentList=fragmentList;
    }

    @Override
    public Fragment getItem(int i) {
        return mFragmentList.get(i);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }
}

 

 好的这样大概的布局就完成了。

禁止滑动

突然发现网易漫画哪里是没有滑动的那么我们也设置禁止滑动吧

public class NoSlideViewPager extends ViewPager {
    private boolean isCanslide = true;
    public NoSlideViewPager(@NonNull Context context) {
        super(context);
    }

    public void setScanSlide(boolean isCanSlide) {
        this.isCanslide = isCanSlide;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return isCanslide && super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return isCanslide && super.onTouchEvent(ev);

    }
}

 

将 NoSlideViewPager把原来的ViewPager替换了就可以了