1. 程式人生 > >android 學習之Fragment+ViewPager實現頁面左右滑動標籤頁

android 學習之Fragment+ViewPager實現頁面左右滑動標籤頁

ViewPager 結合Fragment實現一個Activity裡包含多個可滑動的標籤頁,每個標籤頁可以有獨立的佈局及響應。

如下所示。


我們可以藉助TabLayout來實現頂部導航。Activity佈局檔案如下:

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

<--!自定義標題欄!-->
    <include layout="@layout/layout_ordermanagertitles" />
<--!自定義TabLayout佈局!-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorTitle"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/black" />
<--ViewPager 實現滑動-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Activity  Java檔案,在該檔案中定義介面卡,實現滑動和佈局.
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import com.glc.dianniuapp.R;
import com.glc.dianniuapp.fragments.FragmentDeal;
import com.glc.dianniuapp.fragments.FragmentHistory;
import com.glc.dianniuapp.fragments.FragmentRunning;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

/**
 * Created by Leiqi on 2015/11/27.
 */
public class OrderManagerAcitivity extends FragmentActivity implements ViewPager.OnPageChangeListener {

    @Bind(R.id.viewpager)
    ViewPager mViewPager;
    @Bind(R.id.tablayout)
    TabLayout mTabLayout;
    private List<Fragment> mFragments = new ArrayList<>();//標籤頁集合
    private MyFragmentAdapter mFragmentAdapter;//自定義介面卡
    private List<String> mTitles = new ArrayList<>();//標籤集合

    @OnClick(R.id.tv_backhome)
    public void back() {
        Intent intent = new Intent(OrderManagerAcitivity.this, MainActivity.class);
        startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ordermanager);
        ButterKnife.bind(this);
        initView();

    }
//初始化檢視
    private void initView() {
        mTitles.add("進行中");//標籤
        mTitles.add("違章管理");
        mTitles.add("歷史訂單");
      // 標籤頁
        mFragments.add(new FragmentRunning());
        mFragments.add(new FragmentHistory());
        mFragments.add(new FragmentDeal());


        mFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(mFragmentAdapter);<span style="font-family: Arial;">//ViewPager設定介面卡</span>
        mViewPager.addOnPageChangeListener(this);//將ViewPager加入到該Activity中
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設定TabLayout模式,當前為系統預設模式.
        mTabLayout.setupWithViewPager(mViewPager);//將ViewPager和Tablayout關聯起來
        mTabLayout.setTabsFromPagerAdapter(mFragmentAdapter);<span style="font-family: Arial;">//TabLayout設定加介面卡</span>
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
//自定義介面卡
    private class MyFragmentAdapter extends FragmentPagerAdapter {
        private List<String> mTitles;
        private List<Fragment> mFragments;
     
        public MyFragmentAdapter(FragmentManager fm, List<Fragment> mFragments, List<String> mTitles) {
            super(fm);
            this.mFragments = mFragments;
            this.mTitles = mTitles;
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles.get(position);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
        @Override
        public int getCount() {
            return mFragments.size();
        }
    }
}

3、標籤頁繼承於Fragment,其java 程式碼和佈局檔案如下:(這只是一個,其餘的一樣根據需求自己加)
public class FragmentDeal extends Fragment {
    @Nullable
    @Override//構建檢視
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_deal,container,false);
    }
}
標籤頁面具體佈局
<?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="wrap_content"
        android:layout_height="wrap_content"
        android:text="違章處理" />

</LinearLayout>

如果要實現其他方式,可參考其他部落格:

http://blog.csdn.net/zhang31jian/article/details/29867951

http://blog.csdn.net/harvic880925/article/details/38487149