[置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

标签: xamarin
3546人阅读 评论(0) 收藏 举报
分类:

最近几天不忙,所以把项目中的顶部导航栏的实现归集一下。android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单。当然我这个导航栏是基于xamarin android的。废话不多说首先我们就来看看效果图


如果对于Fragment不太属性可以看看这篇文章 xamarin android Fragment实现底部导航栏。实现的主要步骤如下:

  1. Xamarin.Android TabLayout的简单使用
  2. Demo结构图
  3. 布局文件的介绍
  4. 主要Fragment类的介绍和FragmentPageAdapter的介绍
  5. MainActivity.cs 实现逻辑

1.xamarin android tabLayout的使用介绍

TabLayout是设计兼容包的内容,所以我们在Nuget上先引入XamarinAndroid.Support.Design 兼容包,所实现的效果如上图。布局文件如下:
  <LinearLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/color_primary">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabMain"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabIndicatorColor="@color/color_white"
            app:tabSelectedTextColor="@color/color_white"
            app:tabIndicatorHeight="4dp"
            app:tabTextColor="#dedede"
            />
      </LinearLayout>
tablayout选中tabItem的标签样式的改变主要有这几个属性:
tabIndicator:选中标签提示条的颜色;tabSelectedTextColor:选中标签文本颜色;tabTextColor:默认文本颜色;tabIndicatorHeight:选中标签提示条的高度。不过有点尴尬的是不能直接设置选中标签文本大小。
下面我们就来添加tabItem,一种用代码的方式动态添加TabItem。另一种是在axml文件里面写入tabItem。先来看看第一种用代码添加TabItem(普遍用法)
            TabLayout tab = FindViewById<TabLayout>(Resource.Id.tabMain);
            tab.AddTab(tab.NewTab().SetText("热点"));
            tab.AddTab(tab.NewTab().SetText("社会"));
            tab.AddTab(tab.NewTab().SetText("体育"));
第一种方法在xml文件中写入TabItem。不过令人遗憾的是,按照java的写法居然报错。布局文件如下:

      <android.support.design.widget.TabLayout
            android:id="@+id/tabMain"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabIndicatorColor="@color/color_white"
            app:tabSelectedTextColor="@color/color_white"
            app:tabIndicatorHeight="4dp"
            app:tabTextColor="#dedede">
            <android.support.design.widget.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/tabItem1"/>
            <android.support.design.widget.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:id="@+id/tabItem1"/>
        </android.support.design.widget.TabLayout>
如果你觉得TabLayout自带的TabItem不符合你的审美,你也可以自定义一个:

2.项目结构图


1.布局文件的介绍

首先来看一下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"
    android:background="@color/color_white">
    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="呵呵"
        android:textColor="@color/color_primary"
        android:textSize="20sp" />
</LinearLayout>
Main.axml代码如下,用的是相对定位,上方放的是tab,下方是ViewPager里填充Fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/relativelayout1"
    android:background="@color/color_primary"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/color_primary"
        android:layout_alignParentTop="true">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabMain"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabIndicatorColor="@color/color_white"
            app:tabSelectedTextColor="@color/color_white"
            app:tabIndicatorHeight="4dp"
            app:tabTextColor="#dedede" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#dedede"
        android:layout_below="@id/ly_top_bar">
        <android.support.v4.view.ViewPager
            android:id="@+id/ly_content"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</RelativeLayout>

3.Fragment类的介绍和Viewpager数据适配器MyFragmentPageAdapter.cs的介绍

先来看一下Fragment类,同样其他两个都是一样的,都是使用V4兼容包下的Fragment。
using Android.Views;
using Android.Widget;
using Fragment = Android.Support.V4.App.Fragment;
namespace FragmentDemo.Fragments
{
    public class MyFragment2:Fragment
    {
        private string content { get; set; }
        public MyFragment2(string  content)
        {
            this.content = content;
        }
        public override View OnCreateView(LayoutInflater  inflate,ViewGroup  container,Bundle savedInstanceState)
        {
            View view = inflate.Inflate(Resource.Layout.fg_content_more,container,false);
            TextView txt_content = view.FindViewById<TextView>(Resource.Id.txt_content);
            txt_content.Text =content;
            return view;
        }
    }
}

MyFragmentPagerAdapter.cs

using System;
using System.Collections.Generic;
using Android.Views;
using Android.Support.V4.App;
using Fragment = Android.Support.V4.App.Fragment;
namespace FragmentDemo.Fragments
{
    public class MyFragmentPagerAdapter :FragmentPagerAdapter
    {
        private const int TabItemCount = 3;
        private MyFragment myFragment = null;
        private MyFragment2 myFragment2 = null;
        private MyFragment3 myFragment3 = null; 
        public MainActivity MainActivity { get; set; }
        private readonly List<Tuple<string, Type>> tabList = new List<Tuple<string,Type>>();
        public MyFragmentPagerAdapter(Android.Support.V4.App.FragmentManager fm,int TabItemCount):base(fm)
        {
            AddTab<MyFragment>("热点");
            AddTab<MyFragment2>("社会");
            AddTab<MyFragment3>("体育");
        }
        public void AddTab<T>(string  title)
        {
            tabList.Add(Tuple.Create(title,typeof(T)));
        }
        public override int Count
        {
            get
            {
                return TabItemCount;
            }
        }
        public new string GetPageTitle(int position)
        {
            return tabList[position].Item1;
        }
        public override Java.Lang.Object InstantiateItem(ViewGroup container, int position)
        {
            return base.InstantiateItem(container, position);
        }
        public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue)
        {
            base.DestroyItem(container, position, objectValue);
        }
        public override Fragment GetItem(int position)
        {
            var type = tabList[position].Item2;
            var retFragment = Activator.CreateInstance(type) as Android.Support.V4.App.Fragment;
            return retFragment;
        }
    }
}


