android material design之Viewpager嵌套Viewpager,recycleview下拉刷新上拉加载

来源：互联网发布：java流的分类好难记编辑：程序博客网时间：2024/06/05 19:18

先看看效果图：

下边的是底部四个tab效果，一般app都有这个效果，是用tablayout 实现的，没什么好说的，主要是看下布局，可以看到往上拉，顶部appbar有部分隐藏掉了，而此时底部不在滑动布局中,布局如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.example.administrator.myapplication.activity.mio.MioActivity">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay"        android:visibility="gone">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:layout_scrollFlags="scroll|enterAlways"            app:popupTheme="@style/AppTheme.PopupOverlay" />    </android.support.design.widget.AppBarLayout>    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:background="@color/colorPrimary"        app:tabGravity="fill"        app:tabIndicatorHeight="0dp"        app:tabMode="fixed"        app:tabSelectedTextColor="#FF4081"        app:tabTextColor="#000"></android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/my_viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/tab_layout" /></RelativeLayout>

滚动的部分放在fragment中去，viewpager实现核心代码如下：

private void init_viewpager() {        viewPager = (ViewPager) findViewById(R.id.my_viewPager);        tabLayout = (TabLayout) findViewById(R.id.tab_layout);        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int position) {                if (position == 1) {                    return new TwoFragment();                } else if (position == 2) {                    return new ThreeFragment();                } else if (position == 3) {                    return new FourFragment();                }                return oneFragment;            }            @Override            public int getCount() {                return mTitles.length;            }            @Override            public CharSequence getPageTitle(int position) {                return mTitles[position];            }        });        tabLayout.setupWithViewPager(viewPager);        one = tabLayout.getTabAt(0);        two = tabLayout.getTabAt(1);        three = tabLayout.getTabAt(2);        four = tabLayout.getTabAt(3);        one.setIcon(getResources().getDrawable(R.mipmap.damenkou1));        one.setText(mTitles[0]);        two.setIcon(getResources().getDrawable(R.mipmap.damenkou1));        two.setText(mTitles[1]);        three.setIcon(getResources().getDrawable(R.mipmap.damenkou1));        three.setText(mTitles[2]);        four.setIcon(getResources().getDrawable(R.mipmap.damenkou1));        four.setText(mTitles[3]);    }

接着看圈子fragment 的实现吧，主要是一些材料设计控件的使用：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.example.administrator.myapplication.activity.mio.TwoFragment">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:elevation="0dp">        <TextView            android:id="@+id/fagment2_text"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/colorAccent"            android:padding="10dp"            android:text="列表明星"            android:textColor="@color/black_bg"            android:textSize="20sp"            app:layout_scrollFlags="scroll|enterAlways" />    </android.support.design.widget.AppBarLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.design.widget.TabLayout            android:id="@+id/circle_tab_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/black_overlay"            app:tabGravity="fill"            app:tabIndicatorColor="@color/black_title"            app:tabIndicatorHeight="1dp"            app:tabMode="fixed"></android.support.design.widget.TabLayout>        <android.support.v4.view.ViewPager            android:id="@+id/circle_viewPager"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_below="@id/circle_tab_layout" />    </LinearLayout>    ></android.support.design.widget.CoordinatorLayout>

app:layout_scrollFlags="scroll|enterAlways"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

第一行代码说明该控件是联动的，当往上拉动时他会被隐藏，第二行是说明那个控件和这个控件进行联动

可以看到tablayout 图片在左侧，其实tab是可以自定义的，只是个布局而已，实现核心代码：

tabLayout.setupWithViewPager(viewPager);        LayoutInflater mLayoutInflater = getActivity().getLayoutInflater();        for (int i = 0; i < 4; i++) {            TabLayout.Tab tab = tabLayout.getTabAt(i);            View view = mLayoutInflater.inflate(R.layout.circle_tab, null);            TextView text = (TextView) view.findViewById(R.id.tv);            text.setText(mTitles[i]);            ImageView image = (ImageView) view.findViewById(R.id.iv);            image.setImageResource(tabIcons[i]);            tab.setCustomView(view);        }

接下来就是如何实现下拉刷新和上拉加载啦，其实大家可以看到下拉就是官方的SwipeRefreshLayout控件，但官方并没有给出上拉加载的实现，需要我们自己去实现，这里我走了个捷径，在洪洋大神的recycleview万能适配器里就有相关的实现，推荐大家使用，大量节省去写adapter的开发时间

adapter = new CommonAdapter<String>(getActivity(), R.layout.lv_item, data) {            @Override            protected void convert(ViewHolder holder, String text, int position) {                holder.setText(R.id.lv_text, text);            }        };        //添加footer        loadMoreWrapper = new LoadMoreWrapper(adapter);        loadMoreWrapper.setLoadMoreView(R.layout.footer_view);        loadMoreWrapper.setOnLoadMoreListener(new LoadMoreWrapper.OnLoadMoreListener() {            @Override            public void onLoadMoreRequested() {                new Handler().postDelayed(new Runnable() {                    @Override                    public void run() {                        for (int i = 0; i < 10; i++) {                            data.add("load more:" + i);                        }                        loadMoreWrapper.notifyDataSetChanged();                    }                }, 2000);            }        });        recyclerView.setAdapter(loadMoreWrapper);

CommonAdapter就是万能适配，基本可以符合常用的场景，包括单类型和多个类型,LoadMoreWrapper是用来添加footer布局的，这个布局你想怎么写就怎么写，最后刷新适配器时去刷新

最后添加上项目下载的git地址:

https://github.com/yangyong915/app

这个里面包含了一些其他东西，如果你感兴趣，也可以去研究一些其他模块，谢谢！

0 0