高級UI-TableLayout

TableLayout選項卡，用於需要使用選項卡的場景，一般是用於切換Fragment，現在的主流做法一般是TableLayout+ViewPager+Fragment，綜合實現選項卡的操作

由於TableLayout位於support-design裏面，故在使用前要導入依賴

implementation 'com.android.support:design:25.4.0'

準備測試佈局
app:tabIndicatorColor：選中下劃線顏色
app:tabTextColor：標籤顏色
app:tabSelectedTextColor：選中顏色
app:tabMode：標籤模式，有scrollable和fixed兩種
app:tabGravity：位置選擇，一般會配合tabMode使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_green_light"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabMode="scrollable"
        app:tabGravity="center"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

自定義一個Fragment，用來做顯示

public class DefaultFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        Bundle bundle = getArguments();
        String title = bundle.getString("title");
        textView.setBackgroundColor(Color.rgb(
                (int) (Math.random() * 255),
                (int) (Math.random() * 255),
                (int) (Math.random() * 255)));
        textView.setText(title);
        return textView;
    }
}

使用

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
//            "新聞", "體育", "NBA", "娛樂", "財經",
//            "股票", "汽車", "科技", "手機", "數碼",
//            "女人", "直播", "視頻", "旅遊", "房產",
//            "家居", "教育", "讀書", "四川", "健康",
//            "彩票", "車險", "海淘", "理財", "藝術"
            "新聞", "體育", "汽車", "科技", "手機", "數碼", "讀書", "藝術"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        //TableLayout滑動關聯ViewPager
        tabLayout.setOnTabSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onTabSelected(Tab tab) {
                viewPager.setCurrentItem(tab.getPosition(), true);
            }

            @Override
            public void onTabUnselected(Tab tab) {

            }

            @Override
            public void onTabReselected(Tab tab) {

            }
        });
        //ViewPager滑動關聯TableLayout
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        //設置的標籤來自於adapter，因此需要重寫getPageTitle()方法
        tabLayout.setTabsFromPagerAdapter(adapter);
        viewPager.setAdapter(adapter);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            Log.d("cj5785", "getItem: " + title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

完成以上工作便實現了選項卡
其實現效果如下圖

如果要實現Tab放在下邊，只需要將TableLayout放在下面，同時修改ViewPager的高度屬性，避免其跑出屏幕

android:layout_height="0dp"
android:layout_weight="1"

同時修改TableLayout的屬性，使得選中下劃線不那麼彆扭

app:tabIndicatorHeight="0dp"

上面的使用雖然能完成，但其過於繁瑣
使用如下方法將變得簡單易行

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
			"新聞", "科技", "讀書"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

既然實現位於底部，那麼順便做個微信導航欄的效果好了
自定義佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_marginTop="3dp"
    android:layout_marginBottom="3dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="24dp"
        android:layout_height="24dp" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:textSize="10sp"/>
</LinearLayout>

總佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/table_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/holo_green_light"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        android:background="@android:color/darker_gray"
        app:tabSelectedTextColor="@android:color/holo_orange_light"
        app:tabTextColor="@android:color/black" />

</LinearLayout>

調用關聯

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private String[] title = {
            "微信", "通訊錄", "發現","我"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.table_layout);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            Tab tab = tabLayout.getTabAt(i);
            View view = View.inflate(this, R.layout.navigation, null);
            TextView tv_name = (TextView) view.findViewById(R.id.text_view);
            ImageView iv_icon = (ImageView) view.findViewById(R.id.image_view);
            tv_name.setText(title[i]);
            switch (tv_name.getText().toString()){
                case "微信":
                    iv_icon.setImageResource(R.drawable.abr);
                    break;
                case "通訊錄":
                case "我":
                    iv_icon.setImageResource(R.drawable.adn);
                    break;
                case "發現":
                    iv_icon.setImageResource(R.drawable.akg);
                    break;
            }
            tab.setCustomView(view);
        }
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new DefaultFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            Log.d("cj5785", "getItem: " + title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

自定義的Fragment佈局

public class DefaultFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        Bundle bundle = getArguments();
        String title = bundle.getString("title");
        textView.setBackgroundColor(Color.rgb(
                (int) (Math.random() * 255),
                (int) (Math.random() * 255),
                (int) (Math.random() * 255)));
        textView.setText(title);
        return textView;
    }
}

實現效果如下圖