45fan.com - 路饭网

搜索: 您的位置：主页 > 手机频道 > 阅读资讯：怎么样使用FragmentTabHost+Fragment+viewpager实现滑动分页功能？

怎么样使用FragmentTabHost+Fragment+viewpager实现滑动分页功能？

2016-08-29 19:53:33 来源:www.45fan.com 【大 中 小】

怎么样使用FragmentTabHost+Fragment+viewpager实现滑动分页功能？

之前分页效果一直用TabActivity+TabHost，但是android3.0后就不在推荐使用了，而是推荐使用Fragment，经过研究加参考其他朋友代码实现了滑动分页的效果，代码简单附上。

主页面的布局文件 main_tab_layout.xml ， 使用ViewPager+FragmentTabHost

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

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

  <FrameLayout
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

  <android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/maintab_toolbar_bg" >

    <FrameLayout
      android:id="@android:id/tabcontent"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_weight="0" />
  </android.support.v4.app.FragmentTabHost>

</LinearLayout>

tab按钮的不加文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="vertical" >

  <ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:padding="3dp" 
    android:src="@drawable/tab_home_btn">
  </ImageView>

  <TextView
    android:id="@+id/textview"    
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="首页"
    android:textSize="10sp"
    android:textColor="#ffffff">
  </TextView>

</LinearLayout>

主页面 MainActivity

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
package com.yangyu.mycustomtab02;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TabWidget;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

/**
 * @author yangyu 功能描述：自定义TabHost ——使用FragmentTabHost+Fragment+viewpager 实现滑动分页
 */
public class MainTabActivity extends FragmentActivity {
  // 定义FragmentTabHost对象
  private FragmentTabHost mTabHost;
  // 定义一个布局
  private LayoutInflater layoutInflater;
  // 定义数组来存放Fragment界面
  private Class fragmentArray[] = { FragmentPage1.class, FragmentPage2.class,
      FragmentPage3.class, FragmentPage4.class, FragmentPage5.class };
  // 定义数组来存放按钮图片
  private int mImageViewArray[] = { R.drawable.tab_home_btn,
      R.drawable.tab_message_btn, R.drawable.tab_selfinfo_btn,
      R.drawable.tab_square_btn, R.drawable.tab_more_btn };
  // Tab选项卡的文字
  private String mTextviewArray[] = { "首页", "消息", "好友", "广场", "更多" };
  private ViewPager vp;
  private List<Fragment> list = new ArrayList<Fragment>();
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_tab_layout);
    initView();
    initPager();
  }
  /**
   * 初始化组件
   */
  private void initView() {
     vp = (ViewPager) findViewById(R.id.pager);
     vp.setOnPageChangeListener(new ViewPagerListener());
    // MyAdapter adapter = new MyAdapter();
    // vp.setAdapter(adapter);
    // 实例化布局对象
    layoutInflater = LayoutInflater.from(this);
    // 实例化TabHost对象，得到TabHost
    mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    // 得到对象后，初始化
    mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);
     mTabHost.setOnTabChangedListener(new TabHostListener());
    // 得到fragment的个数
    int count = fragmentArray.length;

    for (int i = 0; i < count; i++) {
      // 为每一个Tab按钮设置图标、文字和内容
      TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i])
          .setIndicator(getTabItemView(i));
      // 将Tab按钮添加进Tab选项卡中
      mTabHost.addTab(tabSpec, fragmentArray[i], null);
      mTabHost.setTag(i);
      // 设置Tab按钮的背景
      mTabHost.getTabWidget().getChildAt(i)
          .setBackgroundResource(R.drawable.selector_tab_background);
    }
  }
  private void initPager() {
    FragmentPage1 p1 = new FragmentPage1();
    FragmentPage2 p2 = new FragmentPage2();
    FragmentPage3 p3 = new FragmentPage3();
    FragmentPage4 p4 = new FragmentPage4();
    FragmentPage5 p5 = new FragmentPage5();
    list.add(p1);
    list.add(p2);
    list.add(p3);
    list.add(p4);
    list.add(p5);
    vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
  }
  /**
   * 给Tab按钮设置图标和文字
   */
  private View getTabItemView(int index) {
    View view = layoutInflater.inflate(R.layout.tab_item_view, null);
    ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
    imageView.setImageResource(mImageViewArray[index]);
    TextView textView = (TextView) view.findViewById(R.id.textview);
    textView.setText(mTextviewArray[index]);
    return view;
  }

  private class TabHostListener implements OnTabChangeListener {
    @Override
    public void onTabChanged(String tabId) {
      int position = mTabHost.getCurrentTab();
      vp.setCurrentItem(position);
    }
  }
  class MyAdapter extends FragmentPagerAdapter {

    public MyAdapter(FragmentManager fm) {
      super(fm);
      // TODO Auto-generated constructor stub
    }

    @Override
    public Fragment getItem(int arg0) {
      return list.get(arg0);
    }

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

  }

  class ViewPagerListener implements OnPageChangeListener {
    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageSelected(int index) {
      TabWidget widget = mTabHost.getTabWidget();
      int oldFocusability = widget.getDescendantFocusability();
      widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
      mTabHost.setCurrentTab(index);
      widget.setDescendantFocusability(oldFocusability);
    }
  }
}

几个Fragment就很简单了， 只显示一直图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 
package com.yangyu.mycustomtab02;

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

public class FragmentPage1 extends Fragment{

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

    return inflater.inflate(R.layout.fragment_1, null);   
  }  
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q

本文地址：http://www.45fan.com/a/luyou/69507.html
Tags： 实现 滑动
编辑：路饭网
  • 上一篇：Com技术入门知识
  • 下一篇：IT业经典谎言大全
    • 相关文章列表
    推广内容
    推荐阅读
    热门推荐
    推荐文章
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部

    Copyright ©2012-2013 . 版权所有  

    路饭网|路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 www.45Fan.com