我们今天实现类似微信的首页的滑动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;
@Override
protected 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);
}
@Override
public 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"));
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public 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;
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public 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>