上一次学习了TabHost的基本使用(),今天学习一下实际稍微高级的应用, 例如在微博等等客户端中经常看到界面底部的那一排控件;
先看下Demo效果截图下:
要做出这样的效果,其实难度不大 总体使用一个TabHost, Tabhost上面使用RadioGroup和RadioButton的组件,然后每一个选项
对应一个Activity,点击跳转相应的Activity.
下面来看下TabHost的布局文件:
上面布局文中的 style="@style/main_style"是用的自定义样式,里面主要定义一些文字大小,和布局,还有点击的时候图片改变
接下来看总的MainActivity :
package com.android.tabhost; import com.android.R; import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.widget.RadioGroup; import android.widget.TabHost; import android.widget.RadioGroup.OnCheckedChangeListener; import android.widget.TabHost.TabSpec; public class MainActivity extends TabActivity { private static final String FISRT = "first"; private static final String SECOND = "second"; private static final String THIRD = "third"; private static final String FOUR = "four"; private TabHost tabHost; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.main_tabhost); tabHost = this.getTabHost(); // 点击相应选项选项,跳转到相应的Activity,创建TabSpec TabSpec homeSpec = tabHost.newTabSpec(FISRT).setIndicator(FISRT) .setContent(new Intent(this, FirstActivity.class)); TabSpec atSpec = tabHost.newTabSpec(SECOND).setIndicator(SECOND) .setContent(new Intent(this, SecondActivity.class)); TabSpec msgSpec = tabHost.newTabSpec(THIRD).setIndicator(THIRD) .setContent(new Intent(this, ThirdActivtiy.class)); TabSpec moreSpec = tabHost.newTabSpec(FOUR).setIndicator(FOUR) .setContent(new Intent(this, FourActivity.class)); // 添加TabSpec 到选项卡中 tabHost.addTab(homeSpec); tabHost.addTab(atSpec); tabHost.addTab(msgSpec); tabHost.addTab(moreSpec); RadioGroup radioGroup = (RadioGroup) this .findViewById(R.id.rg_main_btns); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { /** * 响应点击事件 */ public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.first: tabHost.setCurrentTabByTag(FISRT); break; case R.id.second: tabHost.setCurrentTabByTag(SECOND); break; case R.id.third: tabHost.setCurrentTabByTag(THIRD); break; case R.id.four: tabHost.setCurrentTabByTag(FOUR); break; } } }); } }
下面对应四个Activity:
package com.android.tabhost; import com.android.R; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class FirstActivity extends Activity { private static final String TAG = "FirstActivity"; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.first); System.out.println("FirstActivity...."); } }
package com.android.tabhost; import com.android.R; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class SecondActivity extends Activity { private static final String TAG = "SecondActivity"; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.second); System.out.println("SecondActivity。。。。"); } }
package com.android.tabhost; import com.android.R; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class ThirdActivtiy extends Activity { private static final String TAG = "ThirdActivtiy"; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.third); System.out.println("ThirdActivtiy...."); } }
package com.android.tabhost; import com.android.R; import android.app.Activity; import android.os.Bundle; import android.util.Log; public class FourActivity extends Activity { private static final String TAG = "FourActivity"; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.four); System.out.println("FourActivity....."); } }
下面看下这样去使用还有一个体现Android性能的地方,当我们点击下面四个选项的时候,点击点击完成之后Activity将会被onCreate() 但是当点击一次之后,接下去再去点击,会发现不会去执行onCreate(),这样其实Activity只会被创建一次,这样效率高了很多:
上面当点击到点第三个Activity还可以创建
然后继续点击第四个,---->点击第一个看效果,下面就没有输出了
好了今天就写到这里,继续学习了