2010年11月23日火曜日

Andorid TabWidget をカスタマイズする

Android reference http://developer.android.com/resources/tutorials/views/hello-tabwidget.html では、setIndicator の引数でタイトル用の文字列とアイコンのリソースIDを渡していましたが、View を引数に指定することで、TabWidget をカスタマイズすることが可能です。


TabWidget 用の独自 View を作ります。


public class CustomTabContentView extends FrameLayout {
LayoutInflater inflater = (LayoutInflater) getApplicationContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

public CustomTabContentView(Context context) {
super(context);
}

public CustomTabContentView(Context context, String title, int icon) {
this(context);
View childview1 = inflater.inflate(R.layout.tabwidget1, null);
TextView tv1 = (TextView) childview1.findViewById(R.id.textview);
ImageView iv1 = (ImageView) childview1.findViewById(R.id.imageview);
tv1.setText(title);
iv1.setImageResource(icon);
addView(childview1);
}
}


ここでは FrameLayout を継承して、res/layout/tabwidget1.xml で指定されたレイアウトから LinearLayout, TextView ,ImageView を生成し、引数で渡された文字列と画像のリソースIDをそれぞれ TextView と ImageView に設定しています。


setIndicator にカスタムビューを指定します。


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

TabHost tabHost = getTabHost();

tabHost.setCurrentTab(1);

View childview1 = new CustomTabContentView(this, "First", R.drawable.ic_tab_home);

TabSpec firstTab = tabHost.newTabSpec("First");
firstTab.setIndicator(childview1);
firstTab.setContent(R.id.first_content);
tabHost.addTab(firstTab);

View childview2 = new CustomTabContentView(this, "Second", R.drawable.ic_tab_star);

TabSpec secondTab = tabHost.newTabSpec("Second");
secondTab.setIndicator(childview2);
secondTab.setContent(R.id.second_content);
tabHost.addTab(secondTab);

View childview3 = new CustomTabContentView(this, "Third", R.drawable.ic_tab_camera);

TabSpec thirdTab = tabHost.newTabSpec("Third");
thirdTab.setIndicator(childview3);
thirdTab.setContent(R.id.third_content);
tabHost.addTab(thirdTab);
}


tabwidget1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/tabwidget_bg"
android:gravity="center"
>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>






 

2 件のコメント:

  1. CustomTabContentView で 「メソッド getApplicationContext() は型 CustomTabContentView で未定義です」とエラーがでます。どうしたらよいでしょうか。
    教えて頂けると助かります。

    返信削除
  2. getApplicationContext()は、Activityのメソッドなので、Viewには存在しません。
    mActivity.getApplicationContext();
    のように、親のActivityを指定する書き方にする必要がありますよ。

    返信削除