基于RadioGroup的TabHost实现[ 转]
转自: http://blog.csdn.net/mongdb/article/details/7056024
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; } }