PagerSlidingTabStrip は Android 用のタブを使用したマルチインターフェイスのスライド切り替えを作成します

ここでは 2 つのライブラリを使用します。1 つは Android SDK に付属する android-support-v4 で、もう 1 つは PagerSlidingTabStrip です。オープンソース プロジェクトのアドレスは https://github.com/astuetz/PagerSlidingTabStrip です。v4 を使用する必要があります。彼の ViewPager と Fragment、および PagerSlidingTabStrip は、アプリケーションの上のラベルです。

結果のプレビュー:

さて、作業を始めましょう~

レイアウト

ActionBar が気に入ったら、ActionBarActivity を作成します。これには v7 サポート パッケージが必要です。

このアクティビティのレイアウトはここで直接指定されます:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabstrip"
    android:layout_height="48dp"
    android:layout_width="match_parent" />
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:overScrollMode="never"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_below="@id/tabstrip" />
</RelativeLayout>

com.astuetz.PagerSlidingTabStrip はインターフェイスの上部にあるタブです。ここでは高さを 48 dp に指定しました。これは、Android デザインで強く推奨されているフィードバック領域の高さでもあります。

同僚がアプリを共同開発していたとき、RadioGroup を使用してこれらのラベルを作成し、ビューを追加して以下の移動可能なインジケーターを作成しているのを見ました。間違いを犯しやすいことは言うまでもなく、コードは明らかに複雑です。私が以下に投稿したものよりもはるかに高い出力です。私が怠け者で自分でそれに気づきたくないわけではありませんが、世界にはすでにたくさんの美しいものがあり、他の人が親切にあなたを完成させ、あなたがそれを使用するのを待っていると感じます。自分でやらなければならない場合、利益が損失を上回ります。誰もが素晴らしいものになりたいし、他のものよりも優れたものを作りたいと思っていますが、既存の良いものを完璧に組み合わせるのは簡単ではないと思います。

関係ないことを話しましたが、本題に戻ります。言うまでもなく非常にシンプルな上下構造レイアウト。 ViewPager の android:overScrollMode="never" に関しては、これは ViewPager の範囲外の効果が好きではありません (fadingEdge="none" は無効になる可能性があります)。 ViewPager の範囲外の影響。

コード

ご存知のとおり、ViewPager のメンバーは Fragment である必要があるため、ViewPager と PagerSlidingTabStrip を構成する前に、ViewPager で表示するための単純な Fragment を作成する必要があります。

package com.airk.myapplication.viewdemo.app.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.airk.myapplication.simplechat.app.widget.MyTextView; //我自定义的TextView，只是修改了默认字体，最近觉得Roboto-Light/Thin特别好看
/**
 * Simple Fragment which only has one TextView
 */
public class NumberFragment extends Fragment {
  private String content; //Fragment中显示的内容
  public static NumberFragment newInstance(String content) { //对外提供创建实例的方法，你给我需要显示的内容，我给你Fragment实例
    return new NumberFragment(content);
  }
  private NumberFragment(String content) {
    this.content = content;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    MyTextView tv = new MyTextView(getActivity());
    tv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(26.0f);
    tv.setText(this.content);
    return tv; //只有一个全屏显示、居中的Roboto字体的TextView
  }
}

Fragmentが作成され、コードにコメントが書き込まれます。非常にわかりやすく、シンプルです。以下はアクティビティ コードです:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main_activity);
  getSupportActionBar().setDisplayShowHomeEnabled(false); //ActionBar不显示应用Icon
  ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager); //获取ViewPager
  viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //简单创建一个FragmentPagerAdapter
    @Override
    public CharSequence getPageTitle(int position) { //必须复写这个方法，开源控件PagerSlidingTabStrip需要通过它获取标签标题
      return "Title " + (position + 1);
    }
    @Override
    public Fragment getItem(int i) {
      return NumberFragment.newInstance("Content " + (i + 1)); //返回刚刚我们创建的那个Fragment，显示内容为Content X
    }
    @Override
    public int getCount() {
      return 3; //测试只用3个标签
    }
  });
  PagerSlidingTabStrip strip = (PagerSlidingTabStrip) findViewById(R.id.tabstrip); //获取PagerSlidingTabStrip控件对象
  strip.setShouldExpand(true); //设置标签自动扩展——当标签们的总宽度不够屏幕宽度时，自动扩展使每个标签宽度递增匹配屏幕宽度，注意！这一条代码必须在setViewPager前方可生效
  strip.setViewPager(viewpager); //这是其所handle的ViewPager
  strip.setDividerColor(Color.TRANSPARENT); //设置每个标签之间的间隔线颜色 ->透明
  strip.setUnderlineHeight(3); //设置标签栏下边的间隔线高度，单位像素
  strip.setIndicatorHeight(6); //设置Indicator 游标 高度，单位像素
}

PagerSlidingTabStrip このコントロールには、各ラベルの色、文字の色、間隔の Drawable などを含む、多くのカスタマイズ可能なプロパティがあります。必要な場合は、github ホームページと公式サンプルを詳しく見て、それについて学ぶことができます。

まとめ

オープンソースコントロールのPagerSlidingTabStripと組み合わせると、正直、コード量は非常に少なく、ロジックも分かりやすく、登録も不要で、スライド可能なタブを備えた複数のインターフェイスを簡単に開発できます。リスナーはタグと各インターフェイス間のインタラクション (タグをクリックしてインターフェイスを切り替えるか、インターフェイスをスライドしてタグを切り替える) をすでに実現しており、インジケーター カーソルはユーザーのスライドに合わせてスライドするように設計されているため、開発時間を大幅に節約できます。

Android マルチインターフェースをラベル付きでスライド切り替えする PagerSlidingTabStrip に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。