概観
TabLayoutは、Googleが第14回Google I / O会議で正式に発表したマテリアルデザイン効果のあるコントロールライブラリです。ラベルインジケーターとして、ViewPagerとリンクできます。2つをFragmentと一緒に使用して、スライドタブページを実現できます。 ZhihuとWeChat。
実装プロセス
-
まず、デザインパッケージの依存関係ライブラリをアプリのgradleに追加する必要があります：
compile 'com.android.support:design:25.0.0' -
では、メインページactivity_main.xmlのレイアウトファイルを見てみましょう。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout
android:id="@+id/linearlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/mtablayout"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/mviewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>`ここで、マーキングラインの色、タイトルの色サイズ、TabLayout全体の背景色などを変更するには、レイアウトの最初に名前空間を追加する必要があることに注意してください。
`xmlns:app="http://schemas.android.com/apk/res-auto"`;ここにいくつかの属性があります：app：tabMode = "fixed"は上部のタブレイアウトがスライドしないことを意味します：tabIndicatorColor = "@ color / colorAccent"は上部のタブアプリの下の線の色を意味します：tabSelectedTextColor = "@ color / colorAccent"は意味しますタブが選択されているときのフォントの色app：tabTextColor = "@ android：color / white"は、タブが選択されていないときのフォントの色を意味します
3.コアコード：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 去除阴影
getSupportActionBar().setElevation(0);
initData();
initView();
}
//数据初始化
private void initData() {
mtitle = new ArrayList<>();
mtitle.add("服务管家");
mtitle.add("微信精选");
mtitle.add("美女社区");
mtitle.add("个人中心");
mfragment = new ArrayList<>();
mfragment.add(new ButerFragment());
mfragment.add(new GirlFragment());
mfragment.add(new WeChatFragmeent());
mfragment.add(new UserFragment());
}
//View 初始化
private void initView() {
mtablayout = (TabLayout) findViewById(R.id.mtablayout);
mviewpager = (ViewPager) findViewById(R.id.mviewpager);
// 预加载
mviewpager.setOffscreenPageLimit(mfragment.size());
// 设置适配器
mviewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
//
public Fragment getItem(int position) {
return mfragment.get(position);
}
@Override
public int getCount() {
return mfragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mtitle.get(position);
}
});
//将TabLayout 与ViewPager进行绑定
mtablayout.setupWithViewPager(mviewpager);
}上記は、タブスライドを実現するためのTabLayout + ViewPager + Fragmentのコアコードです。ViewPagerは、Adapterを設定してFragmentを埋め（4つのFragmentを準備してコレクションにロードする必要があります）、TabLayoutとViewPagerをバインドします。
このプロセスでは、TabLayoutはラベルインジケーターで、ViewPagerはコンテナーとして機能し、FragmentはViewPagerのデータソースを提供します。こんな感じで、本や文房具の入ったバッグ「ViewPager」「文房具の断片」を壁掛けフック「TabLayout」に掛けるようなシーンですが、どのようにわかりやすいでしょうか？
-
FragmentとViewPagerを一緒に使用すると、ViewPagerはプリロードメカニズムを使用するため、対応するページにジャンプする前にそれをロードした可能性があります。これはユーザーエクスペリエンスが非常に悪く、ユーザーの時間を浪費します。トラフィック。
このようにして、ホームページのスライド機能を実現しました。まあ、その効果を見てみましょう！
-
次に、よりインパクトのある効果を実現するために、FloatingActionButtonコントロールの「フローティングフレーム」を使用してみましょう。フローティングフレームの最初のページは表示されず、他の3つのページは表示され、クリックイベントを実現して設定ページの「新しいアクティビティ」に入ることができます。
*コントロールのレイアウトファイルを見てみましょう。
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp" >
</android.support.design.widget.FloatingActionButton>これらの属性は非常に単純です。この効果がこのページの下部にあるBouttonに相当することは誰でも知っていると思います。
-
コアコード：
// 初始化悬浮框
fab_setting = (FloatingActionButton) findViewById(R.id.fab_setting);
// 设置启动 Activity 时悬浮框默认隐藏
fab_setting.setVisibility(View.GONE);
// 悬浮框的点击事件
fab_setting.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view){
startActivity(new Intent(this, SettingActivity.class));
}
});
// viewPager的滑动监听
mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.i(TAG, "position: "+position);
if (position == 0) {
fab_setting.setVisibility(View.GONE);
}else {
fab_setting.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});コードは非常にシンプルです。メインはaddOnPageChangeListener（）メソッドを呼び出して、viewPagerのスライドリスナーを設定することです。書き換えられた3つのメソッドに注意する必要があります。
（1）onPageSelected（）：ページが選択されるプロセスを示します
（2）onPageScrollStateChanged（）：ページのスライド状態を変更するプロセスを示します。
（3）onPageScrolled（）：ページのスライドのプロセスを示します
-
レンダリングはどうですか：
初めてGif動画を撮った時の効果はあまり良くなくて一瞬ですが、誰もが理解できると思いますし、今後少しずつ改善していきます！
PS：この記事はオリジナルです。一緒に学習を交換し、一緒に進歩することを歓迎します！疑問がある場合は、私のWeChatパブリックアカウント（Banxia Minlan）をフォローして、バックグラウンドで通信できます。
人生には道がありません、すべてのステップが重要です！
