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);
            }
        });
    }
}

大功告成。希望能夠幫到大家。 下面會繼續縫上其他幾個控件的 文章。希望大家多多支持。有問題歡迎指正。