三：tabLayout与ViewPager联动使用

来源：互联网发布：大国崛起英国知乎编辑：程序博客网时间：2024/05/18 21:42

去财务开了下去年网费用的发票，被告知只有周五才能开生了我一肚子气，得出一个结论所有事业单位的财务就没有好东西，然后气鼓鼓的回来继续撸代码，之前实现的是一组菜单，接着再来实现第一个模块新闻列表，今天先把ViewPage的框架搞好，实现好之后是这个样子的：

其实本来只用ViewPager也能实现类似的效果，不过既然Material Design中对此有定义了，那么还是要遵守一下的，况且由于谷歌提供了TabLayout这个控件，所以实现起来非常方便，何乐而不为呢。首先借助最初的抽屉布局XML文件，可以参考之前这篇博文，里面已经给出布局代码了。就是当初的activity_menu.xml当然这里因为我发现这个布局会被反复用到就给他改了名字。

然后在Activity中引用。

package com.dlmu.panda.news;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.support.v7.app.AppCompatActivity;import com.dlmu.panda.cat.R;/** * Created by panda on 2016/5/15. */public class NewsActivity extends AppCompatActivity {    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_drawer);        NewsFragment news = new NewsFragment();        FragmentManager fm = getSupportFragmentManager();        FragmentTransaction transaction = fm.beginTransaction();        transaction.add(R.id.content_frame,news).commit();    }}

设计是主要内容用来显示ViewPager，ViewPager里面做新闻列表，侧滑抽屉用来实现搜索功能这里先不处理。先把整个框架搭起来，XML如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <RelativeLayout        android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/primary">        <LinearLayout            android:orientation="horizontal"            android:layout_width="72dp"            android:layout_height="match_parent"            android:layout_alignParentLeft="true"            android:id="@+id/linearLayout">            <ImageView                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_margin="16dp"                android:src="@drawable/ic_arrow_back_white_18dp"/>        </LinearLayout>        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_toRightOf="@+id/linearLayout"            android:layout_toLeftOf="@+id/linearLayout2"            android:layout_marginRight="22dp"            android:gravity="center_vertical"            android:text="物流资讯"            android:textColor="#ffffff"            android:textSize="18sp">        </TextView>        <LinearLayout            android:orientation="horizontal"            android:layout_width="50dp"            android:layout_height="match_parent"            android:layout_alignParentTop="true"            android:layout_alignParentRight="true"            android:layout_alignParentEnd="true"            android:id="@+id/linearLayout2">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="16dp"                android:src="@drawable/ic_search_white_18dp"/>        </LinearLayout>    </RelativeLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.design.widget.TabLayout            android:layout_width="match_parent"            android:layout_height="48dp"            android:background="@color/darkPrimary"            android:id="@+id/tabs"            app:tabIndicatorColor="#87ffffff"            app:tabIndicatorHeight="2dp"            app:tabTextColor="#87ffffff"            app:tabSelectedTextColor="#54ffffff"            app:tabMode="scrollable" />        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1" />    </LinearLayout></LinearLayout>

设计窗口给出的界面是这个样子的：

然后在Fragment中为tablayout加入标签：

package com.dlmu.panda.news;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.dlmu.panda.cat.R;import java.util.ArrayList;import java.util.List;/** * Created by panda on 2016/5/16. */public class NewsFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment_news_viewpager,container,false);        TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);        return view;    }}

此时运行就会发现显示出六个tab标签了。

然后可以先实现一个Fragment，如下：

package com.dlmu.panda.news;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.dlmu.panda.cat.R;/** * Created by panda on 2016/5/16. */public class NewsListFragment extends Fragment {    View view;    int pid;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment_list,container,false);        TextView tv = (TextView) view.findViewById(R.id.textView);        tv.setText("栏目id是"+String.valueOf(pid));        return view;    }    public NewsListFragment(int pid){        this.pid = pid;    }}

接着在NewsFragment中定义如下全局变量：

    View view;    ViewPager vp;    FragmentPagerAdapter adapter;    List<Fragment> list_fragment;    List<String> list_title;

