144_ViewPager实现页面展示

ViewPager实现页面展示

之前我们都是用Fragment切换

实现页面展示

但是Fragment不容易控制生命周期

所以我们试试用ViewPager来实现页面展示

 

原理其实就是

没什么原理,就是把东西都放到ViewPager的页面里面

就这么简单

 

 

开始!

 

首先我们在Activity只放一个FrameLayout

然后往里面来一个Fragment

然后往Fragment里面放一个ViewPager和一个RadioGroup来配合

 

你问我为什么不把控件直接放到Activity里面?

万一有变化呢,对吧,放Fragment里面就更灵活了

 

Activity里面:

 

<FrameLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/fl_main_content"

    >

</FrameLayout>

 

 

 

 

Fragment里面:

 

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

              android:orientation="vertical"

              android:layout_width="match_parent"

              android:layout_height="match_parent">

 

    <android.support.v4.view.ViewPager

        android:id="@+id/vp_main_content"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"></android.support.v4.view.ViewPager>

 

    <RadioGroup

        android:id="@+id/main_radio"

        android:layout_width="match_parent"

        android:layout_height="60dp"

        android:layout_gravity="bottom"

        android:background="@drawable/bottom_tab_bg"

        android:gravity="center_vertical"

        android:orientation="horizontal"

        android:paddingTop="2dp">

 

        <RadioButton

            android:id="@+id/rb_function"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_function"

            android:text="@string/tab_function"/>

 

        <RadioButton

            android:id="@+id/rb_news_center"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_newscenter"

            android:text="@string/tab_news_center"/>

 

        <RadioButton

            android:id="@+id/rb_smart_service"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_smartservice"

            android:text="@string/tab_smart_service"/>

 

        <RadioButton

            android:id="@+id/rb_gov_affairs"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_govaffairs"

            android:text="@string/tab_gov_affairs"/>

 

        <RadioButton

            android:id="@+id/rb_setting"

            style="@style/main_tab_bottom"

            android:drawableTop="@drawable/icon_setting"

            android:text="@string/tab_setting"/>

    </RadioGroup>

 

</LinearLayout>

 

 

然后把Fragment放到Activity里面

getSupportFragmentManager().beginTransaction().add(R.id.fl_main_content,new MainFragment()).commitAllowingStateLoss();

 

 

 

 

然后把Fragment搞出来

public class MainFragment extends Fragment {

 

    private ViewPager mVp_content;

 

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_main, null);

 

//初始化一下ViewPager

        mVp_content = (ViewPager) view.findViewById(R.id.vp_main_content);

 

        return view;

    }

}

 

 

 

到这里应该都没问题吧!

 

 

然后就是Adapter了

 

我们创建MainContentViewPagerAdapter

继承PagerAdapter,里面4个方法对吧

这时候我们缺什么,缺数据啊!

我们现在是页面,怎么弄呢,往下走

 

我们得创建5个页面类,到时候给Adapter用

public class FunctionPage {

}

public class NewsPage {

}

public class ServicePage {

}

public class PoliticsPage {

}

public class SettingsPage {

}

 

 

 

然后我们回到Fragment,

我们得给ViewPager设置Adapter,初始化数据

onCreateView方法是初始化页面的,

所以我们把代码放到另一个方法中初始化数据

 

    @Override

    public void onActivityCreated(@Nullable Bundle savedInstanceState) {

        super.onActivityCreated(savedInstanceState);

        ArrayList<BasePage> pages = new ArrayList<>();

        pages.add(new FunctionPage());

        pages.add(new NewsPage());

        pages.add(new ServicePage());

        pages.add(new PoliticsPage());

        pages.add(new SettingsPage());

 

        mVp_content.setAdapter(new MainContentViewPagerAdapter(pages));

    }

 

这里要抽个基类BasePage

 

 

 

 

我们得把page弄好

page现在是普通类,我们是不能直接给Adapter的

Adapter需要的是什么,是view

那么我们就要把page搞成view

我们直接在BasePage里面搞,就不用一个个类来写了

 

public abstract class BasePage {

 

    private View mView;

 

    public BasePage(){

        mView = initView();

    }

 

//获取View的方法

    public View getRootView(){

        return mView;

    }

 

//让子类实现抽象方法去初始化View

    public abstract View initView();

}

 

然后我们的每个类都要去重写一下initView()方法

 

 

 

然后完成Adapter

 

public class MainContentViewPagerAdapter extends PagerAdapter {

 

    private List<BasePage> mList;

 

    public MainContentViewPagerAdapter(List<BasePage> list){

        mList=list;

    }

 

    @Override

    public int getCount() {

        return mList.size();

    }

 

    @Override

    public boolean isViewFromObject(View view, Object object) {

        return view==object;

    }

 

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView((View) object);

    }

 

    @Override

    public Object instantiateItem(ViewGroup container, int position) {

        View view = mList.get(position).getRootView();

        container.addView(view);

        return view;

    }

}

 

 

 

 

我们来给最简单的,就一个TextView

 

我们发现想要new TextView的话

没有context,

如果每个page都去拿,肯定太麻烦

那么我们就在构造方法里面去调用super

 

我们拿FunctionPage来举例

 

new FunctionPage(context);

想要new FunctionPage,就得往里面传context

 

然后这个context就进了FunctionPage的构造方法

    public FunctionPage(Context context) {

        super(context);

    }

 

然后调用super,传递到父类的构造方法

 

    public Context mContext;

 

    public BasePage(Context context){

        mContext=context;

        mView = initView();

    }

父类拿到context,给mContext

 

然后子类就可以拿到父类的mContext了

 

现在就可以用父类的mContext去new TextView了

 

    @Override

    public View initView() {

        TextView tv = new TextView(mContext);

        tv.setText(getClass().getSimpleName());

        return tv;

    }

 

 

 

现在我们最简单的ViewPager实现页面展示就完成了