符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
Fragment是一种可以嵌入在活动当中的UI 片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用的非常广泛。拥有自己的生命周期和接收、处理用户的事件。你可以动态的添加、替换和移除某个Fragment。
成都创新互联-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、达州电信机房、等保安全、私有云建设等企业级互联网基础服务,咨询热线:18980820575
Fragment使用非常广泛,在此不介绍Fragment的生命周期,本例子将使用Fragment实现如下效果:
Message Friend Setting
图一
Message Friend Setting
图二
Message Friend Setting
图三
底部的三个按钮分别控制三个Fragment的展示,为方便说明,底部三个按钮从左至右命名为Message、Friend、Setting,如上面三张图所示。
图三的上部是展现使用ViewPager的效果,加了一条蓝色的指示器。
bottombar的布局文件
topbar的布局文件
MainActivity的布局文件
由于message和friend两个fragment的布局文件简单,所以在此就不贴上来了。
SettingFragment的布局文件
MainActivity代码:
package com.jam.fragmentdemo; import android.os.Bundle; 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.Button; /** * 由于这个工程还需要用到ViewPager,所以在此继承FragmentActivity * @author Jam * */ public class MainActivity extends FragmentActivity implements OnClickListener { // 三个按钮 private Button messageButton; private Button friendButton; private Button settingButton; // 三个fragment private MessageFragment messgeFragment; private FriendFragment friendFragment; private SettingFragment settingFragment; private int fragmentIndex = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); messageButton = (Button) findViewById(R.id.btn_messaage); friendButton = (Button) findViewById(R.id.btn_friend); settingButton = (Button) findViewById(R.id.btn_setting); setDefaultFragment(); // 为三个按钮绑定监听器 messageButton.setOnClickListener(this); friendButton.setOnClickListener(this); settingButton.setOnClickListener(this); } /** * 设置初始化默认的Fragment为MessageFragment */ private void setDefaultFragment() { FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction transaction = fragmentManager.beginTransaction(); messgeFragment = new MessageFragment(); transaction.replace(R.id.content, messgeFragment); transaction.commit(); } /** * 在下面的onClick内, 用了两个switch语句来处理页面的更换第一层判断按下了哪一个按钮 * 第二层判断当前页是哪一页,在决定隐藏哪一页 * 这里的实现方法可能会不太灵活 */ @Override public void onClick(View v) { // FragmentTransaction每一次都需要拿到,否则程序会报错 FragmentTransaction transaction = getSupportFragmentManager() .beginTransaction(); switch (v.getId()) { case R.id.btn_messaage: if (messgeFragment == null) { messgeFragment = new MessageFragment(); transaction.add(R.id.content, messgeFragment); } switch (fragmentIndex) { case 0: if (messgeFragment != null) { transaction.hide(messgeFragment); } break; case 1: if (friendFragment != null) { transaction.hide(friendFragment); } break; case 2: if (settingFragment != null) { transaction.hide(settingFragment); } break; } transaction.show(messgeFragment); fragmentIndex = 0; break; case R.id.btn_friend: if (friendFragment == null) { friendFragment = new FriendFragment(); transaction.add(R.id.content, friendFragment); } switch (fragmentIndex) { case 0: if (messgeFragment != null) { transaction.hide(messgeFragment); } break; case 1: if (friendFragment != null) { transaction.hide(friendFragment); } break; case 2: if (settingFragment != null) { transaction.hide(settingFragment); } break; } transaction.show(friendFragment); fragmentIndex = 1; break; case R.id.btn_setting: if (settingFragment == null) { settingFragment = new SettingFragment(); transaction.add(R.id.content, settingFragment); } switch (fragmentIndex) { case 0: if (messgeFragment != null) { transaction.hide(messgeFragment); } break; case 1: if (friendFragment != null) { transaction.hide(friendFragment); } break; case 2: if (settingFragment != null) { transaction.hide(settingFragment); } break; } transaction.show(settingFragment); fragmentIndex = 2; break; } transaction.commit(); } }
这段代码中要注意,在做事务操作时FragmentTransaction每次都要拿到,即
FragmentTransaction transaction = getSupportFragmentManager() .beginTransaction();
否则程序会报错,完成操作记得transaction.commit();
另外在使用流程大致如下
首先
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
(注意上面getSupportFragmentManager是V4包的用法)
transaction.add()
往Activity中添加一个Fragment
transaction.remove()
从Activity中移除一个Fragment,如果被移除的Fragment没有添加到回退栈(回退栈后面会详细说),这个Fragment实例将会被销毁。
transaction.replace()
使用另一个Fragment替换当前的,实际上就是remove()然后add()的合体~
transaction.hide()
隐藏当前的Fragment,仅仅是设为不可见,并不会销毁
transaction.show()
显示之前隐藏的Fragment
detach()
会将view从UI中移除,和remove()不同,此时fragment的状态依然由FragmentManager维护。
attach()
重建view视图,附加到UI上并显示。
transatcion.commit()//提交一个事务
以上是大致流程,具体使用哪种方法依照自己的工程需要。
MessageFragment的代码和FriendFragment的代码简单,没有在其中添加什么东西,只需要让他们继承Fragment
在此只贴出其中MessageFragment的代码
package com.jam.fragmentdemo; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MessageFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { // TODO Auto-generated method stub return inflater.inflate(R.layout.activity_messagefragment, container, false); } }
SettingFragment由于用到了ViewPager,所以代码比前面两个Fragment多
SettingFragment的代码:
package com.jam.fragmentdemo; import java.util.ArrayList; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; import com.jam.fragmentdemo.settingcontent.InsectFragment; import com.jam.fragmentdemo.settingcontent.MenuFragment; public class SettingFragment extends Fragment implements OnClickListener{ //TopBar所含有的页数 private final static int pagerNum = 2; //TopBar当前所指向的页下标 private int currentIndex = 0; //initTabLineWith方法中计算得到的平均值用avg记录 //这里的平均值指的是:屏幕宽度/所含的页数(pagerNum) private int avg; private ArrayListlist = new ArrayList (); private ViewPager viewPager; private ImageView tabLine; private InsectFragment insectFragment; private MenuFragment menuFragment; private Button insectButton; private Button menuButton; @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.activity_settingfragment, null); initTabLineWith(view); //初始化部件 viewPager = (ViewPager) view.findViewById(R.id.setting_fragment_viewpager); viewPager.setCurrentItem(0); insectButton = (Button) view.findViewById(R.id.btn_insect); menuButton = (Button) view.findViewById(R.id.btn_menu); insectFragment = new InsectFragment(); menuFragment = new MenuFragment(); list.add(insectFragment); list.add(menuFragment); insectButton.setOnClickListener(this); menuButton.setOnClickListener(this); viewPager.setAdapter(new MyViewPagerAdapter(getChildFragmentManager(), list)); viewPager.setOnPageChangeListener(new OnPageChangeListener() { /** * tabLine指示器使用Animation的方法移动 */ @Override public void onPageSelected(int position) { Animation animation = null; switch (position) { case 0: animation = new TranslateAnimation(currentIndex * avg, 0 * avg, 0, 0); break; case 1: animation = new TranslateAnimation(currentIndex * avg, 1 * avg, 0, 0); break; } currentIndex = position; animation.setFillAfter(true); animation.setDuration(300); tabLine.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); return view; } /** * 根据屏幕宽度的大小,初始化TabLine的长度 * @param view */ private void initTabLineWith(View view) { tabLine = (ImageView) view.findViewById(R.id.iv_tabline); LayoutParams lp = (LayoutParams) tabLine.getLayoutParams(); //拿到屏幕宽度的操作 DisplayMetrics dm = new DisplayMetrics(); getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm); int screenWith = dm.widthPixels; avg =screenWith / pagerNum; lp.width = avg; //设置tabLine指示器的长度 tabLine.setLayoutParams(lp); } /** * 点击改动当前页面 */ @Override public void onClick(View v) { switch (v.getId()) { case R.id.btn_insect: viewPager.setCurrentItem(0); currentIndex = 0; break; case R.id.btn_menu: viewPager.setCurrentItem(1); currentIndex = 1; break; } } public class MyViewPagerAdapter extends FragmentPagerAdapter { private ArrayList fragmentsList; public MyViewPagerAdapter(FragmentManager fm) { super(fm); } public MyViewPagerAdapter(FragmentManager fm, ArrayList list) { super(fm); this.fragmentsList = list; } @Override public int getCount() { return fragmentsList.size(); } @Override public Fragment getItem(int arg0) { return fragmentsList.get(arg0); } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } } }
SettingFragment中又包含两个Fragment,这两个Fragment没什么内容,在此就不贴布局文件和代码了。
单纯使用Fragment,不能实现滑动的效果,只能点击切换,要实现滑动的效果可考虑使用ViewPager。
使用Fragment实现这种类似TabHost,好处在于文件方便管理,每一个Fragment都是独立的,单纯的使用ViewPager的话,代码会比较长,在修改是比较麻烦。
本次工程中的代码只实现了展示了基本的效果,另外有篇写的非常好的博文
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
介绍了各种Tab实现的效果和对比。