素人のアンドロイドアプリ開発日記

コンポーネントのコンテンツ

タブのデザインを変更する。

2011.04.10

次にタブのデザインを変更します。

今回の基本で利用しているには「tabを利用してのviewを作成する。」のファイルです。

tab

デザインを変更する為に利用するのは、

tab.setIndicator(“tab”);

の関数で引数に文字を代入した時や、画像を代入をした場合には、デフォルトのタブのデザインに代入をしたタブが作成されますが、引数にviewクラスをいれる事で、viewを表示する事ができます。

ここで、viewクラスを継承したクラスを作成したものを、引数に用いて利用をしたのですが、どうもstateがselected(選ばれてる状態)の取得がうまくできなかったので、

整理できない底辺プログラマのメモブログさんを参照させていただきました。

ここで、view用のレイアウトファイルを用いました。

tablayoutfile.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id = "@+id/tabView"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity = "center">
 <TextView 
 android:id="@+id/TextView01" 
 android:text="test"
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"
 android:background="@drawable/rectcolor"/>
</LinearLayout>

また、backgroundは以下に設定をする事で、stateにあわせて色の変更が可能です。

rectcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
 <item android:state_selected="true" >
 <color android:color="#555555" />  
 </item>
 <item android:state_selected="false" >   
 <color android:color="#222222" />  
 </item> 
</selector>

stateにあわせて色の変更ができるようなのですが、pressedのstateを用いたのですが、反応がありませんでした(pressedはボタンだと反応するらしいのですが)設定するクラスによって、有効なstateも違うようです。

以上でほぼ完成です。尚、タブのサイズは要素によって変わってしまうので、固定で表示できるようにmain.xmlでtabwidgetに値を指定してます。

他のソースは以下です。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
 android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical">
 <TabHost 
 android:id="@+id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent">
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical">
 
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_weight="1"
 android:id="@android:id/tabcontent">
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout1">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout1が表示されています。" />
 </LinearLayout>
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout2">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout2が表示されています。" />
 </LinearLayout>
 </FrameLayout>
 <TabWidget 
 android:layout_width="fill_parent" 
 android:layout_height="60px" 
 android:id="@android:id/tabs"></TabWidget>
 </LinearLayout>
 </TabHost>
</LinearLayout>

TabMake.java

package in.andante.tabmake;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class TabMake extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 TabHost host = (TabHost)findViewById(R.id.tabhost);
 host.setup();
 TabSpec tab1 = host.newTabSpec("tab1");
 View view1 = View.inflate(getApplication(), R.layout.tablayoutfile, null);  
 TextView text = (TextView)view1.findViewById(R.id.TextView01);  
 text.setText("tab1");  
 tab1.setIndicator(view1); 
 tab1.setContent(R.id.contentlayout1);
 host.addTab(tab1);

 TabSpec tab2 = host.newTabSpec("tab2");
 View view2 = View.inflate(getApplication(), R.layout.tablayoutfile, null);  
 TextView text2 = (TextView)view2.findViewById(R.id.TextView01);  
 text2.setText("tab2");  
 tab2.setIndicator(view2); 
 tab2.setContent(R.id.contentlayout2);
 host.addTab(tab2);
 }
}

以上です。

カテゴリー:コンポーネント

タブを下にコンテンツを上に表示したい

2011.04.08

前回のソースを利用します。

まず、構成を確認します。

※見易さの為、属性値は割愛しております。

<?xml version="1.0" encoding="utf-8"?>
<TabHost>
 <LinearLayout>
 <TabWidget/>
 <FrameLayout/>
 </LinearLayout>
</TabHost>

これで、表示されているのって、LinearLayoutで、

TabWidget:タブのエリア
FrameLayout:表示コンテンツエリア

と思ったので

<?xml version="1.0" encoding="utf-8"?>
<TabHost>
 <LinearLayout>
 <FrameLayout/>
 <TabWidget/>
 </LinearLayout>
</TabHost>

とTabWidgetとFrameLayoutを入れ替えてみました。

そうすると、エラーは出なかったのですが、タブも出なかったです。

