实现客户端主页的菜单和切换效果

实现客户端主页的菜单和切换效果

日常的生活中我们都会看到各式各样的客户端，底面都会有一些tab风格的菜单，点击的同时就会切换到相应的内容页面，而且tab菜单还是保留在当前页面底端。

类似下图：

通常实现这种风格的UI有两种方式一种就是TabHostActivity+TabHost+Activity,这种方式是v3.2以前的版本，对于新的版本来讲，比较推荐 FragmentActivity+FragmentTabHost+Fragment.关于这部分的实现我通过一个简单的小图来展示：

好了直接上代码了：
主activity布局 main_acitivty.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android"      android : layout_width = "fill_parent"      android : layout_height = "fill_parent"      android : orientation = "vertical" >      < FrameLayout          android : id = "@+id/realtabcontent"          android : layout_width = "fill_parent"          android : layout_height = "0dip"          android : layout_weight = "1" / >        < android . support . v4 . app . FragmentTabHost          android : id = "@android:id/tabhost"          android : layout_width = "fill_parent"          android : layout_height = "wrap_content"          android : background = "@drawable/maintab_toolbar_bg" >          < FrameLayout              android : id = "@android:id/tabcontent"              android : layout_width = "0dp"              android : layout_height = "0dp"              android : layout_weight = "0" / >                   < / android . support . v4 . app . FragmentTabHost > < / LinearLayout >

MainActivity的java代码实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

public class MainActivity extends FragmentActivity {   private FragmentTabHost tabHost ;   private LayoutInflater inflater ;   /** * 定义每个页面的布局 */ private Class fragments [ ] = { IndexFragment . class , GroundFragment . class , SearchFragment . class , MyFragment . class } ;   private int buttons_arr [ ] = { R . drawable . tab_home_btn , R . drawable . tab_square_btn , R . drawable . tab_message_btn , R . drawable . tab_selfinfo _btn } ;   private String button_names_arr [ ] = { "首页" , "广场" , "发现" , "我的云鼠" } ;   // private   @Override protected void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ) ; setContentView ( R . layout . activity_main ) ; // initialize view layout and data preparation   initYunshuView ( ) ; }   // 构建activity的基本布局和数据初始化 private void initYunshuView ( ) { //初始化布局 inflater = LayoutInflater . from ( this ) ; tabHost = ( FragmentTabHost ) findViewById ( android . R . id . tabhost ) ;   tabHost . setup ( this , getSupportFragmentManager ( ) , R . id . realtabcontent ) ;   int tabNum = fragments . length ;   for ( int i = 0 ; i & lt ; tabNum ; i ++ ) { //初始化tabspecu用来显示每次切换button后的内容 TabSpec tabSpec = tabHost . newTabSpec ( button_names_arr [ i ] ) . setIndicator ( this . initView ( i ) ) ; //把内容添加到tabhost中去 tabHost . addTab ( tabSpec , fragments [ i ] , null ) ; //设置背景颜色 tabHost . getTabWidget ( ) . getChildAt ( i ) . setBackgroundResource ( R . drawable . selector_tab_background ) ; }   }   /** * 初始化每一个应用页面的 button 按钮 * @param tabIndex * @return */ private View initView ( int tabIndex ) { View tabView = inflater . inflate ( R . layout . tab_item_view , null ) ;   ImageView imageView = ( ImageView ) tabView . findViewById ( R . id . imageview ) ; imageView . setImageResource ( buttons_arr [ tabIndex ] ) ;   TextView textView = ( TextView ) tabView . findViewById ( R . id . textview ) ; textView . setText ( button_names_arr [ tabIndex ] ) ;   return tabView ; }   }

关键部分就是初始化FragmentTabHost的那部分代码。