2013年11月11日月曜日

PagerTabStripを使ってみる

今回は、PagerTabStripを使ってみたいと思います(`・ω・´)シャキーン

■PagerTabStripとは
・PagerTabStripはViewPagerにタブ機能を追加するためのもの
・Support Package に含まれているので Android 1.6 (APIレベル4) から使用することができる。
・作ったタブが全部表示されているわけではなく、必要な分だけ表示されるので数が多い時に便利かも? ・タブの部分をスクロールさせる事もできる。

Google Playでも使われているそうです(´・∀・`)ヘー
↓このへんかな?

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.pagertabstrip1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.pagertabstrip1.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

■activity_main.xml
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#333333"
        android:paddingTop="6dp"
        android:paddingBottom="6dp" />
</android.support.v4.view.ViewPager>

■PagerFragment.java
タブが選択されたときに表示するページの内容を作成しています。
単にテキストビューを1つ動的に作っています( ゚д゚)
package com.example.pagertabstrip1;

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 android.widget.TextView;

public class PageFragment extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  //TextViewを生成する
  TextView view = new TextView(getActivity());
  //幅、高さの設定
  LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.FILL_PARENT,
    LinearLayout.LayoutParams.FILL_PARENT);
  view.setLayoutParams(layout);
  //文字の位置の設定
  view.setGravity(Gravity.CENTER);
  //文字を設定
  view.setText(getArguments().getString("pageIndex"));
  //フォントサイズ変更
  view.setTextSize(180.0f);
  
  //
  return view;
 }

}
■MyFragmentPagerAdapter.java
ViewPagerに渡すAdapterを生成しています。
内部でタブが選択されたときに表示するFragmentを生成しています。
package com.example.pagertabstrip1;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

 private String[] pageTitle = { "Page1", "Page2", "Page3" };

 public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
  super(fragmentManager);
 }

 @Override
 public Fragment getItem(int position) {
  
  //選択されたページ内のFragmentを生成する
  Fragment fragment = new PageFragment();
  //Fragmentに渡す引数を生成する
  Bundle arguments = new Bundle();
  arguments.putString("pageIndex", Integer.toString(position + 1));
  fragment.setArguments(arguments);
  
  return fragment;
 }

 @Override
 public int getCount() {
  return pageTitle.length;
 }

 @Override
 public CharSequence getPageTitle(int position) {
  return pageTitle[position];
 }

}
■MainActivity.java
PagerTabStripとViewPagerの設定を行っています。
package com.example.pagertabstrip1;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.util.TypedValue;

public class MainActivity extends FragmentActivity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  // PagerTabStrip
  PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
  // 文字サイズを変更する
  pagerTabStrip.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
  // 文字色を変更する
  pagerTabStrip.setTextColor(0xff9acd32);
  // ページタイトルの間隔を変更する
  pagerTabStrip.setTextSpacing(50);
  // 非表示のページタイトルの透過度を変更する
  pagerTabStrip.setNonPrimaryAlpha(0.3f);
  // 下線の表示/非表示を変更する
  pagerTabStrip.setDrawFullUnderline(true);
  // ページタイトルのインジケータの色を変更する
  pagerTabStrip.setTabIndicatorColor(0xff9acd32);
  
  //
  FragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(
    getSupportFragmentManager());

  //ViewPagerを取得
  ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
  //adapterの設定
  viewPager.setAdapter(fragmentPagerAdapter);

 }

}
実行結果は次のようになります。

タブの部分が多いと、デフォルトで表示される数が決まっているのか、残りの部分は隠れるみたいですね。

2ページ目に行くと、1ページ目、2ページ目、3ページ目のタブが表示されました。
ちなみに、タブの部分をスクロールさせる事もできました。
タブの量が多い時には便利かも(゚д゚)(。_。)(゚д゚)(。_。) ウンウン

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