浅谈Android选项卡（二）

前面简单介绍了选项卡，下面以及后面的几篇文章介绍下Android选项卡的几种简单实现方法。

http://blog.csdn.net/xia215266092/article/details/9613897

看到上面的最版本的ＱＱ软件，整个软件的UI框架就是选项卡，一般想到的就是使用Android自带的TabActivity实现。

实现需要一个主界面，来存放选项卡，在布局中需要存放TabHost和TabWidget。

<?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:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="1dip"
            android:paddingRight="1dip"
            android:paddingTop="4dip"
            android:visibility="gone" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />
        <RadioGroup
            android:id="@+id/rg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#f00"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/rb01"
                style="@style/menu_item"
                android:checked="true"
                android:drawableTop="@drawable/menu_home"
                android:text="主页" />

            <RadioButton
                android:id="@+id/rb02"
                style="@style/menu_item"
                android:drawableTop="@drawable/menu_clear"
                android:text="清除" />

            <RadioButton
                android:id="@+id/rb03"
                style="@style/menu_item"
                android:drawableTop="@drawable/menu_refresh"
                android:text="刷新" />

            <RadioButton
                android:id="@+id/rb04"
                style="@style/menu_item"
                android:drawableTop="@drawable/menu_save"
                android:text="保存" />

            <RadioButton
                android:id="@+id/rb05"
                style="@style/menu_item"
                android:drawableTop="@drawable/menu_more"
                android:text="更多" />
        </RadioGroup>

    </LinearLayout>

</TabHost>

同时需要个Activity，这个Activity必须继承TabActivity，其实也不一定需要继承这个，可以继承ActivityGroup，自定义一个tabactivity，但是这样比较复杂，所以我们还是继承TabActivity吧。

public class TabMainActivity extends TabActivity {

	TabHost tab;
	Context context;
	RadioGroup rg;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tab_main);
		
		tab = getTabHost();
		context = this;

		tab.addTab(tab.newTabSpec("A").setIndicator("A").setContent(new Intent(context, AActivity.class)));
		tab.addTab(tab.newTabSpec("B").setIndicator("B").setContent(new Intent(context, BActivity.class)));
		tab.addTab(tab.newTabSpec("C").setIndicator("C").setContent(new Intent(context, CActivity.class)));
		tab.addTab(tab.newTabSpec("D").setIndicator("D").setContent(new Intent(context, DActivity.class)));
		tab.addTab(tab.newTabSpec("E").setIndicator("E").setContent(new Intent(context, EActivity.class)));

		rg = (RadioGroup) findViewById(R.id.rg);
		rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				int idx = -1;
				if (checkedId == R.id.rb01) {
					idx = 0;
				} else if (checkedId == R.id.rb02) {
					idx = 1;
				} else if (checkedId == R.id.rb03) {
					idx = 2;
				} else if (checkedId == R.id.rb04) {
					idx = 3;
				} else if (checkedId == R.id.rb05) {
					idx = 4;
				}
				switchActivity(idx);
			}
		});
	}

	protected void switchActivity(int idx) {
		int n = tab.getCurrentTab();

		if (idx < n) {
			tab.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_left_out));
		} else if (idx > n) {
			tab.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_right_out));
		}
		tab.setCurrentTab(idx);
		if (idx < n) {
			tab.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_left_in));
		} else if (idx > n) {
			tab.getCurrentView().startAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_right_in));
		}
		
		RadioButton rb = (RadioButton) rg.getChildAt(idx);
		rb.setChecked(true);
	}

	private Map<String, Object> data = new HashMap<String, Object>();

	protected void put(String key, String value) {
		data.put(key, value);
	}

	protected Object get(String key) {
		return data.get(key);
	}
}

AActivity,BActivity,CActivity,DActivity,EActivity，都是点击选项卡，对应的Activity，这样UI框架，可以按照软件的功能来分模块，便于团队人员的合作和开发。

   

底部的菜单使用的RadioGroup，因在RadioGroup里面的有若干RadioButton，只有能有一个才能被选中，这样就很完美的实现的上面被选中的效果，Android有自定义Radiobutton选中的背景。

自定义一个Radiobutton

<RadioButton
                android:id="@+id/rb01"
                style="@style/menu_item"
                android:checked="true"
                android:drawableTop="@drawable/menu_home"
                android:text="主页" />

然后在自定义一个style，让RadioButtong使用使用这个Style。

<style name="menu_item">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:padding">10dp</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/menu_item_bg</item>
        <item name="android:layout_weight">1</item>
    </style>

<item name="android:background">@drawable/menu_item_bg</item>

就是这个RadioButton的背景。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="false" android:state_checked="false" android:drawable="@drawable/menu_normal" />
	<item android:state_checked="true" android:drawable="@drawable/menu_press" />
	<item android:state_pressed="true" android:drawable="@drawable/menu_press" />
</selector>

定义不同状态的显示的背景，当选中或者是被点击的时候，使用的背景menu_press，否则就是menu_normal。
好了，这篇先简单介绍在这里，后面还有后续。