Android 滾動Tab

先看效果:

若是對效果感興趣, 請耐心看完, 其實不復雜.

須要android-support-v4.jar的支持.

---

主佈局文件activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:paddingBottom="4dp"
        android:paddingTop="4dp"
        android:textColor="#fff" />
</android.support.v4.view.ViewPager>

---

主Activity, 核心是給mViewPager設置一個Adapter--mFragmentAdapter

public class MainActivity extends FragmentActivity {
    private FragmentAdapter mFragmentAdapter;
    private ViewPager mViewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mFragmentAdapter = new FragmentAdapter(MainActivity.this, getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mFragmentAdapter);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

---

接下來看看FragmentAdapter如何實現的.

public class FragmentAdapter extends FragmentPagerAdapter {
    private Context mContext;
    public FragmentAdapter(Context context, FragmentManager fm) {
        super(fm);
        mContext = context;
    }
    @Override
    public Fragment getItem(int position) {
        Fragment fragment;
        if (position == 2) {
            fragment = new AboutMeFragment();
        } else {
            fragment = new TabFragment();
            Bundle args = new Bundle();
            args.putInt(TabFragment.TAB_POSITION, position + 1);
            fragment.setArguments(args);
        }
        return fragment;
    }
    @Override
    public int getCount() {
        return 3;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        if (position == 2) {
            return mContext.getString(R.string.about_me_title);
        } else {
            Locale l = Locale.getDefault();
            return mContext.getString(R.string.tab_fragment_title, position + 1).toUpperCase(l);
        }
    }
}

在getCount()裏面設置了3個Tab頁, 等position==2的時候也就是最後一個頁, 我設置了一個不一樣於前兩個頁的about_me頁面. 主要是表示: 能夠根據須要設置不一樣類型的Fragment到Adapter裏面. 這裏兩種Fragment分別是TabFragment()和AboutMeFragment()

---

TabFragment的佈局文件只有一個TextView, 就不貼了, 直接看java文件

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.lichen.remind.R;
public class TabFragment extends Fragment {
    public static final String TAB_POSITION = "tab_position";
    public TabFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        TextView tabLabel = (TextView) rootView.findViewById(R.id.tab_label);
        tabLabel.setText(getString(R.string.tab_fragment_content, getArguments().getInt(TAB_POSITION)));
        return rootView;
    }
}

---

AboutMeFragment的佈局文件fragment_tab.xml, 其實也一個TextView, 不過使用了android:drawableTop=""屬性.

<?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:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/me"
        android:text="@string/about_me_email"/>
</LinearLayout>

而後是AboutMeFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.lichen.remind.R;
public class AboutMeFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_about_me,container, false);
        return rootView;
    }
}

---

資源文件strings.xml中, 使用了傳入參數的方式.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    <string name="app_name">Remind</string>
    <string name="action_settings">Settings</string>
    <string name="about_me_title">關於我</string>
    <string name="about_me_email">chain_li7@163.com</string>
    <string name="tab_fragment_title">第 <xliff:g id="tab_fragment_title_position">%1$d</xliff:g> 個Tab</string>
    <string name="tab_fragment_content">這是第 <xliff:g id="tab_fragment_content_position">%1$d</xliff:g> 個Tab頁面</string>
</resources>

---

這樣就能夠看到上圖滾動Tab了.