MyFragmentPagerAdapter.cs 我这里继承的是FragmentStatePagerAdapter,ViewPager要实现的就是将我们要显示的视图(Fragment)进行绑定,Viewpager有他自己的数据适配器PageAdapter.官方建议我们使用Fragment来填充ViewPager,给我们提供了两个适配器来管理生命周期,分别是FragmentPageAdapter和FragmentStatePagerAdapter

他们都是继承自pagerAdapter。使用区别如下:
FragmentPageAdapter:该类生成的每一个Fragment都会保存在内存之中,因此使用于那些相对静态的页面,页数相对少的那种。
FragmentStatePagerAdapter:如果数据动态较大,占用内存较多应该使用FragmentStatePagerAdapter.该类生存的Fragment不保存内存中。

MainActivity.cs实现逻辑

MainActivity.cs 代码逻辑比较简单,就不多用文字描述

using Android.App;
using Android.Views;
using Android.OS;
using FragmentDemo.Fragments;
using Android.Support.V7.App;
using Android.Support.V4.View;
using Android.Support.Design.Widget;
namespace FragmentDemo
{
    [Activity(Label = "FragmentDemo", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/AppTheme")]
    public class MainActivity : AppCompatActivity
    {
        //UI objects
        private ViewPager viewPager;
        private MyFragmentPagerAdapter mAdapter;
        //页面的常量
        public const int PAGE_ONE = 0;
        public const int PAGE_TWO = 1;
        public const int PAGE_THREE = 2;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);

            TabLayout tab = FindViewById<TabLayout>(Resource.Id.tabMain);
            tab.AddTab(tab.NewTab().SetText("热点"));
            tab.AddTab(tab.NewTab().SetText("社会"));
            tab.AddTab(tab.NewTab().SetText("体育"));

            tab.TabGravity = TabLayout.ModeScrollable;
            if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)
            {
                //透明状态栏  
                Window.AddFlags(WindowManagerFlags.TranslucentStatus);
                //透明导航栏  
                Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
            }
            viewPager = FindViewById<ViewPager>(Resource.Id.ly_content);
            mAdapter = new MyFragmentPagerAdapter(SupportFragmentManager,tab.TabCount);  
           viewPager.Adapter = mAdapter;
           viewPager.CurrentItem=0;
           //txt_chat.Selected = true;
            //Tab 选择事件
            tab.TabSelected += (s, e) =>
            {
                viewPager.CurrentItem = e.Tab.Position;
            };
            viewPager.AddOnPageChangeListener(new  TabLayout.TabLayoutOnPageChangeListener(tab));
        }
      }
    }

