1. 程式人生 > >Android UI開發之TabLayou和ViewPager的使用

Android UI開發之TabLayou和ViewPager的使用

首先注意因為Tablayout是android.support.design.widget包下面的,所以需要新增依賴,不然會報錯。

implementation 'com.android.support:design:27.0.0'

首先慣例,咱們看一下效果圖:
在這裡插入圖片描述

主頁程式碼:

public class MainActivity extends AppCompatActivity {
    private List<String> titles;
    private BaseAdapter adapter;
    private ArrayList<
Object>
pageList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); TabLayout tabLayout = (TabLayout) findViewById
(R.id.tabLayout); titles = Arrays.asList(new String[]{"商家商品", "商家資訊", "評論"}); pageList = new ArrayList<>(); //傳資料到第一個fragment Bundle bundle = new Bundle(); bundle.putString("shopData", "我是一個好孩子"); OneFragment OneFragment = new OneFragment(); TwoFragment TwoFragment =
new TwoFragment(); ThreeFragment ThreeFragment = new ThreeFragment(); OneFragment.setArguments(bundle); pageList.add(OneFragment); pageList.add(TwoFragment); pageList.add(ThreeFragment); BaseFmAdapter baseFmAdapter = new BaseFmAdapter(getSupportFragmentManager(),pageList,titles); viewPager.setAdapter(baseFmAdapter); tabLayout.setupWithViewPager(viewPager); tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } }

佈局檔案如下:

<?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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        app:tabSelectedTextColor="#ff00ff"
        app:tabTextColor="#ff0000"
        android:background="#ffffff">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </android.support.v4.view.ViewPager>

</LinearLayout>

自己封裝的BaseFmAdapter的程式碼如下:

package com.example.administrator.bottomdialogdemo;

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

import java.util.List;

/**
 * Created by wangsuli on 2017/12/12.
 */
public class BaseFmAdapter<T> extends FragmentPagerAdapter {
    public void setList(List<Fragment> list, List<T> titles) {
        this.list = list;
        this.titles = titles;
        notifyDataSetChanged();
    }

    private List<Fragment> list;

    public List<T> getTitles() {
        return titles;
    }

    public void setTitles(List<T> titles) {
        this.titles = titles;
        notifyDataSetChanged();
    }

    private List<T> titles;

    public BaseFmAdapter(FragmentManager fm, List<Fragment> list, List<T> titles) {
        super(fm);
        this.list = list;
        this.titles = titles;
    }


    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return (list == null) ? 0 : list.size();
    }

    //重寫這個方法,將設定每個Tab的標題
    @Override
    public CharSequence getPageTitle(int position) {
        T title = titles.get(position);
        if (title instanceof String) {
            return (CharSequence) title;
        }
        return "";
    }
}