Fragment和ViewPager的简单使用

来源：互联网发布：湖州公务员网络学堂编辑：程序博客网时间：2024/06/06 02:54

先上效果图
这里写图片描述

四个页面对应4个Fragment，通过ViewPager展示在主Activity中，支持最有滑动切换以及底部按钮点击切换Fragment。

一、创建fragment

以MessageFragment为例，继承下面方法设置布局

@Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.message_layout, container, false);    }

布局文件如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent">    <LinearLayout        android:orientation="vertical"        android:layout_centerInParent="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:src="@drawable/message_selected"/>        <TextView            android:padding="10dp"            android:text="这是消息界面"            android:textSize="20sp"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"/>    </LinearLayout></RelativeLayout>

二、主Activity布局

主布局包括ViewPage展示和底部按钮：<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.fragment2.MainActivity">    <android.support.v4.view.ViewPager        android:layout_weight="1"        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="0dp"></android.support.v4.view.ViewPager>    <LinearLayout        android:background="@drawable/tab_bg"        android:layout_width="match_parent"        android:layout_height="60dp">        <RelativeLayout            android:id="@+id/message_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent">            <LinearLayout                android:layout_centerVertical="true"                android:orientation="vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">                <ImageView                    android:id="@+id/message_image"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/message_unselected"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>                <TextView                    android:layout_gravity="center_horizontal"                    android:id="@+id/message_txt"                    android:text="消息"                    android:textColor="#82858b"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/contacts_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent">            <LinearLayout                android:layout_centerVertical="true"                android:orientation="vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">                <ImageView                    android:id="@+id/contacts_image"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/message_unselected"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>                <TextView                    android:layout_gravity="center_horizontal"                    android:id="@+id/contacts_txt"                    android:text="联系人"                    android:textColor="#82858b"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/news_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent">            <LinearLayout                android:layout_centerVertical="true"                android:orientation="vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">                <ImageView                    android:id="@+id/news_image"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/message_unselected"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>                <TextView                    android:layout_gravity="center_horizontal"                    android:id="@+id/news_txt"                    android:text="动态"                    android:textColor="#82858b"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/setting_layout"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent">            <LinearLayout                android:layout_centerVertical="true"                android:orientation="vertical"                android:layout_width="match_parent"                android:layout_height="wrap_content">                <ImageView                    android:id="@+id/setting_image"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/message_unselected"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>                <TextView                    android:layout_gravity="center_horizontal"                    android:id="@+id/setting_txt"                    android:text="设置"                    android:textColor="#82858b"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"/>            </LinearLayout>        </RelativeLayout>    </LinearLayout></LinearLayout>

三、绑定Fragment和ViewPager

        messageFragment = new MessageFragment();        newsFragment = new NewsFragment();        contactsFragment = new ContactsFragment();        settingFragment = new SettingFragment();        fragmentlist = new ArrayList<Fragment>();        fragmentlist.add(messageFragment);        fragmentlist.add(contactsFragment);        fragmentlist.add(newsFragment);        fragmentlist.add(settingFragment);

m_viewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));

private class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter {        public MyFrageStatePagerAdapter(android.support.v4.app.FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return fragmentlist.get(position);        }        @Override        public int getCount() {            return fragmentlist.size();        }        @Override        public void finishUpdate(ViewGroup container) {            super.finishUpdate(container);            int currentItem=m_viewPager.getCurrentItem();            if (currentItem==currenttab) return;            setTabSelection(currentItem); //滑动时更新底部按钮背景            currenttab=currentItem;        }    }

m_viewPager.setCurrentItem(desTab); 点击按钮切换画面

demo地址：http://download.csdn.net/detail/u013795543/9706876

0 0