Android滑動導航菜單TabLayout+ViewPager+Fragment
阿新 • • 發佈:2019-02-11
ont array nta fat left design 使用方式 技術 ase
1.主要的Activity——MemberDetailActivity
2.Activity視圖的xml文件——R.layout.activity_member_detail
3.自定義的Fragment子類——CustomTrainingFragment
4.Fragment視圖的xml文件——
5.自定義Fragment子類的適配器
//1.MemberDetailActivity
package com.vimems.coach; import android.os.Bundle; import android.support.design.widget.TabLayout; importandroid.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.view.ViewPager; import android.widget.TableLayout; import com.vimems.Adapter.CustomTrainingFragmentPageAdapter; import com.vimems.R; import java.util.ArrayList; import java.util.List; importutil.BaseActivity; public class MemberDetailActivity extends BaseActivity { private CustomTrainingFragmentPageAdapter pageAdapter; private ViewPager viewPager; private TabLayout tabLayout; List<Fragment> fragmentList; @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); setContentView(R.layout.activity_member_detail); // TODO: 2/10/2019 暫時用一個fragment代替 fragmentList=new ArrayList<>(); fragmentList.add(new CustomTrainingFragment()); fragmentList.add(new CustomTrainingFragment()); fragmentList.add(new CustomTrainingFragment()); FragmentManager fragmentManager=getSupportFragmentManager(); pageAdapter=new CustomTrainingFragmentPageAdapter(fragmentManager,fragmentList); viewPager=findViewById(R.id.training_mode_viewpager); tabLayout=findViewById(R.id.training_mode_tab); viewPager.setAdapter(pageAdapter); //讓TabLayout與viewpager產生聯動 tabLayout.setupWithViewPager(viewPager); } }
//R.layout.activity_member_detail
//包含一個TabLayout和一個ViewPager
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.LinearLayoutCompat 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" android:orientation="vertical"> <TextView android:paddingTop="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/single_mode" android:gravity="center"/> <!--todo 可以改為一個TableLa+ViewPage--> <android.support.design.widget.TabLayout android:id="@+id/training_mode_tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/training_mode_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> </android.support.v7.widget.LinearLayoutCompat>
//3CustomTrainingFragment package com.vimems.coach; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.vimems.R; public class CustomTrainingFragment extends Fragment { public static final String ARG_PAGE="ARG_PAGE"; private int mPage; //使用newInstance的方式,或者在CustomTrainingFragmentPageAdapter中添加一個列表 // fragments=new ArrayList<>(); // //將提前寫好三個Fragment添加到集合中 // fragments.add(new FirstFragment()); // fragments.add(new SecondFragment()); // fragments.add(new ThirdFragment()); // 在適配器的構造方法中傳入參數fragmentManage、fragments // 在適配器的getItem方法中return fragments.get(position) public static CustomTrainingFragment newInstance(int page){ Bundle bundle=new Bundle(); bundle.putInt(ARG_PAGE,page); CustomTrainingFragment customTrainingFragment=new CustomTrainingFragment(); customTrainingFragment.setArguments(bundle); return customTrainingFragment; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPage=getArguments().getInt(ARG_PAGE); } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_custom_training,container,false); return view; } }
//4.Fragment的布局文件, <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.LinearLayoutCompat android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingLeft="10dp"> <TextView android:text="@string/custom_training_options" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:textStyle="bold" /> <RadioGroup android:id="@+id/custom_training_options" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioButton android:id="@+id/custom_training_options_gain_muscle" android:text="@string/custom_training_options_gain_muscle" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/> <RadioButton android:id="@+id/custom_training_options_lose_fat" android:text="@string/custom_training_options_lose_fat" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/> <RadioButton android:id="@+id/custom_training_options_shape" android:text="@string/custom_training_options_shape" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/> <RadioButton android:id="@+id/custom_training_options_recovery" android:text="@string/custom_training_options_recovery" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/> </RadioGroup> </android.support.v7.widget.LinearLayoutCompat> <FrameLayout android:id="@+id/custom_training_options_fragment" android:layout_width="match_parent" android:layout_height="match_parent"></FrameLayout> </android.support.v7.widget.LinearLayoutCompat>
//fragment的適配器CustomTrainingFragmentPageAdapter package com.vimems.Adapter; import android.content.Context; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import com.vimems.coach.CustomTrainingFragment; import java.util.List; import util.Constants; public class CustomTrainingFragmentPageAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentList; private static final String[] tabTitle=Constants.TRAINING_MODE; public CustomTrainingFragmentPageAdapter(FragmentManager fm, List<Fragment> fragmentList) { super(fm); this.fragmentList=fragmentList; } @Override public Fragment getItem(int i) { // 用自定義Fragment的newInstance()方法返回一個實例 // return CustomTrainingFragment.newInstance(i); // 自定義的fragment列表 return fragmentList.get(i); //return CustomTrainingFragment.newInstance(i+1); } @Override public int getCount() { return tabTitle.length; } // 添加tab的標題title // 如下這種使用方式好像不行 // mTabLayout = (TabLayout) findViewById(R.id.tabLayout); // TabLayout.Tab tab1 = mTabLayout.newTab() // //設置tab項顯示的文字 // .setText("tab1"); // TabLayout.Tab tab2 = mTabLayout.newTab().setText("tab2"); // TabLayout.Tab tab3 = mTabLayout.newTab().setText("tab3"); // mTabLayout.addTab(tab1); // mTabLayout.addTab(tab2); // mTabLayout.addTab(tab3); @Nullable @Override public CharSequence getPageTitle(int position) { return tabTitle[position]; } }
Android滑動導航菜單TabLayout+ViewPager+Fragment