TabHost+ViewPager+Fragment实现页面的滑动

qq_38952132

于 2018-06-12 17:29:18 发布

阅读量432

点赞数

文章标签： s's's's's's's's's's's's's's'

本文链接：https://blog.csdn.net/qq_38952132/article/details/80668517

版权

大家都知道TabHost是标签窗口控件需要放在layout的最外层，内部控件需要FrameLayout和widget标签栏，点击不同的标签，显示不同的标签页。TabHost有个好处就是标签页不仅可以放fragment，还可以放activity。当然这次的文章讲述是通过fragment来完成的。
如果我们在做项目中，在加入ViewPager这个控件实现标签栏和ViewPager的联动，就可以实现类似微信界面的滑动显示。

我们可以先看看ViewPager

ViewPager在app中经常看见，引导页的广告可以滑动，显示不同的内容，在主界面里的广告页也可以提高用户体验，所以这个控件非常重要。
我们可以看看ViewPager的控件内容

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

ViewPager是用到android v4包下的内容，v4包下有很多内容，经常用到的Fragment类不是用系统给的类而是V4包的Fragment比较常用。

ViewPager 需要数据源和对应的适配器

List< view> 和 PagerAdapter； List< Fragment> FragmentPagerAdapter2种放进视图页的形式
这次我们用第二种，定义好适配器。

public class viewpageradapter extends FragmentPagerAdapter {
    List list;
    public viewpageradapter(FragmentManager fm,List list) {
        super(fm);
        this.list=list;
    }

    @Override
    public Fragment getItem(int position) {
        Object fragment= list.get(position);
        return (Fragment) fragment;
    }

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

初始化好数据源

 private void addFragment() {
         list.add(new testFragment());
         list.add(new test_twofragment());
         list.add(new test_threefragment());
    }

然后实例化适配器，并用ViewPager建立适配器

 viewpageradapter=new viewpageradapter(getSupportFragmentManager(),list);
        viewPager.setAdapter(viewpageradapter);

这样ViewPager就做好了

之后定义三个Fragment类

public class testFragment extends android.support.v4.app.Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
          View view= inflater.inflate(R.layout.layout,container,false);
        return view;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }
}

第二个frament

package com.example.administrator.okio;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2018/6/12 0012.
 */

public class test_twofragment extends android.support.v4.app.Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View  view=inflater.inflate(R.layout.layouttwo,null);
        return   view;

    }
}

第三个fragment

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;

/**
 * Created by Administrator on 2018/6/12 0012.
 */

public class test_threefragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layoutthree,null);
        return view;
    }
}

对应的布局都很简单，就一个TextView，就不一一粘贴了。

主界面的布局文件

<?xml version="1.0" encoding="utf-8"?>
<TabHost
     android:id="@+id/tabhost"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
   <RelativeLayout

       android:layout_width="match_parent"
       android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
             android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/viewline"
            >
        </android.support.v4.view.ViewPager>
       <FrameLayout
           android:id="@android:id/tabcontent"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:visibility="gone">

       </FrameLayout>
       <View
           android:id="@+id/viewline"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:background="#cccccc"
           android:layout_above="@android:id/tabs"/>
       <TabWidget
           android:id="@android:id/tabs"
           android:layout_width="match_parent"
           android:layout_height="60dp"
           android:layout_alignParentBottom="true"

           >

       </TabWidget>
   </RelativeLayout>


</TabHost>

  private void initwidget() {
         String [] tab_name=new String[]{"主页","点餐","我的"};
         int [] tab_icon=new int[]{R.drawable.home_changed,R.drawable.msg_changed,R.drawable.me_changed};
        for (int index = 0; index <tab_name.length ; index++) {
            View view= LayoutInflater.from(MainActivity.this).inflate(R.layout.unit_tab,null,false);
            ImageView imageView=view.findViewById(R.id.tab_icon);
            TextView textView=view.findViewById(R.id.tab_txt);
            textView.setText(tab_name[index]);
            View views=view.findViewById(R.id.tab_bg);
             views.setBackgroundColor(Color.WHITE);
            imageView.setImageResource(tab_icon[index]); 
            tabHost.addTab(tabHost.newTabSpec(tab_name[index]).setIndicator(view).setContent((MainActivity.this)));//设置标签内容，因为内容是放在framelayout里面的，因为不需要，但是必须要带入这个参数，就随便加入一个view，反正也不显示。
        }


    }

标签栏每个标签都是一个视图单元，需要对单元布局进行定义，设置内容，最后通过TabHost对象的addTab方法加入标签，完成标签的添加。

最后设置ViewPager的监听事件和TabHost的监听事件

private void setListern() {
         tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
             @Override
             public void onTabChanged(String tabId) {
                         int position=    tabHost.getCurrentTab();
                         viewPager.setCurrentItem(position);
             }
         });
         viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
             @Override
             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

             }

             @Override
             public void onPageSelected(int position) {
                 tabHost.setCurrentTab(position);

             }

             @Override
             public void onPageScrollStateChanged(int state) {

             }
         });

    }

那么联动效果就可以达成了

这里写图片描述

作者:何钰莹
原文地址：[点击这里] (https://blog.csdn.net/qq_38952132/article/details/80668517)

qq_38952132

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TabHost+ViewPager+Fragment实现页面的滑动

大家都知道TabHost是标签窗口控件需要放在layout的最外层，内部控件需要FrameLayout和widget标签栏，点击不同的标签，显示不同的标签页。TabHost有个好处就是标签页不仅可以放fragment，还可以放activity。当然这次的文章讲述是通过fragment来完成的。如果我们在做项目中，在加入ViewPager这个控件实现标签栏和ViewPager的联动，就可以实现类...
复制链接

扫一扫