ここで、おそらくFrameLayoutがandroid:layout_height=”fill_parent”の問題だと思って、android:layout_height=”wrap_content”に変更をすると、

tab

となります。

テキストや表示エリアがつっぱり棒みたいな役割をして欲しいのでandroid:layout_weight=”1″をFrameLayoutに使用をします。

tab

tabエリアが下で表示がされました。

今回しようしたxmlは以下になります。

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <FrameLayout
 android:id="@android:id/tabcontent"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_weight="1"/>
 <TabWidget
 android:id="@android:id/tabs"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
 </LinearLayout>
</TabHost>

カテゴリー:コンポーネント

tabを利用してのActivityを表示する。

2011.04.08

前回はtabの中にViewを表示させたので、今回はActivityを表示させたいと思います。

tab

見た目は前回とほぼ同じです。

Android Tab Layout Y.A.M の 雑記帳

を参考にさせていただきました。

前回はActivityを継承したクラスにTabHostを参照してViewを表示させたのですが、その方法だと、Tabの中にActivityを読み込む事ができません。(そういう仕様っぽいです。。)

なので、今回はメインのアクティビティクラスにはTabActivityを継承して利用をします。

 

まず、最初に読み込み対象のアクティビティを作成します。

tab1Activity.java

package in.andante.tabAct;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class tab1Activity extends Activity {
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 TextView textview = new TextView(this);
 textview.setText("This is Tab1");
 setContentView(textview);
 }
}

tab2Activity.java

package in.andante.tabAct;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class tab2Activity extends Activity {
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 TextView textview = new TextView(this);
 textview.setText("This is Tab2");
 setContentView(textview);
 }
}

上記のActivityを利用する為にマニフェストに登録をします。

manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="in.andante.tabAct"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="7" />

 <application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name=".TabAct"
 android:label="@string/app_name">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity
 android:name=".tab2Activity">  
 </activity>
 <activity
 android:name=".tab1Activity">  
 </activity>  
 </application>
</manifest>

次にmain.xmlですが、一番外の要素をtabHostにする必要があるので

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <TabWidget
 android:id="@android:id/tabs"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
 <FrameLayout
 android:id="@android:id/tabcontent"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>
 </LinearLayout>
</TabHost>

とします。FrameLayoutの中には必要のない要素はいれないようにしましょう。

TabActivityを利用する場合には、TabHostをgetTabHost()で取得できるのでメインのクラスは下記です。

package in.andante.tabAct;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabAct extends TabActivity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 TabHost tabHost = getTabHost();
 TabSpec tab1 = tabHost.newTabSpec("tab1");
 tab1.setIndicator("tab1");
 tab1.setContent(new Intent(this, tab1Activity.class));
 tabHost.addTab(tab1);
 
 TabSpec tab2 = tabHost.newTabSpec("tab2");
 tab2.setIndicator("tab2");
 tab2.setContent(new Intent(this, tab2Activity.class));
 tabHost.addTab(tab2);
 }
}

で簡単に作成できました。

カテゴリー:コンポーネント

tabを利用してのviewを作成する。

2011.04.08

アンドロイドを作成する際にtabを利用する事で、簡単にページを作る事ができます。

tab

移動なども実装されているインターフェイスを使えるので、設置をするだけで簡単に利用ができます。

Android Tab Layout Y.A.M の 雑記帳

に記載されている通りに

1. 同じ Activity で、タブごとに View を切り替える

2. タブごとに別々の Activity を割り当てる

の2通りのやり方があるようです。

今回はViewの切り替えを行いたいと思います。

タブメニューを利用する – Tech Booster –

で勉強をしたいと思ったのですが、

Intentで移動をするのであればTabActivityを継承すればよいのですが

メインのActibityをTabActivityにするとなぜかエラーが起こってしまったので、

下記を参照させていただきました。

Androidでタブを表示させる かずきのBlog@Hatena

※作成方法が違うので参考です。

 

最初にmain.xmlの中身を変更しました。

TextViewを取り除いて、TabHostを中に入れ込みました。

