关闭

TabLayout 和ViewPager和Fragment的多页面滑动(主要实现一个水平的布局用来展示Tabs加上ViewPager实现联动效果)

标签: TabLayout ViewpageFragment
328人阅读 评论(0) 收藏 举报


主要实现一个类似于头条最上面的水平的布局,可以拉动如:


      然后ViewPager主要负责实现展示LisyView条目,   代码如下 一步步开始:




首先导入依赖:    


compile 'com.android.support:design:26.0.0-alpha1'



接下来就是布局:


           

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="daylx0911.day0913tablayoutviewpager.MainActivity">


    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab"
        app:tabGravity="center"
                                         // 改变指示器下标的颜色
        app:tabIndicatorColor="#ff0"
                                         //改变整个TabLayout的颜色
        android:background="#000"
                                         //改变选中字体的颜色
        app:tabSelectedTextColor="#ff0000"
                                          //改变未选中字体的颜色
        app:tabTextColor="#aaa"
                                          //默认是fixed 固定的 标签很多时候会被挤压 不能滑动
                                          //scrollable 可以滑动的
        app:tabMode="scrollable"
                                          //改变指示器下标的高度
        app:tabIndicatorHeight="4dp"
        />

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pager"
        />

</LinearLayout>

====================================================================

MainActivity代码如下:


public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager pa;
    private List<String> list=new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //查找控件
        tab = (TabLayout) findViewById(R.id.tab);
        pa = (ViewPager) findViewById(R.id.pager);
       //tab的标题
        list.add("头条");
        list.add("社会");
        list.add("国内");
        list.add("国际");
        list.add("娱乐");
        list.add("体育");
        list.add("军事");
        list.add("科技");
        list.add("财经");
        list.add("时尚");
         //tablayout和viewpager关联
        tab.setupWithViewPager(pa);
        //设置viewpager适配器
        pa.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //重写这个方法,将设置每个Tab的标题
            @Override
            public CharSequence getPageTitle(int position) {

                return list.get(position);
            }

            @Override
            public Fragment getItem(int position) {
                //一般我们在这个位置对比一下标题是什么,,,然后返回对应的fragment
                //初始化fragment  对应position有多少,fragment有多少
                NewFragment newFragment = new NewFragment();
                Bundle bundle = new Bundle();
                if (list.get(position).equals("头条")){
                    bundle.putString("name","top");
                }else if (list.get(position).equals("社会")){
                    bundle.putString("name","shehui");
                }else if (list.get(position).equals("国内")){
                    bundle.putString("name","guonei");
                }else if (list.get(position).equals("国际")){
                    bundle.putString("name","guoji");
                }else if (list.get(position).equals("娱乐")){
                    bundle.putString("name","yule");
                }else if (list.get(position).equals("体育")){
                    bundle.putString("name","tiyu");
                }else if (list.get(position).equals("军事")){
                    bundle.putString("name","junshi");
                }else if (list.get(position).equals("科技")){
                    bundle.putString("name","keji");
                }else if (list.get(position).equals("财经")){
                    bundle.putString("name","caijing");
                }else if (list.get(position).equals("时尚")){
                    bundle.putString("name","shishang");
                }
                //给fragment 加bundle 数据
                //activity与fragment 1.getset,2.接口回调,3.setArguments ,getAraguments
                newFragment.setArguments(bundle);
                return newFragment;
            }

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



    }
}

=========================================================================================

Fragment  类:

public class NewFragment extends Fragment {

    private ListView list;

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

        //找到布局文件
        View v = View.inflate(getActivity(), R.layout.listview, null);
        //ListView控件
        list = (ListView)v.findViewById(R.id.list);

        return v;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Bundle bundle = getArguments();
        //接收传递过来的值
        String string = bundle.getString("name", "top");
        //调用解析方法
        Jiexi(string);

    }
        //解析方法
    private void Jiexi(final String string) {
       //使用异步
        new AsyncTask<String,Integer,String>(){

            @Override
            protected String doInBackground(String... strings) {
                String str="";
                try {
                    URL url = new URL("http://v.juhe.cn/toutiao/index?type=" + string + "&key=597b4f9dcb50e051fd725a9ec54d6653");
                    HttpURLConnection conne= (HttpURLConnection) url.openConnection();

                    conne.setConnectTimeout(5000);
                    conne.setReadTimeout(5000);
                    int responseCode = conne.getResponseCode();
                    if (responseCode==200){
                        InputStream in = conne.getInputStream();

                        byte[] by=new byte[1024];
                        int len=0;

                        while ((len=in.read(by))!=-1){
                            str+=new String(by,0,len);
                        }

                    }
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }

                return str;
            }

            @Override
            protected void onPostExecute(String s) {
                //Gson解析
                Gson gson = new Gson();
                User user = gson.fromJson(s, User.class);
                List<User.ResultBean.DataBean> data = user.getResult().getData();
                //listview适配器
                Myadpader myadpader = new Myadpader(data, getActivity());
                list.setAdapter(myadpader);
                super.onPostExecute(s);
            }
        }.execute();

    }

}

