1、在主页面(activity引用Fragment )的布局文件中定义FrameLayout ,加载Fragment
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fl_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
2、初始化Fragment
private void initFragment() {
// Fragment管理器
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();// 开始事务
// 将帧布局替换为对应的Fragment
transaction
.replace(R.id.fl_content, new ContentFragment(), TAG_CONTENT);
transaction.replace(R.id.fl_left_menu, new LeftMenuFragment(),
TAG_LEFT_MENU);
transaction.commit();// 提交事务
// fm.findFragmentByTag(TAG_CONTENT);
}
3、定义Fragment基类
public abstract class BaseFragment extends Fragment { public Activity mActivity; // Fragment被创建 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mActivity = getActivity();// 获取所在的activity对象 } // 初始化Fragment布局 @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = initView(); return view; } // activity创建结束 @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); initData(); } /** * 初始化布局, 子类必须实现 */ public abstract View initView(); /** * 初始化数据, 子类可以不实现 */ public void initData() { } }
4、定义下方菜单
<?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.view.ViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/bottom_tab_bg" android:gravity="center" android:orientation="horizontal" > <RadioButton android:id="@+id/rb_home" style="@style/BottomTabStyle" android:drawableTop="@drawable/btn_home_selector" android:checked="true" android:text="首页" /> <RadioButton android:id="@+id/rb_news" style="@style/BottomTabStyle" android:drawableTop="@drawable/btn_news_selector" android:text="新闻中心" /> <RadioButton android:id="@+id/rb_smart" style="@style/BottomTabStyle" android:drawableTop="@drawable/btn_smart_selector" android:text="智慧服务" /> <RadioButton android:id="@+id/rb_gov" style="@style/BottomTabStyle" android:drawableTop="@drawable/btn_gov_selector" android:text="政务" /> <RadioButton android:id="@+id/rb_setting" style="@style/BottomTabStyle" android:drawableTop="@drawable/btn_setting_selector" android:text="设置" /> </RadioGroup> </LinearLayout>
<resources> <!-- Base application theme, dependent on API level. This theme is replaced by AppBaseTheme from res/values-vXX/styles.xml on newer devices. --> <style name="AppBaseTheme" parent="android:Theme.Light"> <!-- Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, while customizations related to backward-compatibility can go here. --> </style> <!-- Application theme. --> <style name="AppTheme" parent="AppBaseTheme"> <!-- All customizations that are NOT specific to a particular API-level can go here. --> </style> <style name="BottomTabStyle"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">1</item> <item name="android:button">@null</item> <item name="android:gravity">center</item> <item name="android:padding">5dp</item> <item name="android:drawablePadding">3dp</item> <item name="android:textColor">@color/txt_bottom_tab_selector</item> </style> </resources>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/home_press" android:state_checked="true"></item> <item android:drawable="@drawable/home"></item> </selector>
5、定义Fragment
利用XUtils findViewById
ViewUtils使用方法 完全注解方式就可以进行UI绑定和事件绑定。 无需findViewById和setClickListener等。 // xUtils的view注解要求必须提供id,以使代码混淆不受影响。 @ViewInject(R.id.textView) TextView textView; //@ViewInject(vale=R.id.textView, parentId=R.id.parentView) //TextView textView; @ResInject(id = R.string.label, type = ResType.String) private String label; // 取消了之前使用方法名绑定事件的方式,使用id绑定不受混淆影响 // 支持绑定多个id @OnClick({R.id.id1, R.id.id2, R.id.id3}) // or @OnClick(value={R.id.id1, R.id.id2, R.id.id3}, parentId={R.id.pid1, R.id.pid2, R.id.pid3}) // 更多事件支持参见ViewCommonEventListener类和包com.lidroid.xutils.view.annotation.event。 @OnClick(R.id.test_button) public void testButtonClick(View v) { // 方法签名必须和接口中的要求一致 ... } ... //在Activity中注入: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ViewUtils.inject(this); //注入view和事件 ... textView.setText("some text..."); ... } //在Fragment中注入: @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.bitmap_fragment, container, false); // 加载fragment布局 ViewUtils.inject(this, view); //注入view和事件 ... } //在PreferenceFragment中注入: public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); ViewUtils.inject(this, getPreferenceScreen()); //注入view和事件 ... } // 其他重载 // inject(View view); // inject(Activity activity) // inject(PreferenceActivity preferenceActivity) // inject(Object handler, View view) // inject(Object handler, Activity activity) // inject(Object handler, PreferenceGroup preferenceGroup) // inject(Object handler, PreferenceActivity preferenceActivity)
public class ContentFragment extends BaseFragment { @ViewInject(R.id.vp_content) private ViewPager mViewPager; private ArrayList<BasePager> mPagers; @Override public View initView() { View view = View.inflate(mActivity, R.layout.fragment_content, null); ViewUtils.inject(this, view); // 注入view和事件 // mViewPager = (ViewPager) view.findViewById(R.id.vp_content); return view; } @Override public void initData() { // 初始化5个标签页面 mPagers = new ArrayList<BasePager>(); mPagers.add(new HomePager(mActivity)); mPagers.add(new NewsCenterPager(mActivity)); mPagers.add(new SmartServicePager(mActivity)); mPagers.add(new GovAffairsPager(mActivity)); mPagers.add(new SettingPager(mActivity)); mViewPager.setAdapter(new ContentAdapter()); } class ContentAdapter extends PagerAdapter { @Override public int getCount() { return mPagers.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { BasePager pager = mPagers.get(position); container.addView(pager.mRootView);// 将页面布局添加到容器中 pager.initData();//初始化数据 return pager.mRootView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } }
6、定义ViewPager页面
<?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" > <include layout="@layout/title_bar" /> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:layout_height="match_parent" > </FrameLayout> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/title_red_bg" > <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="标题" android:textColor="#fff" android:textSize="22sp" /> <ImageButton android:id="@+id/btn_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:background="@null" android:src="@drawable/img_menu" /> </RelativeLayout>
public abstract class BasePager { public Activity mActivity; public View mRootView; public TextView tvTitle; public ImageButton btnMenu; public FrameLayout flContent; public BasePager(Activity activity) { mActivity = activity; initView(); } /** * 初始化布局 */ public void initView() { mRootView = View.inflate(mActivity, R.layout.base_pager, null); tvTitle = (TextView) mRootView.findViewById(R.id.tv_title); btnMenu = (ImageButton) mRootView.findViewById(R.id.btn_menu); flContent = (FrameLayout) mRootView.findViewById(R.id.fl_content); } /** * 初始化数据 */ public abstract void initData(); }
public class NewsCenterPager extends BasePager { public NewsCenterPager(Activity activity) { super(activity); } @Override public void initData() { tvTitle.setText("新闻"); TextView view = new TextView(mActivity); view.setText("新闻中心"); view.setTextColor(Color.RED); view.setTextSize(22); view.setGravity(Gravity.CENTER); flContent.addView(view); } }
public class SettingPager extends BasePager { public SettingPager(Activity activity) { super(activity); } @Override public void initData() { tvTitle.setText("设置"); TextView view = new TextView(mActivity); view.setText("设置"); view.setTextColor(Color.RED); view.setTextSize(22); view.setGravity(Gravity.CENTER); flContent.addView(view); } }