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

2023-02-18 07:16:36

该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）。该库位置在如图所示位置：

找到后将其作为一个Android 库导入Eclipse。导入成功后如图所示：

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

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

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

代码如下:

 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>

运行效果图：

码农公寓

相关文章