最后实现的效果:
                     这样写的好处是不需要写多个Fragment就可以实现多个不同的数据变化,只要滑动上面的Tab控件就可以变化数据
            省的写好多继承Fragment的类
     


1
0
查看评论

TabLayout、ViewPager和Fragment的多页面滑动

TabLayout、ViewPager和Fragment的多页面滑动
  • fumier
  • fumier
  • 2015-07-07 19:02
  • 13360

Design下的TabLayout和Fragment和ViewPager联动的简单使用

首先介绍下TabLayout,实际开发中我们经常需要用到Viewpager,而已需要跟头部的Tab实现联动效果。而Design的出现,给我们一种更加方便的UI框架去实现这种效果。今天就介绍它与Viewpager和Fragment之间的联动效果。首先需要先有design包: 之后我们的build...
  • Tracy1024
  • Tracy1024
  • 2016-08-25 22:06
  • 1626

Android之TabLayout+ViewPager+Fragment实现标题栏与页面联动

TabLayout组件的使用 主界面activity_main.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sch...
  • xingxingchance
  • xingxingchance
  • 2017-11-24 16:54
  • 338

TabLayout+Fragment+ViewPager联合使用

首先是activity_main.xml文件,定义主要的界面,因为我用了FloatingActionBar,所以最外层用的是CoordinatorLayout,在这里面嵌入一个LinearLayout,在LinearLayout中放入TabLayout和ViewPager。在TabLayout中ap...
  • u013511711
  • u013511711
  • 2016-03-09 18:11
  • 3266

TabLayout和ViewPager的联动使用

在Android的开发当中Tablayout和Viewpager的混合使用是很多的,他们两个是一对不折不扣的好基友,下面介绍一下他们的用法。 1.TabLayout的用法: 由于TabLayout是在design包下的所以要导包,这里只介绍Android studio是如何导包的,如下(在bui...
  • ZhangLei280
  • ZhangLei280
  • 2016-01-02 18:19
  • 5514

viewpager+fragment的懒加载实现微信点击和滑动切换功能(切换效果)

前言 1.从上一片文章之后已经半年没有写文章了,那篇文章之后公司进入疯狂的加班,一直到放年假。年后回来之后换了一家创业公司之后,然后又进入疯狂的加班(≧﹏ ≦) …所以一直都没有写文章(其实这都是借口⊙﹏⊙)。现在公司没有那么忙了,也该把文章捡起来了,这毕竟是百利有一害的事(一害:费时间)。 ...
  • csdnFML
  • csdnFML
  • 2016-06-28 12:33
  • 4096

Android导航中Fragment里实现ViewPager滑动和RadioButton单击事件

一、首先写好XML导航页布局,没有布局,怎么看效果,俗话说的好:有图有真相! 1、导航页布局,代码中RadioButton中有2自定义选择器,点击换图和点击文字变色 <RelativeLayout xmlns:android="http://schemas.android.com...
  • Android53_CSDN
  • Android53_CSDN
  • 2016-08-20 10:56
  • 910

ViewPager+TabLayout(谷歌支持包)实现联动效果

ViewPager+TabLayout(谷歌支持包)实现联动效果
  • jiaoyaning1210
  • jiaoyaning1210
  • 2016-04-11 16:34
  • 1154

不用ViewPager和Fragment实现滑动页面的效果

这是一篇被逼出来的文章。 一入SDK深似海,从此jar包是路人,没错,你以为我愿意不用ViewPager和Fragment啊,因为SDK为了减少包体大小不能用v4的包啊!坑爹的v4包居然有1M多,你们可真能写啊。我相信一定有朋友会建议说,把v4包里相关的类抠出来用啊,呵呵哒,祝你抠的愉快。言归正传...
  • amurocrash
  • amurocrash
  • 2016-11-04 11:10
  • 1064

ViewPager+Fragment实现页卡切换

现在很多的APP都是这种ui设计模式,在实际开发中经常使用,所以以前我也写过类似的,但基本都是拿来主义,现在正好又遇到了,也不是很复杂,所以就试着自己写一个。   首先是Activity的布局代码:   <?xml version="1.0" encoding=&quo...
  • mouse12138
  • mouse12138
  • 2016-05-13 18:12
  • 877
    个人资料
    • 访问:13464次
    • 积分:794
    • 等级:
    • 排名:千里之外
    • 原创:67篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论