Android新的surpport支持库SurpportDesign之TabLayout

最近发现android 官方公布了一个新的Surpport 支持库。之前并没有发现。这个支持库的几个控件我觉得还是听酷炫的。然后抽空实验了一下。今天写一篇博文介绍下第一个控件Tablayout。我觉得他的出现大大解决了许多新闻类客户端的一个开发的麻烦。就是顶部滑动与viewpager 的切换问题。

我相信大家在写这个东西的时候一定很头疼。不过如果是用了tablayout 那么就会省很多事。废话不多说。上干货

1.eclipse 开发 添加jlibrary 

        import ->Android->你的sdk路径->extras->android->support->design->
       然后design会报错，和v7一样将sdk换为最新版本，然后将v7_appcompat 作为design的库，(不然拟引入的design会报错)最后把design作为库

2.Android studio 开发 

添加 依赖 如果项目中用到了v 7 那么版本要和v7保持一致不然会报错

3.xml 引入 Tablayout 做为Viewpager 的顶部tab 

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.yu.viewpagertest.MainActivity">
 
    <android.support.design.widget.TabLayout
         android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tl"
        android:background="#25b6ed"
        app:tabIndicatorColor="#FFF"
        app:tabSelectedTextColor="#55000000"
        app:tabTextColor="#FFF"
        ></android.support.design.widget.TabLayout>
    <!--
          app:tabIndicatorColor="#FFF"  下划线的颜色
        app:tabSelectedTextColor="#55000000" tab文字选中的颜色
        app:tabTextColor="#FFF"  tab文字的颜色
          app:tabMode="scrollable" 可以滚动 就是tab 上标签很多的时候 类似 uc 浏览器的那个 可以滑动
    -->
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:id="@+id/vp"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>

没有设置了 scrollable 

 

设置 了scrollable

 

大家可以看到 。如果设置了 tabMode 为scrollable 那么 每一个tab 的宽度是差不多包裹文字内容的。  不会是根据屏幕整个宽度等分的。

   4 代码 

package com.yu.viewpagertest;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    View v;
    ViewPager vp;
    int lineW;
    List<String> titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp=(ViewPager) findViewById(R.id.vp);
        TabLayout tl= (TabLayout) findViewById(R.id.tl);
        titles=new ArrayList<String>();
        titles.add("瞎子");
        titles.add("压缩");
        titles.add("薇恩");
        /* tl.addTab(tl.newTab().setText("kill"));
        tl.addTab(tl.newTab().setText("doublekill"));
        tl.addTab(tl.newTab().setText("hhaa"));*/

        setadapter(vp);
        tl.setupWithViewPager(vp);

    }

    private void setadapter(ViewPager vp) {
        vp.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 3;
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }

            @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(getApplicationContext());
                tv.setTextSize(20f);
                tv.setText("当前"+position);
                container.addView(tv);
                return tv;
            }
            // 一定要复写 getPagerTitle 否则 tablayout上面的tab 是没有文字的
            // 只在tabllayout 中添加tab是没用的。tablayout addtab 其实没什么用 大家看到我上面都注释了。具体原因暂时不知道有知道的小伙伴欢迎留言给我。
            // 只要这里写了getpagerTitle 那么顶部tablayout中就有文字
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });
    }
}

大功告成。希望能够帮到大家。 下面会继续缝上其他几个控件的 文章。希望大家多多支持。有问题欢迎指正。