本帖只实现了底部导航（带小红点提示）的前台布局和tab切换功能，后续会把小红点动态显示与隐藏即根据新数据来控制底部提示的功能加上。
实现原理TabHost+RadioButton，底部提示角标（小红点）使用FrameLayout布局。
由于布局文件中没有使用RadioGroup包着四个RadioButton，并且其中的RadioButton之间又掺杂着其他布局。所以简单的通过使用RadioGroup包着四个RadioButton是满足不了需求的，只能在代码中控制点击操作，即通过switchState方法模拟RadioGroup只能单选的事件。
最终效果图：
其中main_tab_textcolor和main_tab_selector1/2/3/4定义的都为selector，目的是为了实现点击改变图标和文字颜色
实现原理TabHost+RadioButton，底部提示角标（小红点）使用FrameLayout布局。
布局代码：
<pre name="code" class="html"><?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>由于布局文件中没有使用RadioGroup包着四个RadioButton，并且其中的RadioButton之间又掺杂着其他布局。所以简单的通过使用RadioGroup包着四个RadioButton是满足不了需求的，只能在代码中控制点击操作，即通过switchState方法模拟RadioGroup只能单选的事件。
最终效果图：
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;
}
}
}
}
2067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
