小小千想和您聊一聊

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

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

  三、ViewPager实现Tab效果:(ViewPager默认滑动导航条效果)【掌握】

  (一)、ViewPager Tab效果说明:

  导航条利用标签生成;

  导航条会随着ViewPager内容物的滑动而发生左右侧滑。

  (二)、ViewPager 实现带滑动导航条选项卡的步骤:

  1、特殊的布局文件;

  必须有节点;

  在ViewPager节点中子节点或者子节点,用来显示选项卡导航条。

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

  3、创建PagerTabStrip对象:通过findViewById()方法来实现即可,设置PagerTabStrip;

  通过PagerTabStrip 对象的setTextColor()方法设置导航条文字颜色;

  通过PagerTabStrip 对象的setBackgroundColor ()方法设置导航条背景颜色;

  通过PagerTabStrip 对象的setDrawFullUnderline()方法设置导航条下方是否有完整下划线颜色;

  通过PagerTabStrip 对象的setTabIndicatorColor()方法设置导航条文字下方的指示颜色;

  通过PagerTabStrip 对象的setTextSpacing()方法设置导航条文字的间隔。

  4、定义ViewPager中的数据源List,自定义PagerAdapter适配器;

  5、为ViewPager对象设置适配器。

  (三)、示例代码:


1、布局文件的代码:





  【注意事项】

  1.这里ViewPager和 PagerTabStrip都要把包名写全了,不然会ClassNotFount

  2.API中说:在布局xml把PagerTabStrip当做ViewPager的一个子标签来用,不能拿出来,不然还是会报错

  3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置

  4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)。


2、MainActivity核心代码:

public class MainActivity extends Activity {


private Listlist_views;
private Listlist_titles;
private ViewPager viewPager_main;
private PagerTabStrip pagerTabStrip_main;


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


viewPager_main = (ViewPager) findViewById(R.id.viewpager_main);
pagerTabStrip_main = (PagerTabStrip) findViewById(R.id.pagerTabStrip_main);


pagerTabStrip_main.setTextColor(Color.WHITE);
pagerTabStrip_main.setBackgroundColor(Color.BLACK);
pagerTabStrip_main.setDrawFullUnderline(true);
pagerTabStrip_main.setTabIndicatorColor(Color.CYAN);
pagerTabStrip_main.setTextSpacing(50);


list_views = new ArrayList();
list_titles = new ArrayList();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.view1_viewpager, null);
View view2 = inflater.inflate(R.layout.view2_viewpager, null);
View view3 = inflater.inflate(R.layout.view3_viewpager, null);
View view4 = inflater.inflate(R.layout.view4_viewpager, null);


list_views.add(view1);
list_views.add(view2);
list_views.add(view3);
list_views.add(view4);


list_titles.add("View1");
list_titles.add("View2");
list_titles.add("View3");
list_titles.add("View4");


viewPager_main.setAdapter(new MyAdapter(list_views, list_titles));
}


class MyAdapter extends PagerAdapter {
private Listlist = null;
private Listlist_titles = null;


public MyAdapter(Listlist, Listlist_titles) {
this.list = list;
this.list_titles = list_titles;
}


@Override
public int getCount() {
if (list != null) {
return list.size();
}
return 0;
}


@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}


@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}


@Override
public CharSequence getPageTitle(int position) {
return list_titles.get(position);
}
}
}


  四、ViewPager Tab效果二:(ViewPager自定义导航条效果)

  (一)、效果说明:

  自定义导航条;

  导航条固定位置,不发生左右侧滑。

  (二)、ViewPager 实现自定义导航条选项卡的步骤:

  1、特殊的布局文件;

  必须有节点;

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

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

  3、初始化ViewPager;

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

  定义ViewPager中的数据源List;

  自定义PagerAdapter适配器;

  为ViewPager对象设置适配器;

  给ViewPager设置监听器(OnPageChangeListener)。

  (三)、示例代码:


1、布局文件的代码:2、MainActivity核心代码:

public class MainActivity extends Activity {
private ViewPager viewPager_main;
private Listlist = null;
private TextView[] arr_titles = null;


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


initTabView();
initViewPager();
}


private void initTabView() {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle);
arr_titles = new TextView[3];


for (int i = 0; i < 3; i++) {
TextView textView = (TextView) layout.getChildAt(i);
arr_titles[i] = textView;
arr_titles[i].setEnabled(true);
arr_titles[i].setBackgroundColor(Color.GRAY);
arr_titles[i].setTag(i);
arr_titles[i].setOnClickListener(new OnClickListener() {


@Override
public void onClick(View v) {
// 根据当前点击的position,设置ViewPager的当前item
viewPager_main.setCurrentItem((Integer) v.getTag());
}
});
}
arr_titles[0].setEnabled(false);
arr_titles[0].setBackgroundColor(Color.BLUE);
}


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


list = new ArrayList();
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.view1_viewpager, null);
View view2 = inflater.inflate(R.layout.view2_viewpager, null);
View view3 = inflater.inflate(R.layout.view3_viewpager, null);
list.add(view1);
list.add(view2);
list.add(view3);


viewPager_main.setAdapter(new MyAdapter(list));


viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageSelected(int position) {
// 当页面切换改变时,让所有的“点”都变成可操作。
for (int j = 0; j < arr_titles.length; j++) {
arr_titles[j].setEnabled(true);
arr_titles[j].setBackgroundColor(Color.GRAY);
}
// 让当前点击的“点”变成不可以操作。
arr_titles[position].setEnabled(false);
arr_titles[position].setBackgroundColor(Color.BLUE);
}


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


@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}


class MyAdapter extends PagerAdapter {
private Listlist = null;


public MyAdapter(Listlist) {
this.list = list;
}


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


@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}


@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}


}


} 


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

下一篇:TAB书签选项卡制作(其三)

QQ技术交流群

千锋软件测试官方①群
858327674

加入群聊