ここでtabHostのidが@android:id/tabhostのようになっているのですが、これだとなぜか指定が出来なかったので簡単に@+id/tabhostにしております。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
 android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical">
 <TabHost 
 android:id="@+id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent">
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical">
 <TabWidget 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:id="@android:id/tabs"></TabWidget>
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@android:id/tabcontent">
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout1">
 </LinearLayout>
 </FrameLayout>
 </LinearLayout>
 </TabHost>
</LinearLayout>

と言う形で表示がされていました。

ここでパブリッシュを行うと、なぜかエラー。。

 

どうやらtabの設定を行う為にはonCreateのファンクション中で宣言をする必要があるようです。

TabHost host = (TabHost) findViewById(R.id.tabhost);
host.setup();

で簡単に設定ができました。ここまで出来てもエラーが出てしまいます。
今度はタブの要素を作らないといけません。

また、tabhostに関しても、idで指定をしてないので、idを設定します。(@android:id/tabhostを@+id/tabhost)にします。android:idの設定はTabActivtyで使用する際に必要な設定になりますが、現在は使用しません。

タブの要素を調べると、FrameLayout内にLinerLayoutを作るとそれが一つのページとして機能をするようです。

なので、2ページ作成をしてみました。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
 android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical">
 <TabHost 
 android:id="@+id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent">
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical">
 <TabWidget 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:id="@android:id/tabs"></TabWidget>
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@android:id/tabcontent">
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout1">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout1が表示されています。" />
 </LinearLayout>
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout2">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout2が表示されています。" />
 </LinearLayout>
 </FrameLayout>
 </LinearLayout>
 </TabHost>
</LinearLayout>

これで表示を行う要素を作成できました。ですが、タブの部分をまだ作成をしてません。

次にタブを作成します。

任意名前で作成をします。

TabSpec firstTab = host.newTabSpec("firstTab");

次にタブに表示されるタイトル、画像をいれます。

tab1.setIndicator("タブ1",bitmapData);

ですが、第二引数の画像はnullでも問題ありません。画像入れる場合は

下記のように指定ができます。

new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.icon))//アイコン表示です。

そしてタブに対応をする、layoutを指定します。

tab1.setContent(R.id.contentlayout1);

ここで指定ができるのは、TabHostの中のFrameLayoutの中のデータだけです。

以上でタブで各viewを表示する事ができました。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
 android:layout_width="fill_parent" android:layout_height="fill_parent"
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical">
 <TabHost 
 android:id="@+id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent">
 <LinearLayout 
 android:id="@+id/linearLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical">
 <TabWidget 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:id="@android:id/tabs"></TabWidget>
 <FrameLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@android:id/tabcontent">
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout1">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout1が表示されています。" />
 </LinearLayout>
 <LinearLayout 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:id="@+id/contentlayout2">
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="layout2が表示されています。" />
 </LinearLayout>
 </FrameLayout>
 </LinearLayout>
 </TabHost>
</LinearLayout>

TabMake.java

package in.andante.tabmake;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabMake extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 
 TabHost host = (TabHost)findViewById(R.id.tabhost);
 host.setup();
 TabSpec tab1 = host.newTabSpec("tab1");
 tab1.setIndicator("tab1");
 tab1.setContent(R.id.contentlayout1);
 host.addTab(tab1);
 
 TabSpec tab2 = host.newTabSpec("tab2");
 tab2.setIndicator("tab2");
 tab2.setContent(R.id.contentlayout2);
 host.addTab(tab2);
 
 }
}

以上です。

カテゴリー:コンポーネント

Toastを表示してみる。

2011.02.22

ユーザーが何かを行った時に簡易的なテキストボックスを画面下部に出すToastと言う機能が備えられている。

toast

Toast自体は数秒で消えてしまうので、ユーザーに確実に伝えるものを提示するのには向かないが

ユーザーの動作の補助的な役割を行う事には使用が可能だ。

続きを読む…

カテゴリー:コンポーネント

公開中のアプリ、是非ダウンロードしてみてください

2chまとめのたね

RSSを利用してさまざまなブログの情報をキュレーションしてくれるアプリ

インストールする

ひらがな戦記

OPENGL ES2 を利用したカルタのソーシャルゲーム

インストールする