使用FragmentTabHost+Fragment+viewpager 实现滑动分页

来源：互联网发布：蔡京书法知乎编辑：程序博客网时间：2024/04/30 01:25

之前分页效果一直用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 91011121314151617181920212223242526

<?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 99100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150

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 91011121314151617

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 91011121314

<?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" >    <ImageView        android:id="@+id/imageview"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scaleType="fitCenter"        android:src="@drawable/xianjian01" >    </ImageView></LinearLayout>

0 0