1. 程式人生 > >筆記(二)TabLayout + ViewPager + FragmentPagerAdapter 組合用法

筆記(二)TabLayout + ViewPager + FragmentPagerAdapter 組合用法

instance and list extc 重要 dap listener final encoding

  • TabLayout的xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout 
--> <!-- Toolbar --> <LinearLayout android:id="@+id/daily_pic" android:layout_width="match_parent" android:layout_height="60dp" android:paddingTop="16dp" android:paddingLeft="18dp" android:background="@color/blue_btn_color_normal"
> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageButton android:id="@+id/btn_wei_left1" android:layout_width="wrap_content"
android:layout_height="20dp" android:layout_marginTop="4dp" android:background="@drawable/ic_me_left"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="優惠券" android:paddingRight="50dp" android:layout_marginLeft="115dp" android:gravity="left" android:textSize="21dp" android:textColor="#f7efef" android:background="@color/blue_btn_color_normal"/> </LinearLayout> </LinearLayout> <android.support.design.widget.TabLayout android:id="@+id/tab_layout2" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#ffffff" /> </LinearLayout>
  • ViewPager裏面的內容
<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="暫無"
        android:layout_gravity="center"
        android:layout_marginLeft="150dp"
        android:textSize="50dp"
        />

</LinearLayout>
  • 具體實現代碼,創建Fragment
package com.example.accessHand2.Home;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.accessHand2.R;

/**
 * Created by Douzi on 2017/7/15.
 */

public class PageFragment extends Fragment {

    public static final String ARGS_PAGE = "args_page";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();

        args.putInt(ARGS_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARGS_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.youhui_fragment,container,false);

        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第" + mPage + "頁");        //設置ViewPager內容
        textView.setTextSize(20);

        return view;
    }
}
  • 創建適配器
package com.example.accessHand2.Home;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * Created by Douzi on 2017/7/15.
 */

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public final int COUNT = 2;
    private String[] titles = new String[]{"可用(0)", "暫無可用(0)"};      //設置tab的標題
    private Context context;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

  • Fragment+ViewPager+FragmentPagerAdapter的組合
     mTabLayout = (TabLayout) findViewById(R.id.tab_layout2);
        //添加 ViewPager內容
     ViewPager viewPager
= (ViewPager) findViewById(R.id.viewPager); MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(adapter); //將 viewPager 和 tab 關聯到一起, 很重要 ! viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
       mTabLayout.setupWithViewPager(viewPager);
  • TabLayout的使用 (方法一,手動添加)
   TabLayout tabLayout = ...;
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
  • TabLayout的使用 (方法二,自動添加, 就是上面那個組合的代碼)
     mTabLayout = (Tabayout) findViewById(R.id.tab_layout2);
        //添加 ViewPager內容
     ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        //將 viewPager 和 tab 關聯到一起, 很重要 !
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
     mTabLayout.setupWithViewPager(viewPager);
     mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);     //使Tab填滿 屏幕寬度
     mTabLayout.setTabMode(TabLayout.MODE_FIXED);

筆記(二)TabLayout + ViewPager + FragmentPagerAdapter 組合用法