Chinaunix首页 | 论坛 | 博客
  • 博客访问: 128891
  • 博文数量: 93
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 830
  • 用 户 组: 普通用户
  • 注册时间: 2016-02-25 10:44
  • 认证徽章:
个人简介

一杯茶,一台电脑

文章分类

全部博文(93)

文章存档

2018年(4)

2017年(57)

2016年(32)

分类: Java

2017-02-05 09:43:17

第一种实现方式:

按照套路先上一张图:
            

点我下载代码

关键一步:添加依赖包

  1. compile 'com.android.support:design:22.2.0'

MainActivity.java文件:

  1. package barneyx.com.buttonmenudemo;

  2. import android.support.design.widget.TabLayout;
  3. import android.support.v4.view.PagerAdapter;
  4. import android.support.v4.view.ViewPager;
  5. import android.support.v7.app.AppCompatActivity;
  6. import android.os.Bundle;
  7. import android.view.LayoutInflater;
  8. import android.view.View;
  9. import android.view.ViewGroup;


  10. import java.util.ArrayList;
  11. import java.util.List;

  12. public class MainActivity extends AppCompatActivity {

  13.     private TabLayout mTableLayout;
  14.     private ViewPager mViewPager;

  15.     private LayoutInflater mInflater;
  16.     private List<String> mTitleList = new ArrayList<String>(); //页卡标题集合
  17.     private View view1,view2,view3,view4,view5; //页卡集合
  18.     private List<View> mViewList = new ArrayList<>(); //页卡视图集合

  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         if(getSupportActionBar()!=null)getSupportActionBar().hide();
  23.         setContentView(R.layout.activity_main);

  24.         mViewPager = (ViewPager) findViewById(R.id.vp_view);
  25.         mTableLayout = (TabLayout)findViewById(R.id.tabs);

  26.         mInflater = LayoutInflater.from(this);

  27.         view1 = mInflater.inflate(R.layout.activity_main,null);
  28.         view2 = mInflater.inflate(R.layout.activity_main,null);
  29.         view3 = mInflater.inflate(R.layout.activity_main,null);
  30.         view4 = mInflater.inflate(R.layout.activity_main,null);
  31.         view5 = mInflater.inflate(R.layout.activity_main,null);


  32.         //添加页卡视图
  33.         mViewList.add(view1);
  34.         mViewList.add(view2);
  35.         mViewList.add(view3);
  36.         mViewList.add(view4);
  37.         mViewList.add(view5);

  38.         //添加标题卡
  39.         mTitleList.add("NO1");
  40.         mTitleList.add("NO2");
  41.         mTitleList.add("NO3");
  42.         mTitleList.add("NO4");
  43.         mTitleList.add("NO5");

  44.         mTableLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
  45.         mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(0)));
  46.         mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(1)));
  47.         mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(2)));
  48.         mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(3)));
  49.         mTableLayout.addTab(mTableLayout.newTab().setText(mTitleList.get(4)));


  50.         MyPagerAdapter myPagerAdapter = new MyPagerAdapter(mViewList);
  51.         mViewPager.setAdapter(myPagerAdapter);//给ViewPager设置适配器
  52.         mTableLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
  53.         mTableLayout.setTabsFromPagerAdapter(myPagerAdapter);//给Tabs设置适配器

  54.     }
  55.     //ViewPager适配器
  56.     class MyPagerAdapter extends PagerAdapter{
  57.         private List<View> mViewList;


  58.         public MyPagerAdapter(List<View> mViewList){
  59.             this.mViewList = mViewList;
  60.         }

  61.         @Override
  62.         public int getCount() {
  63.             return mViewList.size();//页卡数
  64.         }

  65.         @Override
  66.         public boolean isViewFromObject(View view, Object object) {
  67.           return view==object;//官方推荐写法
  68.         }

  69.         @Override
  70.         public Object instantiateItem(ViewGroup container, int position) {
  71.             container.addView(mViewList.get(position));
  72.             return mViewList.get(position);//添加页卡
  73.         }

  74.         @Override
  75.         public void destroyItem(ViewGroup container, int position, Object object) {
  76.             container.removeView(mViewList.get(position));//删除页卡
  77.         }

  78.         @Override
  79.         public CharSequence getPageTitle(int position) {
  80.             return mTitleList.get(position);//页卡标题
  81.         }
  82.     }

  83. }

资源文件colors.xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <color name="colorPrimary">#3F51B5</color>
  4.     <color name="colorPrimaryDark">#303F9F</color>
  5.     <color name="colorAccent">#FF4081</color>
  6.     <color name="dkgray">#80808FF0</color>
  7.     <color name="yello">#F8F8FF00</color>
  8.     <color name="white">#FFFFFF</color>
  9.     <color name="darkgray">#938192</color>
  10.     <color name="lightgreen">#7cd12e</color>
  11.     <color name="black">#ff000000</color>
  12.     <color name="blue">#ff0000ff</color>
  13.     <color name="cyan">#ff00ffff</color>
  14.     <color name="gray">#ff888888</color>
  15.     <color name="green">#ff00ff00</color>
  16.     <color name="ltgray">#ffcccccc</color>
  17.     <color name="magenta">#ffff00ff</color>
  18.     <color name="red">#ffff0000</color>
  19.     <color name="transparent">#00000000</color>
  20.     <color name="yellow">#ffffff00</color>
  21. </resources>
布局文件activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     android:id="@+id/activity_main"
  6.     android:orientation="vertical"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context="barneyx.com.buttonmenudemo.MainActivity">



  10.     <android.support.design.widget.TabLayout
  11.         android:id="@+id/tabs"
  12.         android:layout_height="wrap_content"
  13.         android:layout_width="match_parent"
  14.         app:tabIndicatorColor="@color/red"
  15.         app:tabSelectedTextColor="@color/red"
  16.         app:tabTextColor="@color/black"
  17.         />

  18.     <android.support.v4.view.ViewPager
  19.         android:id="@+id/vp_view"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="wrap_content"
  22.         />
  23. </LinearLayout>



阅读(333) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册