安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示。android.support.design.widget.TabLayout在Android扩展(extras)支持(support)包design中,但是design又依赖另外一个support v7包中的appcompat库,因此需要事先导入,在导入过程中,如果某些res目录下的value值过高比如value-23(Android SDK 23)但不巧发生错误如提示说找不到某某值,可以整个删除掉。 (1)导入support v7扩展包中的(\android-sdk-windows\extras\android\support\v7\appcompat)。该库位置在如图所示位置:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。   找到后将其作为一个Android 库导入Eclipse。导入成功后如图所示:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

(2)导入Android扩展包中的design库(\android-sdk-windows\extras\android\support\design),该库位置位于Android SDK包中如图所示位置:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

导入Eclipse,将其作为Android的库。导入成功后如图所示:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

需要在design项目中添加对android-support-v7-appcompat库的引用,如图所示:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

代码如下:

 package com.lixu.tablayout_test;

 import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView; public class MainActivity extends Activity {
private int[] color = { 0xffB71C1C, 0xfff44336, 0xffEEFF41, 0xff00C853, 0xff4CAF50, 0xff03A9F4, 0xff6200EA };
private int count = color.length; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); TabLayout tl = (TabLayout) findViewById(R.id.tablayout); ViewPager vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(new MyAdapter(this));
// 设置TabLayout和ViewPager可以双向、交互联动。
tl.setupWithViewPager(vp);
// 设置滚动模式
tl.setTabMode(TabLayout.MODE_SCROLLABLE); } private class MyAdapter extends PagerAdapter {
Context context; public MyAdapter(Context context) {
this.context = context;
} @Override
public int getCount() { return count;
} @Override
public CharSequence getPageTitle(int position) {
return "选项卡" + position;
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
} @Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = new TextView(context);
tv.setText("页面" + position);
tv.setTextSize(30.0f);
// 设置居中
tv.setGravity(Gravity.CENTER);
// 设置每一页的颜色
tv.setBackgroundColor(color[position]);
container.addView(tv);
return tv; } } }

xml文件:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <!-- xmlns:app="http://schemas.android.com/apk/res-auto" 要加这个否则xml文件要报错! --> <android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#f44336"
app:tabSelectedTextColor="#00C853"
app:tabTextColor="#03A9F4" /> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </LinearLayout>

运行效果图:

安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

上一篇:Fragment(四)Fragment生命周期分析(转)


下一篇:Fragment生命周期以及使用时的小问题