第一种:通过FragmentTabHost+Fragment来实现其点击顶部实现切换页面的效果!
页面结构如下:
第一步:编写布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <android.support.v4.app.FragmentTabHost android:layout_width="match_parent" android:layout_height="match_parent" android:id="@android:id/tabhost" > <!-- 系统要求,具体原因暂时还未追究,不然就会报错 这个FrameLayout并不是显示内容的fragment 且其id必须为tabcontent --> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0"/> </android.support.v4.app.FragmentTabHost> <!-- 用来存放标签所对应的内容,用来显示我们的fragment 若其放置在FragmentTabHost下边,则标签就位于上边, 反之,标签则位于下边 --> <FrameLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/fragment" > </FrameLayout> </LinearLayout>
第二步:Activity要继承于FragmentActivity
/**
* 由于AppCompatActivity继承FragmentActivity
* 所以无需再去继承FragmentActivity
*/
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
.....
第三步:添加Tab到TabHost中,且让Tab与 Tab所要显示的内容(fragment)绑定在一起
public class MainActivity extends FragmentActivity { private FragmentTabHost mTabHost; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //添加Tab到TabHost中,且让Tab与 Tab所要显示的内容(fragment)绑定在一起 mTabHost=(FragmentTabHost) findViewById(android.R.id.tabhost); /** * 在setup()里边,其才去获取到TabWidget,所以在此之前,不能直接调用getTabWidget()方法; */ mTabHost.setup(this, getSupportFragmentManager(), R.id.fragment); /** *addTab:添加标签到TabHost中 * setIndicator:表示设置标签的logo */ mTabHost.addTab(mTabHost.newTabSpec("message").setIndicator("消息"), MessageFragment.class, null); mTabHost.addTab(mTabHost.newTabSpec("connect").setIndicator("联系人"), WatchFragment.class, null); mTabHost.addTab(mTabHost.newTabSpec("watch").setIndicator("看点"), ConnectFragment.class, null); } }
第四步:编写XML和fragment。
ConnectFragment.java:
public class ConnectFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.activity_connetion,null); return view; } }
activity_connection.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Connetion" android:textSize="30dp" /> </LinearLayout>
总结:1>
Tab存在于TabWidget内,而TabWidget是存在于TabHost内。与此同时,
在TabHost内无需在写一个TabWidget,系统已经内置了一个TabWidget
2>关于fragment内容的布局,其位置可以放置在FragmentTabHost外面的上边,里边,或者外边的下边都可以;
当放置在上边时,那么标签是位于底部的;
当放置在里边或者外面的下边时,则此时,标签是位于顶部的;
第二种:通过FragmentTabHost+Fragment来实现其点击底部实现切换页面的效果!**
第一步:activity_main.xml(主布局文件)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- 存放主要页面内容 --> <FrameLayout android:id="@+id/maincontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </FrameLayout> <!-- 底层菜单 --> <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0" > </FrameLayout> </android.support.v4.app.FragmentTabHost> </LinearLayout>第二步:activity_connection.xml布局((由于只有文字不同,这里只给出一个))
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Connetion" android:textSize="30dp" /> </LinearLayout>
第三步:ConnectFragment.java同上,只显示一个
public class ConnectFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.activity_connetion,null); return view; } }
第四步:tabcontent.xml(具体底部菜单详细布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:gravity="center_horizontal" android:layout_height="match_parent"> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/text" android:padding="2dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" /> </LinearLayout>
第四步:bt_selector.xml(底部菜单点击背景)
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <item android:drawable="@drawable/icon_setting" android:state_pressed="true" /> <item android:drawable="@drawable/icon_setting" android:state_selected="true" /> </selector>
第五步:MainActivity.java(主代码)
public class MainActivity extends AppCompatActivity { private FragmentTabHost fragmentTabHost; private String texts[]={"消息","联系人","看点","动态"}; private int imageButton[]={R.drawable.icon_setting,R.drawable.icon_setting,R.drawable.icon_setting,R.drawable.icon_setting}; private Class fragmentArray[]={MessageFragment.class,ConnectFragment.class, WatchFragment.class, DynamicFragment.class}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //实例化tabhost fragmentTabHost=(FragmentTabHost)findViewById(android.R.id.tabhost); fragmentTabHost.setup(this,getSupportFragmentManager(),R.id.maincontent); for (int i=0;i<texts.length;i++){ TabHost.TabSpec spec=fragmentTabHost.newTabSpec(texts[i]).setIndicator(getView(i)); fragmentTabHost.addTab(spec,fragmentArray[i],null); fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.colorAccent); } } private View getView(int i) { //取得布局实例 View view=View.inflate(MainActivity.this, R.layout.tabcontent, null); //取得布局对象 ImageView imageView=(ImageView) view.findViewById(R.id.image); TextView textView=(TextView) view.findViewById(R.id.text); //设置图标 imageView.setImageResource(imageButton[i]); //设置标题 textView.setText(texts[i]); return view; } }如果想在FragmentTabHost中背景显示颜色的话,就用
.setBackgroundResource(R.color.colorAccent)
如果想显示背景图片的话,就用
.setBackgroundResource(R.drawable.bt_selector);