fragment 管理自己的布局,是独立的,activity只负责调度fragment,而ViewPager 包括布局在内全部由activity管理
优化布局层次
include merge Viewstub
fragment的父布局是FrameLayout
此次的实现,内容区域已经不是ViewPager,而是4个fragment.Android3.0版本以上开始推荐使用Fragment,但不可以左右滑动
----------------------------------
Top.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="45dp" android:background="@drawable/title_bar" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="微信" android:textColor="#ffffff" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout>
Bottom.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="55dp" android:background="@drawable/bottom_bar" android:orientation="horizontal" > <LinearLayout android:id="@+id/id_tab_weixin" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_weixin_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_weixin_pressed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_frd" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_frd_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_find_frd_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_address" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_address_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_address_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/id_tab_settings" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_settings_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false"
[注意点在于为LinearLayout设置监听器的时候,会出现点击文字能响应监听事件,
而点击图片不会响应的情况,问题在于LinearLayout会把监听事件先交给ImageButton,
因为它是可以点击的,而ImageButton中未实现监听器,所以不能响应。
解决方法就是设置它不能被点击。在XML文件中,添加android:clickable="false",就可以。] android:src="@drawable/tab_settings_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#ffffff" /> </LinearLayout> </LinearLayout>
activity_main.xml
<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" > <include layout="@layout/top" /> <FrameLayout android:id="@+id/id_content" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" ></FrameLayout> <include layout="@layout/bottom" /> </LinearLayout>
tab01.xml tab02.xml tab03.xml tab04.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" > <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Frd Tab" android:textSize="30sp" android:textStyle="bold" /> </LinearLayout>
WeixinFragment.java
package com.imooc.tab02; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class WeixinFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab01, container, false); } }
SettingFragment .java
package com.imooc.tab02; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class SettingFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab04, container, false); } }
FrdFragment .java
package com.imooc.tab02; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FrdFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab02, container, false); } }
AddressFragment .java
package com.imooc.tab02; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class AddressFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab03, container, false); } }
MainActivity .java
package com.imooc.tab02; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; public class MainActivity extends FragmentActivity implements OnClickListener { private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSettings; private ImageButton mImgWeixin; private ImageButton mImgFrd; private ImageButton mImgAddress; private ImageButton mImgSettings; private Fragment mTab01; private Fragment mTab02; private Fragment mTab03; private Fragment mTab04; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); initEvent(); setSelect(0); } private void initEvent() { mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSettings.setOnClickListener(this); } private void initView() { mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img); mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img); mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img); mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img); } private void setSelect(int i) { FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); // 把图片设置为亮的 // 设置内容区域 switch (i) { case 0: if (mTab01 == null) { mTab01 = new WeixinFragment(); transaction.add(R.id.id_content, mTab01); } else { transaction.show(mTab01); } mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: if (mTab02 == null) { mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02); } else { transaction.show(mTab02); } mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: if (mTab03 == null) { mTab03 = new AddressFragment(); transaction.add(R.id.id_content, mTab03); } else { transaction.show(mTab03); } mImgAddress.setImageResource(R.drawable.tab_address_pressed); break; case 3: if (mTab04 == null) { mTab04 = new SettingFragment(); transaction.add(R.id.id_content, mTab04); } else { transaction.show(mTab04); } mImgSettings.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } transaction.commit(); } private void hideFragment(FragmentTransaction transaction) { if (mTab01 != null) { transaction.hide(mTab01); } if (mTab02 != null) { transaction.hide(mTab02); } if (mTab03 != null) { transaction.hide(mTab03); } if (mTab04 != null) { transaction.hide(mTab04); } } @Override public void onClick(View v) { resetImgs(); switch (v.getId()) { case R.id.id_tab_weixin: setSelect(0); break; case R.id.id_tab_frd: setSelect(1); break; case R.id.id_tab_address: setSelect(2); break; case R.id.id_tab_settings: setSelect(3); break; default: break; } } /** * 切换图片至暗色 */ private void resetImgs() { mImgWeixin.setImageResource(R.drawable.tab_weixin_normal); mImgFrd.setImageResource(R.drawable.tab_find_frd_normal); mImgAddress.setImageResource(R.drawable.tab_address_normal); mImgSettings.setImageResource(R.drawable.tab_settings_normal); } }
步骤:
1.fragment代码,继承 Fragment,重写onCreateView,复制四份
2.在activity_main.xml修改布局Framlayout
3.在MainActivity.java初始化View
初始化事件监听器
view添加各自的事件监听器
tab监听事件内容:
所有图片置灰
选中tab图片高亮
framlayout显示相应fragment
获得一个FragmentManager
开启一个FragmentTransaction
beginTransaction
监听事件中new Fragment,manager Fragment
hideFragment(FragmentTransaction)// 隐藏所有
fragmentTransaction.hide(Fragment)// 隐藏一个
fragmentTransaction.show(Fragment)// 显示一个
提交事务fragmentTransaction.commit();