ตัวอย่างการกำหนด View บน Tab ใน TabSpec : Android
 

Tutorial :: Android :: ตัวอย่างการใช้งาน :: ตัวอย่างการกำหนด View บน Tab ใน TabSpec

ในบทความนี้ จะแสดงให้เห็นถึงตัวอย่างการกำหนด View บน Tab ใน TabSpec โดยจะแสดงให้เห็นถึงการเขียนคำสั่งภายใน Class Activity, การเขียนคำสั่งภายในไฟล์ XML Layout, และการประกาศ Activity ไว้ภายในไฟล์ AndroidManifest.xml ดังนี้


การเขียนคำสั่งภายใน Class Activity

  • package nutt.me.activity;
  • import android.app.Activity;
  • import android.os.Bundle;
  • import android.view.Gravity;
  • import android.view.View;
  • import android.widget.ImageView;
  • import android.widget.LinearLayout;
  • import android.widget.TabHost;
  • import android.widget.TextView;
  • public class MainActivity extends Activity
  • {
  • public void onCreate ( Bundle savedInstanceState )
  • {
  • super.onCreate ( savedInstanceState );
  • this.setContentView ( R.layout.activity_main );
  • TabHost tabHost = ( TabHost ) this.findViewById ( R.id.tabhost );
  • tabHost.setup ( );
  • View view_analogClock = this.getTabView ( R.drawable.tab_analog, "Analog" );
  • View view_digitalClock = this.getTabView ( R.drawable.tab_digital, "Digital" );
  • TabHost.TabSpec tab_analogClock = tabHost.newTabSpec ( "analogclock" );
  • tab_analogClock.setIndicator ( view_analogClock );
  • tab_analogClock.setContent ( R.id.analogclock );
  • tabHost.addTab ( tab_analogClock );
  • TabHost.TabSpec tab_digitalClock = tabHost.newTabSpec ( "digitalclock" );
  • tab_digitalClock.setIndicator ( view_digitalClock );
  • tab_digitalClock.setContent ( R.id.digitalclock );
  • tabHost.addTab ( tab_digitalClock );
  • }
  • private View getTabView ( int imageResource, String text )
  • {
  • LinearLayout layout = new LinearLayout ( this );
  • layout.setOrientation ( LinearLayout.HORIZONTAL );
  • layout.setGravity ( Gravity.CENTER );
  • LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams ( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT );
  • ImageView imageView = new ImageView ( this );
  • imageView.setImageResource ( imageResource );
  • layout.addView ( imageView, layoutParams );
  • TextView textView = new TextView ( this );
  • textView.setText ( text );
  • layout.addView ( textView, layoutParams );
  • return layout;
  • }
  • }

จากคำสั่งข้างต้น สามารถอธิบายได้ว่า คำสั่ง TabHost.TabSpec tab_analogClock = tabHost.newTabSpec ( "analogclock" ); ในบรรทัดที่ 31 เป็นการสร้าง Object TabSpec โดยกำหนด Tag มีค่าข้อมูลคือ "analogclock" และคำสั่ง TabHost.TabSpec tab_digitalClock = tabHost.newTabSpec ( "digitalclock" ); ในบรรทัดที่ 40 เป็นการสร้าง Object TabSpec โดยกำหนด Tag มีค่าข้อมูลคือ "digitalclock" และคำสั่ง tab_analogClock.setIndicator ( view_analogClock ); ในบรรทัดที่ 33 รวมถึงคำสั่ง tab_digitalClock.setIndicator ( view_digitalClock ); ในบรรทัดที่ 42 เป็นการกำหนด View บน Tab ใน TabSpec


การเขียนคำสั่งภายในไฟล์ XML Layout

  • <?xml version="1.0" encoding="utf-8"?>
  • <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  • android:id="@+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" >
  • <AnalogClock
  • android:id="@+id/analogclock"
  • android:layout_width="fill_parent"
  • android:layout_height="fill_parent" />
  • <DigitalClock
  • android:id="@+id/digitalclock"
  • android:layout_width="fill_parent"
  • android:layout_height="fill_parent" />
  • </FrameLayout>
  • </LinearLayout>
  • </TabHost>

จากคำสั่งข้างต้น สามารถอธิบายได้ว่า element <TabHost> มี id คือ tabhost (ประกาศไว้ในบรรทัดที่ 3) และ element <AnalogClock> มี id คือ analogclock (ประกาศไว้ในบรรทัดที่ 23) และ element <DigitalClock> มี id คือ digitalclock (ประกาศไว้ในบรรทัดที่ 28) ซึ่ง id เหล่านี้ถูกใช้อ้างอิงใน Class Activity ข้างต้น


การประกาศ Activity ไว้ภายในไฟล์ AndroidManifest.xml

  • <?xml version="1.0" encoding="utf-8"?>
  • <manifest ... >
  • <application ... >
  • <activity android:name="nutt.me.activity.MainActivity" ... >
  • <intent-filter>
  • <action android:name="android.intent.action.MAIN" />
  • <category android:name="android.intent.category.LAUNCHER" />
  • </intent-filter>
  • </activity>
  • </application>
  • </manifest>

จากคำสั่งข้างต้น สามารถอธิบายได้ว่า มีการประกาศ Activity ชื่อ MainActivity ที่อยู่ใน Package nutt.me.activity ไว้ภายในไฟล์ AndroidManifest.xml ในบรรทัดที่ 4


หน้าจอแสดงผลของ ตัวอย่างการกำหนด View บน Tab ใน TabSpec จากการเขียนคำสั่งข้างต้น

หน้าจอแสดงผลของ ตัวอย่างการกำหนด View บน Tab ใน TabSpec

จากรูปแสดงหน้าจอของ MainActivity

Download This Example

0 Comment

  • Have no comment.

Comment Tutorial

 
 
 
 
Share This Topic Login with Facebook