安卓开发：使用ViewPager+Fragment实现选项卡

选项卡是很多app应有的。使用ViewPager+Fragment实现选项卡相对来说也是容易一点。实现的效果如下：

新建activity_main.xml：

<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=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/chat"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="聊天"
            android:textColor="#000000"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/friend"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="好友"
            android:textColor="#000000"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/find"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="发现"
            android:textColor="#000000"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/setting"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="设置"
            android:textColor="#000000"
            android:textSize="20dp" />
    </LinearLayout>

    <!-- ViewPager标签 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:flipInterval="30" />
</LinearLayout>

代码很简单，就是四个textView【相当于选项卡的表头】，加上一个Viewpager控件。

在为四个选项卡分别新建一个xml：
fragment_chat.xml：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="聊天" />

</LinearLayout>

fragment_friend.xml：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="好友" />

</LinearLayout>

fragment_find.xml：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="发现" />

</LinearLayout>

fragment_setting.xml：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="设置" />

</LinearLayout>

然后分别新建ChatFragment、FriendFragment、FindFragment、SettingFragment，然后为每个Fragment加载对应的xml。这里就加载一个xml好了。

public class ChatFragment extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_chat, null);
        return view;
    }
}

新建MainActivity.java：

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.TextView;

import aiden.ichat.R;
import aiden.ichat.base.BaseActivity;
import aiden.ichat.fragment.ChatFragment;
import aiden.ichat.fragment.FindFragment;
import aiden.ichat.fragment.FriendFragment;
import aiden.ichat.fragment.SettingFragment;

/**
 * Created by Aiden on 2016/1/11.
 */
public class MainActivity extends BaseActivity implements View.OnClickListener{
    private ViewPager viewPager;
    private static final int count = 4; // 四个选项卡
    private int current_index = 0; // 设置当前页为0，即为聊天界面

    private TextView chat, friend, find, setting; // 分别获取四个textView

    private ChatFragment chatFragment; // 四个fragment
    private FriendFragment friendFragment;
    private FindFragment findFragment;
    private SettingFragment settingFragment;

    private TextView[] titles; // 四个textView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        chatFragment = new ChatFragment();
        friendFragment = new FriendFragment();
        findFragment = new FindFragment();
        settingFragment = new SettingFragment();

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        chat = (TextView) this.findViewById(R.id.chat);
        chat.setOnClickListener(this);
        friend = (TextView) this.findViewById(R.id.friend);
        friend.setOnClickListener(this);
        find = (TextView) this.findViewById(R.id.find);
        find.setOnClickListener(this);
        setting = (TextView) this.findViewById(R.id.setting);
        setting.setOnClickListener(this);

        titles = new TextView[]{chat, friend, find, setting};

        // 新建适配器
        viewPager.setAdapter(new MyFragmentPagerAdapter(this.getSupportFragmentManager()));
        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

    // 选中的选项卡的字体要发生改变
    public void changeItem(int position) {
        titles[current_index].setTextColor(Color.BLACK);
        titles[position].setTextColor(Color.rgb(255, 157, 119));
        current_index = position;
    }

	// 实现点击事件的监听，如果点了某个标题，则改变Fragment
    @Override
    public void onClick(View v) {
        if(v == chat) {
            viewPager.setCurrentItem(0);
            changeItem(0);
        }
        else if(v == friend) {
            viewPager.setCurrentItem(1);
            changeItem(1);
        }
        else if(v == find) {
            viewPager.setCurrentItem(2);
            changeItem(2);
        }
        else if(v == setting) {
            viewPager.setCurrentItem(3);
            changeItem(3);
        }
    }

    // 继承适配器
    class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return count;
        }
		// 重写getItem9)方法，用于显示Fragment
        @Override
        public android.support.v4.app.Fragment getItem(int index) //返回BaseFragment
        {
            if (index == 0)
                return chatFragment;
            else if (index == 1)
                return friendFragment;
            else if (index == 2)
                return findFragment;
            else if (index == 3)
                return settingFragment;
            else
                return null;
        }
    }

    // 继承选项页改变事件
    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
		// 重写选项卡发生变化的方法
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            changeItem(position);
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}