使用Fragment+ViewPager，仿微信實現多頁Tab切換，fragmentviewpager

使用Fragment+ViewPager，仿實現多頁Tab切換，fragmentviewpager

我們今天實作類別似的首頁的滑動Tab效果：

              

郭霖有一篇部落格http://blog.csdn.net/guolin_blog/article/details/13171191，講過如何?，但是他的demo不能通過滑動切換，只能通過點擊按鈕切換。

通過viewpager，我們可以完全實現的效果。

先看看我的實現效果：

    

首頁面代碼

package com.example.fragmentdemo;import java.util.ArrayList;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.ImageView;import android.widget.TextView;/** * @author luyecong * */public class MainActivity extends FragmentActivity implements OnClickListener, OnPageChangeListener{private Fragment homeFragment = new HomeFragment();private Fragment settingFragment = new SettingFragment();private Fragment moreFragment = new MoreFragment();private View homeLayout;private View settingLayout;private View moreLayout;private ImageView homeImage;private ImageView settingImage;private ImageView moreImage;private TextView homeText;private TextView settingText;private TextView moreText;private ViewPager viewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initViews();final ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();fragmentList.add(homeFragment);fragmentList.add(settingFragment);fragmentList.add(moreFragment);viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(), fragmentList));viewPager.setOnPageChangeListener(this);setTabSelection(0);}/** * 在這裡擷取到每個需要用到的控制項的執行個體，並給它們設定好必要的點擊事件。 */private void initViews() {viewPager = (ViewPager) findViewById(R.id.content);homeLayout = findViewById(R.id.home_layout);settingLayout = findViewById(R.id.setting_layout);moreLayout = findViewById(R.id.more_layout);homeImage = (ImageView) findViewById(R.id.home_image);settingImage = (ImageView) findViewById(R.id.setting_image);moreImage = (ImageView) findViewById(R.id.more_image);homeText = (TextView) findViewById(R.id.home_text);settingText = (TextView) findViewById(R.id.setting_text);moreText = (TextView) findViewById(R.id.more_text);homeLayout.setOnClickListener(this);settingLayout.setOnClickListener(this);moreLayout.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.home_layout:setTabSelection(0);viewPager.setCurrentItem(0);break;case R.id.setting_layout:setTabSelection(1);viewPager.setCurrentItem(1);break;case R.id.more_layout:setTabSelection(2);viewPager.setCurrentItem(2);break;default:break;}}/** * 清除掉所有的選中狀態。 */private void clearSelection() {homeImage.setImageResource(R.drawable.tabbar_home);homeText.setTextColor(Color.parseColor("#82858b"));settingImage.setImageResource(R.drawable.tabbar_setting);settingText.setTextColor(Color.parseColor("#82858b"));moreImage.setImageResource(R.drawable.tabbar_more);moreText.setTextColor(Color.parseColor("#82858b"));}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {setTabSelection(arg0);}private void setTabSelection(int index) {// 每次選中之前先清楚掉上次的選中狀態clearSelection();switch (index) {case 0:// 當點擊了首頁tab時，改變控制項的圖片和文字顏色homeImage.setImageResource(R.drawable.tabbar_home_s);homeText.setTextColor(Color.BLUE);break;case 1:// 當點擊了語言設定tab時，改變控制項的圖片和文字顏色settingImage.setImageResource(R.drawable.tabbar_setting_s);settingText.setTextColor(Color.BLUE);break;case 2:// 當點擊了更多tab時，改變控制項的圖片和文字顏色moreImage.setImageResource(R.drawable.tabbar_more_s);moreText.setTextColor(Color.BLUE);break;case 3:default:break;}}}

package com.example.fragmentdemo;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;public class TabPagerAdapter extends FragmentStatePagerAdapter {private List<Fragment> list;public TabPagerAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getCount() {return list.size();}}

首頁面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:background="@drawable/tabbar_bg" >        <RelativeLayout            android:id="@+id/home_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:orientation="vertical" >                <ImageView                    android:id="@+id/home_image"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/tabbar_home" />                <TextView                    android:id="@+id/home_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:text="首頁"                    android:textColor="#82858b" />            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/setting_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:orientation="vertical" >                <ImageView                    android:id="@+id/setting_image"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/tabbar_setting" />                <TextView                    android:id="@+id/setting_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:text="語言設定"                    android:textColor="#82858b" />            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/more_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:orientation="vertical" >                <ImageView                    android:id="@+id/more_image"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:src="@drawable/tabbar_more" />                <TextView                    android:id="@+id/more_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal"                    android:text="更多"                    android:textColor="#82858b" />            </LinearLayout>        </RelativeLayout>    </LinearLayout></LinearLayout>

fragment的布局

<?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" >     <com.example.fragmentdemo.Title   android:id="@+id/title"   android:layout_height="50dp"   android:layout_width="fill_parent"   android:layout_alignParentTop="true" android:clickable="true"   android:focusable="true"/>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:orientation="vertical" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:padding="10dp"            android:text="這是首頁"            android:textSize="20sp" />    </LinearLayout></RelativeLayout>