在xamarin android中实现这种顶部导航栏方式有很多种,使用非常广泛,实现逻辑并不复杂,下载代码链接:http://download.csdn.net/detail/kebi007/9823577

作者:张林

标题:xamarin Tablayout+Viewpager+Fragment顶部导航栏 原文地址:http://blog.csdn.net/kebi007/article/details/70470754

转载随意注明出处




查看评论

C# + Xamarin开发Android应用 --- Tab的实现

C# + Xamarin开发Android应用 --- Tab的实现
  • csharp25
  • csharp25
  • 2015-05-19 18:10:13
  • 2405

xamarin android实现Toolbar+DrawerLayout完美侧滑导航栏

#### 前言 #### 如果你有关注Material Design,会发现国内的一些app也在使用material Design这种设计,我常用的网易有道词典就使用了Material Design...
  • kebi007
  • kebi007
  • 2017-09-05 23:34:44
  • 2230

Tablayout+Fragment顶部选项卡实现

MaterialDesign使用 (一) TabLyout的使用使用TabLayout+Fragment实现顶部选项卡2016/9/7 星期三 先看效果图:使用Tablayout,首先需要在项...
  • qq_23179075
  • qq_23179075
  • 2016-09-08 14:29:46
  • 10278

TabLayout用法,android顶部导航栏,android底部导航栏

转载出处:http://blog.csdn.net/tianyaleixiaowu/article/details/50820257 TabLayout是android.suppor...
  • u010779707
  • u010779707
  • 2017-12-12 16:37:02
  • 587

Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章这里我们用TabLayout来实现这一效果。TabLayout是An...
  • itachi85
  • itachi85
  • 2015-12-27 16:58:57
  • 25552

TabLayout+ViewPager+Fragment实现顶部或底部导航栏

以前看慕课网的教程,写过一个微信Tab选项卡切换的例子,使用的是ViewPager+Fragment来实现的,说实话,当时为了实现一些效果,还是写了蛮多的代码,但是,今天介绍的TabLayout+Vi...
  • bingjianIT
  • bingjianIT
  • 2016-10-12 19:01:57
  • 3027

TabLayout轻松实现仿今日头条顶部tab导航效果

前言 自android5.0出来后,谷歌使用了Material Design设计风格,随着带来了许多新的控件,如:SnackBar,TextinputLayout,以及今天使用的TabLayout,这...
  • ydxlt
  • ydxlt
  • 2015-12-14 13:56:44
  • 3633

Android:TabLayout向上滑动停留页面顶部

相信大家在很多APP中都可以看到这样的效果;下面是一个tablayout,上面可以加入其他的布局文件,当滑动的时候tablayout停留在页面顶部; 我们这里使用CoordingatorLayout ...
  • Zheng_Jiao
  • Zheng_Jiao
  • 2017-07-27 14:12:37
  • 3709

首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment

前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高,主要的实现手段有以下: TabWidget 隐藏TabWidget,使用RadioGroup和RadioButton Fragmen...
  • carson_ho
  • carson_ho
  • 2016-07-24 11:27:31
  • 12236

C# iOS Xamarin tableview 复用的使用

我们大概了解了tableview的复用机理,我们接着上上一片的文章,来实现一级二级数据的现实,这里不仅仅是cell用到了复用问题,而且还将section进行了复用,道理其实还是一样的,不得不说苹果的那...
  • J_Kang
  • J_Kang
  • 2016-07-20 10:01:05
  • 679
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 64万+
    积分: 4576
    排名: 8056
    博客专栏
    最新评论