[置顶] Android开发之TabLayout的使用(实现三种常用的选项卡效果)

前言：对于选项卡，以前我们使用TabHost，或者经常使用别人封装好的选项卡！今天我们来使用一下google给我们提供的选项卡，一样可以做的很强大，效果一样很好！！！

-------------------------分割线---------------------------------

首先我们添加依赖，引用design包：

compile 'com.android.support:design:25.2.0'

-------------------------分割线---------------------------------

效果一：





核心代码：

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

-------------------------分割线---------------------------------

效果二：



核心代码：

tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
tabLayout.setTabMode(TabLayout.MODE_FIXED);

-------------------------分割线---------------------------------

效果三：



核心代码：

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);

-------------------------分割线---------------------------------

当然了，上面的属性也可以在布局中声明，下面来看一下完整的代码：

MainActivity代码：

public class MainActivity extends AppCompatActivity {

private TabLayout tabLayout;
private ViewPager viewPager;
private String[] title = {
"头条",
"新闻",
"娱乐",
//            "体育",
//            "科技",
//            "美女",
//            "财经",
//            "汽车",
//            "房子",
//            "头条"
};
private MyPagerAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.vp);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

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 f = new NewsDetailFragment();
Bundle bundle = new Bundle();
bundle.putString("title", title[position]);
f.setArguments(bundle);
return f;
}

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

然后在写一个Fragment类：

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* Created by Fly on 2017/5/8.
*/

public class NewsDetailFragment extends Fragment {

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

布局代码：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.fly.lsn12_tablayout.MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="?attr/colorPrimary"
app:tabMode="scrollable"
app:tabSelectedTextColor="?attr/colorPrimaryDark"
app:tabTextColor="?attr/colorPrimary" />

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

</LinearLayout>

----------------------------深夜撸代码，希望多多支持----------------------------------------------------