TabHost可以让手机屏幕的内容尽量丰富,是一个比较常用的控件,但原生的TabHost用户体验并不好,实际开发中通常是借助其他控件来达到更好的控制显示效果。比如GridView+ActivityGroup的组合、RadioGroup等等。今天就给出RadioGroup的实现方式。老规矩,先上图:
仿周末画报(iWeekly)双击隐藏bottom。实际应用场景:阅读一篇文章时,为了享受更大的屏幕空间,双击屏幕,隐藏顶部、底部的一些功能性控件,比如回退按钮、刷新按钮,当你想回退或者刷新时,再双击一次,显示控件。
双击前:
双击后:
下面给出具体的实现代码:
清单文件就不说了,就是自动生成的:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.focustech.radiogrouptabhost"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="14" />
<application
android:label="@string/app_name" >
<activity
android:label="@string/app_name"
android:name=".RadioGroupTabHostActivity" >
<intent-filter >
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
定义按钮被点击,选中时的背景 :
<?xml version="1.0" encoding="utf-8"?>
<!--定义按钮被点击,选中时的背景 -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/main_btn_bg" />
<item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/main_btn_bg" />
</selector>
样式文件,主要是为了改造原生的单选按钮:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--设定按钮样式-->
<style name="main_btn_style">
<!-- 去除原生的单选按钮图标 -->
<item name="android:button">@null</item>
<item name="android:textSize">10dp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:drawablePadding">4dp</item>
<item name="android:layout_weight">1.0</item>
<!-- 引用 main_btn_bg_d.xml,设定当按钮被press、checked时的背景图,以此增强点击、选中按钮时的视觉效果-->
<item name="android:background">@drawable/main_btn_bg_d</item>
</style>
</resources>
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#104E8B"
android:id="@android:id/tabhost"
>
<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"
android:visibility="gone"/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
>
<TextView android:id="@+id/home_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="主页"
/>
<TextView android:id="@+id/message_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="信息"/>
<TextView android:id="@+id/more_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="更多"/>
</FrameLayout>
<RadioGroup android:id="@+id/rg_main_btns"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/bar"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:gravity="center_vertical"
>
<RadioButton android:id="@+id/rd_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主页"
style="@style/main_btn_style"
android:checked="true"
android:drawableTop="@drawable/home_icon"/>
<RadioButton android:id="@+id/rd_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="信息"
style="@style/main_btn_style"
android:drawableTop="@drawable/msg_icon"/>
<RadioButton android:id="@+id/rd_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
style="@style/main_btn_style"
android:drawableTop="@drawable/more_icon"/>
</RadioGroup>
</LinearLayout>
</TabHost>
RadioGroupTabHostActivity.java文件:
package com.focustech.radiogrouptabhost;
import android.app.TabActivity;
@SuppressWarnings("deprecation")
public class RadioGroupTabHostActivity extends TabActivity implements
OnCheckedChangeListener, OnTouchListener {
private static final String HOME_TAB = "home";
private static final String MSG_TAB = "message";
private static final String MORE_TAB = "more";
private TextView homeContent;
private int count = 0;
private long firClick = 0L;
private TabHost tabHost;
private RadioGroup radioGroup;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init();
}
public void init() {
tabHost = this.getTabHost();
// 由于在布局文件main中已经定义了TabHost、FrameLayout布局,这里不需要手动将布局文件添加到tabHost的FrameLayout下面
// LayoutInflater.from(this).inflate(R.layout.main,
// tabHost.getTabContentView(), true);
TabSpec homeSpec = tabHost.newTabSpec(HOME_TAB).setIndicator(HOME_TAB)
.setContent(R.id.home_content);
TabSpec msgSpec = tabHost.newTabSpec(MSG_TAB).setIndicator(MSG_TAB)
.setContent(R.id.message_content);
TabSpec moreSpec = tabHost.newTabSpec(MORE_TAB).setIndicator(MORE_TAB)
.setContent(R.id.more_content);
// 添加面板
tabHost.addTab(homeSpec);
tabHost.addTab(msgSpec);
tabHost.addTab(moreSpec);
homeContent = (TextView) this.findViewById(R.id.home_content);
homeContent.setOnTouchListener(this);
radioGroup = (RadioGroup) this.findViewById(R.id.rg_main_btns);
radioGroup.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rd_home:
tabHost.setCurrentTabByTag(HOME_TAB);
break;
case R.id.rd_msg:
tabHost.setCurrentTabByTag(MSG_TAB);
break;
case R.id.rd_more:
tabHost.setCurrentTabByTag(MORE_TAB);
break;
default:
break;
}
}
// 模拟双击事件
public boolean onTouch(View v, MotionEvent event) {
if (MotionEvent.ACTION_DOWN == event.getAction()) {
// 这里的count、firClick都要定义成全局变量,secClick则没有必要
count++;
if (count == 1) {
firClick = System.currentTimeMillis();
} else if (count == 2) {
Long secClick = System.currentTimeMillis();
count = 0;
// 设定当两次触摸时间间隔小于一秒时为双击事件
if ((secClick - firClick) < 1000) {
// 切换底部tab的显示与隐藏
switch (radioGroup.getVisibility()) {
case View.VISIBLE:
radioGroup.setVisibility(View.GONE);
break;
default:
radioGroup.setVisibility(View.VISIBLE);
break;
}
}
}
}
return false;
}
}
好了,同事喊我吃午饭了,今天就到这里。