Android UI開發之TabLayou和ViewPager的使用
阿新 • • 發佈:2018-12-07
首先注意因為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 "";
}
}