定义Adapter用于配置ViewPager：

    public class NewsAdapter extends FragmentPagerAdapter {        private List<Fragment> list_fragment;                         //fragment列表        private List<String> list_Title;                              //tab名的列表        public NewsAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title) {            super(fm);            this.list_fragment = list_fragment;            this.list_Title = list_Title;        }        @Override        public Fragment getItem(int position) {            return list_fragment.get(position);        }        @Override        public int getCount() {            return list_Title.size();        }        //此方法用来显示tab上的名字        @Override        public CharSequence getPageTitle(int position) {            return list_Title.get(position % list_Title.size());        }    }

对viewpager进行配置，代码如下：

TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);        vp = (ViewPager) view.findViewById(R.id.viewpager);        NewsListFragment f1 = new NewsListFragment(1);        NewsListFragment f2 = new NewsListFragment(2);        NewsListFragment f3 = new NewsListFragment(3);        NewsListFragment f4 = new NewsListFragment(4);        NewsListFragment f5 = new NewsListFragment(5);        NewsListFragment f6 = new NewsListFragment(6);        list_title = new ArrayList<>();        list_title.add("通知通告");        list_title.add("物流动态");        list_title.add("地方新闻");        list_title.add("政策法规");        list_title.add("展会信息");        list_title.add("国际视野");        list_fragment = new ArrayList<>();        list_fragment.add(f1);        list_fragment.add(f2);        list_fragment.add(f3);        list_fragment.add(f4);        list_fragment.add(f5);        list_fragment.add(f6);        adapter = new NewsAdapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);        vp.setAdapter(adapter);

这时候viewpager已经是可以使用的了，但是还不够，使用如下代码把tabs和viewpager进行绑定：

tabLayout.setupWithViewPager(vp);

为了方便大家使用，再把完整的代码贴一遍：

package com.dlmu.panda.news;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.dlmu.panda.cat.R;import java.util.ArrayList;import java.util.List;/** * Created by panda on 2016/5/16. */public class NewsFragment extends Fragment {    View view;    ViewPager vp;    FragmentPagerAdapter adapter;    List<Fragment> list_fragment;    List<String> list_title;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.fragment_news_viewpager,container,false);        TabLayout tabLayout= (TabLayout) view.findViewById(R.id.tabs);        tabLayout.addTab(tabLayout.newTab().setText("通知通告"), true);//添加 Tab,默认选中        tabLayout.addTab(tabLayout.newTab().setText("物流动态"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("地方新闻"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("政策法规"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("展会信息"),false);//添加 Tab,默认不选中        tabLayout.addTab(tabLayout.newTab().setText("国际视野"),false);        vp = (ViewPager) view.findViewById(R.id.viewpager);        NewsListFragment f1 = new NewsListFragment(1);        NewsListFragment f2 = new NewsListFragment(2);        NewsListFragment f3 = new NewsListFragment(3);        NewsListFragment f4 = new NewsListFragment(4);        NewsListFragment f5 = new NewsListFragment(5);        NewsListFragment f6 = new NewsListFragment(6);        list_title = new ArrayList<>();        list_title.add("通知通告");        list_title.add("物流动态");        list_title.add("地方新闻");        list_title.add("政策法规");        list_title.add("展会信息");        list_title.add("国际视野");        list_fragment = new ArrayList<>();        list_fragment.add(f1);        list_fragment.add(f2);        list_fragment.add(f3);        list_fragment.add(f4);        list_fragment.add(f5);        list_fragment.add(f6);        adapter = new NewsAdapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);        vp.setAdapter(adapter);        tabLayout.setupWithViewPager(vp);        return view;    }    public class NewsAdapter extends FragmentPagerAdapter {        private List<Fragment> list_fragment;                         //fragment列表        private List<String> list_Title;                              //tab名的列表        public NewsAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title) {            super(fm);            this.list_fragment = list_fragment;            this.list_Title = list_Title;        }        @Override        public Fragment getItem(int position) {            return list_fragment.get(position);        }        @Override        public int getCount() {            return list_Title.size();        }        //此方法用来显示tab上的名字        @Override        public CharSequence getPageTitle(int position) {            return list_Title.get(position % list_Title.size());        }    }}

实现的效果就不再贴图了，大家开心就好。

0 0