在layout.xml中只放一個ViewPager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/id_view_pager"/>
</LinearLayout>儘量不要複製，手打好一點，快一點
onCreate中總共做了三件事，初始化View，初始化適配器和初始化ViewPager
Activity extends FragmentActivity {
private ViewPager mViewPager;
private List<Fragment> mListFragment;
private FragmentPagerAdapter mFragmentPagerAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
initView();
initAdapter();
initViewPager();
}
}
其中初始化View，初始化適配器函數如下，適配器特別簡單，只需要兩個返回函數。Ctrl鍵+F關注mListFragment的操作
Activity extends FragmentActivity {
private void initView(){
mViewPager =findViewById(R.id.id_view_pager);
}
private void initAdapter(){
mListFragment=new ArrayList<>();
mListFragment.add(new FirstFragment());
mListFragment.add(new SecondFragment());
//getSupportFragmentManager方法來自FragmentActivity
mFragmentPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mListFragment.get(position);
}
@Override
public int getCount() {
return mListFragment.size();
}
};
}
}其中的FirstFragment.java如下
可以把onCreateView當成活動的onCreate，inflate當成setContentView，只不過inflate是加載，setContentView是顯示。
public class FirstFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.first_layout,container,false);
}
}first_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/dreamcatcher"/>
</LinearLayout>很簡單，就一張圖
第二個SecondFragment.java如下
public class SecondFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.second_layout,container,false);
}
}second_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/axes"/>
</LinearLayout>兩個Fragment是爲了做List< Fragment >，而做List< Fragment >是爲了給FragmentPagerAdapter配邏輯，能通過mListFragment找到相關的Fragment顯示出來。
最後一個函數初始化viewpager，設置了適配器以後就可以選擇顯示哪一項了
Activity extends FragmentActivity {
private void initViewPager(){
mViewPager.setAdapter(mFragmentPagerAdapter);
mViewPager.setCurrentItem(0);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mViewPager.setCurrentItem(position);
//一般在此選擇改變按鈕的顏色
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}一般我們爲了做出滑動時按鍵同時變色的效果，可以用一個函數設置所有的按鈕變爲未選中狀態，然後設定相關的按鈕爲選中狀態，（起setButtonImageToSelectAndSelectItem這個長名是爲了好辨認）
Activity extends FragmentActivity {
//三個Tab對應的Button
private Button mTabLeftButton;
private Button mTabCenterButton;
private Button mTabRightButton;
private void setButtonImageToSelectAndSelectItem(int i){
//設置全部爲默認
mTabCenterButton.setBackgroundResource(R.drawable.center_normal_img);
mTabCenterButton.setTextColor(Color.parseColor("#000000"));
mTabLeftButton.setBackgroundResource(R.drawable.left_normal_img);
mTabLeftButton.setTextColor(Color.parseColor("#000000"));
mTabRightButton.setBackgroundResource(R.drawable.right_normal_img);
mTabRightButton.setTextColor(Color.parseColor("#000000"));
//根據傳入參數選則選中按鈕
switch (i){
case 0:
mTabLeftButton.setBackgroundResource(R.drawable.left_selected_img);
mTabLeftButton.setTextColor(Color.parseColor("#ffffff"));
break;
case 1:
mTabCenterButton.setBackgroundResource(R.drawable.center_selected_img);
mTabCenterButton.setTextColor(Color.parseColor("#ffffff"));
break;
case 2:
mTabRightButton.setBackgroundResource(R.drawable.right_selected_img);
mTabRightButton.setTextColor(Color.parseColor("#ffffff"));
}
mViewPager.setCurrentItem(i);
}
}然後在點擊事件和頁面選中事件中設置它
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.id_left_button:
setButtonImageToSelectAndSelectItem(0);
break;
case R.id.id_center_button:
setButtonImageToSelectAndSelectItem(1);
break;
case R.id.id_right_button:
setButtonImageToSelectAndSelectItem(2);
break;
}
}
private void initEvents(){
mTabCenterButton.setOnClickListener(this);
mTabLeftButton.setOnClickListener(this);
mTabRightButton.setOnClickListener(this);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
setButtonImageToSelectAndSelectItem(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}