Android TabLayoutはViewPagerと組み合わせてラベルページの切り替えを実現
16000 ワード
最初のステップtablayoutの依存性のインポート
moduleにあるbuild.gradle
本プロジェクトのV 7パッケージと競合する場合は、バージョン番号を一致させるだけでよい
レイアウトを書きます.Tablayoutはsupportです.design.Widgetの下の
fragmentレイアウトの作成
fragmentの作成
私たちはViewPagerとFragmentを組み合わせているので、アダプタFragmentPagerAdapterを構成します.
アダプターもfragmenも書き終わり、次はActivityで
Tablayoutを初期化する時、setupWithViewPagerという方法が出てこないので、よく探してみると元はガイドパッケージが間違っていて、正しいパッケージは
くれぐれも間違えないように
moduleにあるbuild.gradle
compile 'com.android.support:design:25.3.1'
本プロジェクトのV 7パッケージと競合する場合は、バージョン番号を一致させるだけでよい
レイアウトを書きます.Tablayoutはsupportです.design.Widgetの下の
<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="wrap_content"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabSelectedTextColor="#FC4E4E"
>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.support.v4.view.ViewPager>
LinearLayout>
fragmentレイアウトの作成
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="fragment"
android:textSize="40sp" />
LinearLayout>
fragmentの作成
public class MyFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static MyFragment newInstance(int Page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, Page);
MyFragment myFragment = new MyFragment();
myFragment.setArguments(args);
return myFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag_layout,container,false);
TextView tv = (TextView) view.findViewById(R.id.tv);
tv.setText("FragMent #" + mPage);
return view;
}
}
私たちはViewPagerとFragmentを組み合わせているので、アダプタFragmentPagerAdapterを構成します.
public class MyFragmentAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 9;
private String tabTitles[] = new String[]{"tab1", "tab2", "tab3", "tab4", "tab5", "tab6", "tab7", "tab8", "tab9"};
private Context context;
public MyFragmentAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
return MyFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
アダプターもfragmenも書き終わり、次はActivityで
public class TabActivity extends FragmentActivity {
private ViewPager vp;
private MyFragmentAdapter adapter;
private TabLayout tabLayout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_layout);
vp = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
//
adapter = new MyFragmentAdapter(getSupportFragmentManager(), TabActivity.this);
vp.setAdapter(adapter);
tabLayout.setupWithViewPager(vp);
// , title ,
// tabLayout.setTabMode(TabLayout.MODE_FIXED);
}
}
Tablayoutを初期化する時、setupWithViewPagerという方法が出てこないので、よく探してみると元はガイドパッケージが間違っていて、正しいパッケージは
import android.support.design.widget.TabLayout;
くれぐれも間違えないように