UI控件--TabLayout

• • Android 5.0给TabLayout加入了新的特性，所以TabLayout又开始被使用了/

简单的TabLayout

• 使用这个控件，首先我们要点击File–>Project Sturucture–>app来进行导包

• 

• 然后在布局文件中使用之前，需要在父布局中添加这句话

xmlns:tab="http://schemas.android.com/apk/res-auto"

• 布局文件的代码如下：

<?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:tab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lingzhuo.testtablelayout01.FirstActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablelayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tab:tabBackground="@color/colorPrimary"
        tab:tabSelectedTextColor="@color/colorAccent"
        tab:tabIndicatorColor="#000000"
        tab:tabIndicatorHeight="3dp" />

</LinearLayout>

• tab:tabIndicatorColor
• 选中的条目的下面的滑条的颜色
• tab:tabIndicatorHeight
• 滑条的宽度
• tab:tabMode=”scrollable”

• 可滑动的tab栏

• 活动中的逻辑代码

public class FirstActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first);
        init();
    }

    private void init() {
        tabLayout= (TabLayout) findViewById(R.id.tablelayout);
        tabLayout.addTab(tabLayout.newTab().setText("第一个"));
        tabLayout.addTab(tabLayout.newTab().setText("第二个"));
        tabLayout.addTab(tabLayout.newTab().setText("第三个"));
        tabLayout.addTab(tabLayout.newTab().setText("第四个"));
    }
}

• 代码解释

tabLayout.addTab(tabLayout.newTab().setText("第一个"));

• 添加一个标签项，顺便设置上面的内容

复杂的TabLayout

• 使用TableLayout和ViewPager联动，以完成多个页面的切换
  

• 界面布局

<?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:tab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lingzhuo.testtablelayout01.SecActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tablelayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tab:tabBackground="@color/colorPrimary"
        tab:tabSelectedTextColor="#ffffff"
        tab:tabIndicatorColor="@color/colorAccent"
        tab:tabIndicatorHeight="3dp"></android.support.design.widget.TabLayout>

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

• 就是在TableLayout控件下又添加了一个ViewPager控件

• 三个自定义的Fragment页面大同小异，这里只贴出其中一个的代码

• Fragment布局

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="第一个"
        android:id="@+id/textView" />
</LinearLayout>

• Fragment代码

public class MyFragment01 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.layout_fragment01,null);
        return view;
    }
}

• 定义一个bean类，用于存储ViewPager对应的Fragment和title

public class TabFragment {
    private Fragment fragment;
    private String title;

    public TabFragment(Fragment fragment, String title) {
        this.fragment = fragment;
        this.title = title;
    }

    public Fragment getFragment() {
        return fragment;
    }

    public void setFragment(Fragment fragment) {
        this.fragment = fragment;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

• ViewPager的Adapter代码

public class MyAdapter extends FragmentPagerAdapter{

    private List<TabFragment> list;

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

    public MyAdapter(FragmentManager fm, List<TabFragment> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position).getFragment();
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position).getTitle();
    }
}

• 活动中的逻辑代码：

public class SecActivity extends AppCompatActivity{

    private TabLayout tabLayout2;
    private ViewPager viewPager;
    private List<TabFragment> list;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sec);
        init();
        MyAdapter adapter=new MyAdapter(getSupportFragmentManager(),list);
        viewPager.setAdapter(adapter);
        tabLayout2.setupWithViewPager(viewPager);
    }

    private void init() {
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        list=new ArrayList<>();
        list.add(new TabFragment(new MyFragment01(),"第一个页面"));
        list.add(new TabFragment(new MyFragment02(),"第二个页面"));
        list.add(new TabFragment(new MyFragment03(),"第三个页面"));
        tabLayout2= (TabLayout) findViewById(R.id.tablelayout2);
    }
}

• 代码逻辑很清晰，这里就不再一一解释了。