TabLayout widget and ViewPager using Fragments.
Layout
res/layout/content_viewpager.xml<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".TabLayoutActivity"
tools:showIn="@layout/activity_tab_layout">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
activity_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_viewpager" />
</android.support.design.widget.CoordinatorLayout>
補充
Toolbar 常用的 ThemeOverlay
- ThemeOverlay.AppCompat.Light.ActionBar: (Light)白底黑字
- ThemeOverlay.AppCompat.Dark.ActionBar: (Dark)黑底白字
Fragment
Create Three layouts for Fragments fragment_fist, fragment_second, fragment_thirdfragment.fist.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.admin.claire.materialdesignpatterns.fragment.FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView"
android:textAppearance="@style/TextAppearance.AppCompat.Display2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/first_fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
補充
ConstraintLayout ( 更強大的RelativeLayou t)
主要目標是提供一種方便的方式來創建具有多個子級的平面佈局
( 像在 iOS 中的AutoLayout的設計)
主要是之前的版面設計，大都使用LinearLayout與RelativeLayout能夠實作出大部份的版面，
但Layout層級太多會造成設計更動上的困擾，取用元件時也較耗費資源。
因此，如何能將複雜的版面設計的層級較為扁平化呢? 組織要扁平化，Layout也要扁平化才有效率。
Android正式推出ConstraintLayout元件，它就是為了這個目的而誕生的。
FirstFragment.java
public class FirstFragment extends Fragment {
public static final String TITLE = "FIRST";
public FirstFragment() {
// Required empty public constructor
}
public static FirstFragment newInstance(){
return new FirstFragment();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment__first, container, false);
}
}
newInstance()方法是一種“靜態工廠方法",
讓我們在初始化和設置一個新的fragment的時候省去調用它的構造函數和額外的setter方法。
Creating Adapter
要進行滑動 Tab 佈局，需要為ViewPager創建一個適配器，並將其添加到TabLayout。此適配器類將片段呈現給每個ViewPager的頁面。
創建一個Class, ViewPagerAdapter 繼承 FragmentStatePagerAdapter。
需要(override)重寫三個方法 getItem（），getCount（），getPageTitle（）。
- getItem（）方法需要每個Tab位置的Fragment實例。
- getCount（）方法需要總片段計數。
- getPageTitle（）方法需要每個Tab位置的頁面標題為String,顯示Tab的名稱需要此方法。
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private static int TAB_COUNT = 3;
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return FirstFragment.newInstance();
case 1:
return SecondFragment.newInstance();
case 2:
return ThirdFragment.newInstance();
}
return null;
}
@Override
public int getCount() {
return TAB_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0:
return FirstFragment.TITLE;
case 1:
return SecondFragment.TITLE;
case 2:
return ThirdFragment.TITLE;
}
return super.getPageTitle(position);
}
}
最後回到 TabLayoutActivity 初始化 ViewPager，
並使用SetupViewPager（）方法設置具有TabLayout的ViewPager。
ViewPagerAdapter使用setAdapter（）方法設置為ViewPager。
TabLayoutActivity.java
public class TabLayoutActivity extends AppCompatActivity {
ViewPager mViewPager;
Toolbar mToolbar;
ViewPagerAdapter mViewPagerAdapter;
TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
mToolbar = (Toolbar) findViewById(R.id.toolbar_tabs);
setSupportActionBar(mToolbar);
// add back arrow to toolbar <-
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
setViewPager();
}
private void setViewPager() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mViewPagerAdapter);
mTabLayout = (TabLayout) findViewById(R.id.tab);
mTabLayout.setupWithViewPager(mViewPager);
}
}
留言
張貼留言