小小千想和您聊一聊

当前位置: 首页> 技术分享> TAB书签选项卡制作(其三)

TAB书签选项卡制作(其三)

  五、Fragment + ActionBar实现Tab效果:

  (一)、Fragment + ActionBar实现选项卡的步骤:

  1、获取ActionBar对象:通过当前上下文对象的getActionBar()方法来实现;

  3、设置ActionBar对象的导航模式为Tab导航模式;

  actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

  4、分别创建Tab对象:

  通过ActionBar对象的newTab()方法创建Tab对象;

  通过Tab对象的setText()设置选项卡文字;

  通过Tab对象的setTabListener()设置选项卡监听事件。

  5、自定义ActionBar.TabListener的监听器;

  6、为ActionBar对象添加Tab对象。通过ActionBar对象的addTab()方法实现添加选项卡。

  (二)、示例代码:


1、MainActivity的核心代码:


public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


initTabView();
}


private void initTabView() {
ActionBar actionBar = getActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);


actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);


actionBar.addTab(actionBar.newTab().setText("动态")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("群组")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("好友")
.setTabListener(new MyTabListener()));
actionBar.addTab(actionBar.newTab().setText("会话")
.setTabListener(new MyTabListener()));
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}


@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:


break;
case R.id.action_quip:
finish();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}


class MyTabListener implements ActionBar.TabListener {


@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
Fragment fragment = new ContentFragment();
Bundle bundle = new Bundle();
bundle.putInt("tabIndex", tab.getPosition() + 1);
fragment.setArguments(bundle);


FragmentTransaction transaction = getFragmentManager()
.beginTransaction();
transaction.replace(R.id.layout_fragment_container, fragment);
transaction.addToBackStack(null);
transaction.commit();
}


@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}


@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}


}


} 


  六、Fragment + ViewPager实现Tab效果:

  (一)、Fragment + ViewPager实现选项卡的步骤:

  1、特殊的布局文件;

  必须有节点;

  在ViewPager节点上方可自定义布局,布局内可放置TextView及ImageView等控件来自定义导航条效果。

  2、当前窗体Activity类要继承于FragmentActivity,而不是Activity;

  3、初始化自定义选项卡导航条,并为选项卡设置单击监听事件OnClickListener;

  4、初始化ViewPager;

  创建ViewPager对象:通过findViewById()方法来实现即可;

  定义ViewPager中的数据源List;

  自定义适配器,要继承于FragmentPagerAdapter,而不是PagerAdapter;

  为ViewPager对象设置适配器;

  给ViewPager设置监听器(OnPageChangeListener)。

  【备注:】为什么要使用FragmentPagerAdapter适配器呢?

  因为PagerAdapter的重写方法中:


public Object instantiateItem(ViewGroup container, int position) {
   container.addView(list.get(position));
   return list.get(position);
  }
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView(list.get(position));
  }


  container.addView(list.get(position))和container.removeView(list.get(position))的参数都是一个View对象,而不能是Fragment对象。因为涉及到ViewPager的数据源是Fragment的情况,一定要使用FragmentPagerAdapter适配器。

  因为继承于FragmentPagerAdapter来自定义适配器,自定义适配器构造方法中的第一个参数FragmentManager只能在窗体中通过getSupportFragmentManager()来获取,这就要求当前窗体必须继承于FragmentActivity类。

  【补充:】View、Fragment和Activity的类目录结构:


java.lang.Object
   ↳ android.view.View  

java.lang.Object
   ↳ android.app.Fragment 


java.lang.Object
   ↳ android.support.v4.app.Fragment 


java.lang.Object
   ↳ android.content.Context
      ↳ android.content.ContextWrapper
         ↳ android.view.ContextThemeWrapper
            ↳ android.app.Activity


java.lang.Object
   ↳ android.content.Context
      ↳ android.content.ContextWrapper
         ↳ android.view.ContextThemeWrapper
            ↳ android.app.Activity
               ↳ android.support.v4.app.FragmentActivity


  (二)、示例代码:


1、布局文件示例代码:

2、Fragment文件中核心代码:同上


3、MainActivity中的核心代码:

public class MainActivity extends FragmentActivity {
private ViewPager viewPager_main;
private ListfragmentsList;
private TextView[] arr_titles;
private TextView[] arr_lines;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


initIndicateLine();
initTabView();
initViewPager();
}


private void initTabView() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle);
arr_titles = new TextView[4];
for (int i = 0; i < arr_titles.length; i++) {
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(true);
arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(new OnClickListener() {


@Override
public void onClick(View v) {
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
arr_titles[0].setEnabled(false);
}
}


private void initViewPager() {
viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);
fragmentsList = new ArrayList();


Fragment fragment1 = new ContentFragment();
Bundle bundle1 = new Bundle();
bundle1.putInt("tabIndex", 1);
fragment1.setArguments(bundle1);


Fragment fragment2 = new ContentFragment();
Bundle bundle2 = new Bundle();
bundle2.putInt("tabIndex", 2);
fragment2.setArguments(bundle2);


Fragment fragment3 = new ContentFragment();
Bundle bundle3 = new Bundle();
bundle3.putInt("tabIndex", 3);
fragment3.setArguments(bundle3);


Fragment fragment4 = new ContentFragment();
Bundle bundle4 = new Bundle();
bundle4.putInt("tabIndex", 4);
fragment4.setArguments(bundle4);


fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
fragmentsList.add(fragment4);


viewPager_main.setAdapter(new MyAdapter(getSupportFragmentManager(),
fragmentsList));
viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageScrollStateChanged(int position) {
}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}


@Override
public void onPageSelected(int position) {
for (int i = 0; i < arr_titles.length; i++) {
arr_titles[i].setEnabled(true);
arr_lines[i].setBackgroundColor(Color.TRANSPARENT);
}
arr_titles[position].setEnabled(false);
arr_lines[position].setBackgroundColor(Color.WHITE);
}


});
viewPager_main.setCurrentItem(0);
}


private void initIndicateLine() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_indicateline);
arr_lines = new TextView[4];
for (int i = 0; i < arr_lines.length; i++) {
TextView view = (TextView) layout.getChildAt(i);
arr_lines[i] = view;
arr_lines[i].setTag(i);
arr_lines[i].setBackgroundColor(Color.TRANSPARENT);
}
arr_lines[0].setBackgroundColor(Color.WHITE);
}


class MyAdapter extends FragmentPagerAdapter {
private ListfragmentsList = null;


public MyAdapter(FragmentManager fm) {
super(fm);
}


public MyAdapter(FragmentManager fm, ListfragmentsList) {
super(fm);
this.fragmentsList = fragmentsList;
}


@Override
public Fragment getItem(int arg0) {
return fragmentsList.get(arg0);
}


@Override
public int getCount() {
return fragmentsList.size();
}


}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}


} 


上一篇:HTML5工具初识之网页编辑器

下一篇:Notification

QQ技术交流群

千锋软件测试官方①群
858327674

加入群聊