本帖只实现了底部导航(带小红点提示)的前台布局和tab切换功能,后续会把小红点动态显示与隐藏即根据新数据来控制底部提示的功能加上。
实现原理TabHost+RadioButton,底部提示角标(小红点)使用FrameLayout布局。
布局代码:
MMTabButton样式
其中main_tab_textcolor和main_tab_selector1/2/3/4定义的都为selector,目的是为了实现点击改变图标和文字颜色
实现原理TabHost+RadioButton,底部提示角标(小红点)使用FrameLayout布局。
布局代码:
<?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" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_weight="1.0" />
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:visibility="gone" />
<LinearLayout
android:id="@+id/main_tab_group"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/main_tab_bg"
android:gravity="bottom"
android:orientation="horizontal"
android:paddingTop="2.0dip"
android:paddingBottom="2.0dip" >
<FrameLayout
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:background="@null" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom|center" >
<RadioButton
android:id="@+id/main_tab_first"
style="@style/MMTabButton"
android:checked="true"
android:drawableTop="@drawable/main_tab_selector1"
android:text="@string/main_tab_first_text" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|right|center"
android:paddingRight="10.0dip" >
<TextView
android:id="@+id/main_tab_first_unread_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/main_tab_unread_bg"
android:gravity="center"
android:text="@null"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="invisible" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:background="@null" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom|center" >
<RadioButton
android:id="@+id/main_tab_second"
style="@style/MMTabButton"
android:drawableTop="@drawable/main_tab_selector2"
android:text="@string/main_tab_second_text" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|right|center"
android:paddingRight="10.0dip" >
<TextView
android:id="@+id/main_tab_second_unread_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/main_tab_unread_bg"
android:gravity="center"
android:text="@null"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="invisible" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:background="@null" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom|center" >
<RadioButton
android:id="@+id/main_tab_three"
style="@style/MMTabButton"
android:drawableTop="@drawable/main_tab_selector3"
android:text="@string/main_tab_three_text" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|right|center"
android:paddingRight="10.0dip" >
<TextView
android:id="@+id/main_tab_three_prospect_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/main_tab_newnotice"
android:gravity="center"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="invisible" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|right|center"
android:paddingRight="10.0dip" >
<TextView
android:id="@+id/main_tab_three_new_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/main_tab_unread_bg"
android:gravity="center"
android:text="@string/app_new"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="invisible" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="0.0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:background="@null" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom|center" >
<RadioButton
android:id="@+id/main_tab_four"
style="@style/MMTabButton"
android:drawableTop="@drawable/main_tab_selector4"
android:text="@string/main_tab_four_text" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|right|center"
android:paddingRight="10.0dip" >
<TextView
android:id="@+id/main_tab_four_new_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/main_tab_unread_bg"
android:gravity="center"
android:minWidth="40.0dip"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:text="@string/app_new"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="invisible" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</TabHost>
MMTabButton样式
<style name="MMTabButton">
<item name="android:textSize">12.0dip</item>
<item name="android:textColor">@color/main_tab_textcolor</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:background">@null</item>
<item name="android:layout_width">0.0dip</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginLeft">0.70000005dip</item>
<item name="android:layout_marginRight">0.70000005dip</item>
<item name="android:button">@null</item>
<item name="android:layout_weight">1.0</item>
</style>
其中main_tab_textcolor和main_tab_selector1/2/3/4定义的都为selector,目的是为了实现点击改变图标和文字颜色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/main_color"/>
<item android:state_checked="true" android:color="@color/main_color"/>
<item android:color="@color/bottom_navigation_bar_normal_textcolor"/>
</selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/main_tab_selector1_selected" android:state_checked="true"/>
<item android:drawable="@drawable/main_tab_selector1_normal"/>
</selector>
下面是Java代码的实现:
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.TabHost;
import android.widget.CompoundButton.OnCheckedChangeListener;
public class MainActivity extends TabActivity implements OnCheckedChangeListener {
private TabHost tabHost;
private Intent firstIntent;
private Intent secondIntent;
private Intent thirdIntent;
private Intent fourthIntent;
private RadioButton firstBt;
private RadioButton secondBt;
private RadioButton thirdBt;
private RadioButton fourthBt;
private int mState = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
firstIntent = new Intent(this, ActionItems.class);
secondIntent = new Intent(this, ActionItems.class);
thirdIntent = new Intent(this, ActionItems.class);
fourthIntent = new Intent(this, ActionItems.class);
firstBt = (RadioButton) findViewById(R.id.main_tab_first);
secondBt = (RadioButton) findViewById(R.id.main_tab_second);
thirdBt = (RadioButton) findViewById(R.id.main_tab_three);
fourthBt = (RadioButton) findViewById(R.id.main_tab_four);
tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(firstIntent));
tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(secondIntent));
tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(thirdIntent));
tabHost.addTab(tabHost.newTabSpec("fourth").setIndicator("fourth").setContent(fourthIntent));
firstBt.setOnCheckedChangeListener(this);
secondBt.setOnCheckedChangeListener(this);
thirdBt.setOnCheckedChangeListener(this);
fourthBt.setOnCheckedChangeListener(this);
}
public void setCurrentTab(int index) {
switchState(index);
}
private void switchState(int state) {
if (mState == state) {
return;
} // else continue
mState = state;
firstBt.setChecked(false);
secondBt.setChecked(false);
thirdBt.setChecked(false);
fourthBt.setChecked(false);
switch (mState) {
case 0:
firstBt.setChecked(true);
tabHost.setCurrentTabByTag("first");
break;
case 1:
secondBt.setChecked(true);
tabHost.setCurrentTabByTag("second");
break;
case 2:
thirdBt.setChecked(true);
tabHost.setCurrentTabByTag("third");
break;
case 3:
fourthBt.setChecked(true);
tabHost.setCurrentTabByTag("fourth");
break;
default:
break;
}
}
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
if (isChecked) {
switch (buttonView.getId()) {
case R.id.main_tab_first:
switchState(0);
break;
case R.id.main_tab_second:
switchState(1);
break;
case R.id.main_tab_three:
switchState(2);
break;
case R.id.main_tab_four:
switchState(3);
break;
default:
break;
}
}
}
}
由于布局文件中没有使用RadioGroup包着四个RadioButton,并且其中的RadioButton之间又掺杂着其他布局。所以简单的通过使用RadioGroup包着四个RadioButton是满足不了需求的,只能在代码中控制点击操作,即通过switchState方法模拟RadioGroup只能单选的事件。