Material Design控件之TabLayout

以下内容全部或部分转自或参考于网络。

style.xml文件内容如下：

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"></style>
  <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
  </style>
  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextColor">#707070</item>
        <item name="tabSelectedTextColor">#00A859</item>
        <item name="tabIndicatorColor">#00A859</item>
        <item name="android:textStyle">bold</item>
        <item name="tabTextAppearance">@style/TextAppearance.AppCompat.Subhead.Inverse</item>
  </style>

</resources>

Strings.xml文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="Hello">Hello World, Click Me!</string>
    <string name="ApplicationName">TestTabLayout</string>

</resources>

color.xml文件内容如下：

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <color name="ColorPrimary">#2196F3</color>
    <color name="ColorPrimaryDark">#1976D2</color>

</resources>

Main.axml文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
  <android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
      android:id="@+id/appbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
      <android.support.design.widget.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      app:tabGravity="fill"
      app:tabMode="fixed"
      app:tabIndicatorHeight="4dp"
      android:background="#FEFEFE"
      style="@style/MyCustomTabLayout"
      android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>
 
    <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 

</android.support.design.widget.CoordinatorLayout>

Tablayout1.xml文件内容如下：

<?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:text="First Page"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/textView1" />

</LinearLayout>

Tablayout2.xml文件内容如下：

<?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:text="Second Page"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/textView1" />

</LinearLayout>

MainActivity.cs中代码如下：

using Android.Support.V4.View;
using Android.Support.V7.App;
using Android.Support.Design.Widget;
using Android.App;
using Android.OS;
namespace TestTabLayout
{
    [Activity(Label = "TestTabLayout", MainLauncher = true, Icon = "@drawable/icon",Theme = "@style/Theme.DesignDemo")]
    public class MainActivity : AppCompatActivity
    {
        int count = 1;
        ViewPager viewpager;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            viewpager = FindViewById<ViewPager>(Resource.Id.viewpager);
            setupViewPager(viewpager); //Calling SetupViewPager Method  
            //viewpager.Adapter.NotifyDataSetChanged();
            /*
             调用adapter.notifyDataSetChanged与listView.setAdapter函数都会引起界面重绘，
             区别是前者会保留原有位置、数据信息，后者是回到初始状态
             */
            //TabLayout  
            var tabLayout = FindViewById<TabLayout>(Resource.Id.tabs);
            tabLayout.SetupWithViewPager(viewpager);
        }
        void setupViewPager(Android.Support.V4.View.ViewPager viewPager)
        {
            var adapter = new Adapter(SupportFragmentManager);
            adapter.AddFragment(new TabFragment1(), "First Fragment");
            adapter.AddFragment(new TabFragment2(), "Second Fragment");
            viewPager.Adapter = adapter;           
        }
    }

}

TabFragment1.cs中代码如下：

using Android.OS;

using Android.Views;


namespace TestTabLayout
{
    public class TabFragment1 : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Create your fragment here
        }
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var v = inflater.Inflate(Resource.Layout.Tablayout1, container, false);
            return v;
        }
    }

}

TabFragment2.cs中代码如下：

using Android.OS;
using Android.Views;
namespace TestTabLayout
{
    public class TabFragment2 : Android.Support.V4.App.Fragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Create your fragment here
        }
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var v = inflater.Inflate(Resource.Layout.Tablayout2, container, false);
            return v;
        }
    }

}

Adapter.cs中代码如下：

using System;
using System.Collections.Generic;
using V4Fragment = Android.Support.V4.App.Fragment;
using V4FragmentManager = Android.Support.V4.App.FragmentManager;
namespace TestTabLayout
{
    class Adapter : Android.Support.V4.App.FragmentPagerAdapter
    {
        List<V4Fragment> fragments = new List<V4Fragment>();
        List<string> fragmentTitles = new List<string>();
        public Adapter(V4FragmentManager fm) : base(fm) { }
        public void AddFragment(V4Fragment fragment, String title)
        {
            fragments.Add(fragment);
            fragmentTitles.Add(title);
        }
        public override V4Fragment GetItem(int position)
        {
            return fragments[position];
        }
        public override int Count
        {
            get
            {
                return fragments.Count;
            }
        }
        public override Java.Lang.ICharSequence GetPageTitleFormatted(int position)
        {
            return new Java.Lang.String(fragmentTitles[position]);
        }
    }
}