xamarin android底部导航栏,xamarin android Fragment实现底部导航栏

菜单图片的变化资源：

tab_menu_chat.xml 、

tab_menu_more.xml、

tab_menu_contracts.xml

三个都是一样的样式。

step2：MainActivity布局文件 Main.axml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/relativelayout1"

android:background="@color/color_primary"

android:fitsSystemWindows="true">

android:id="@+id/ly_top_bar"

android:layout_width="match_parent"

android:layout_height="48dp"

android:background="@color/color_primary">

android:id="@+id/txt_topbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_centerInParent="true"

android:gravity="center"

android:textSize="18sp"

android:textColor="@color/color_white"

android:text="信息" />

android:layout_width="match_parent"

android:layout_height="2px"

android:background="@color/div_white"

android:layout_alignParentBottom="true" />

android:id="@+id/ly_tab_bar"

android:layout_width="match_parent"

android:layout_height="58dp"

android:layout_alignParentBottom="true"

android:background="@color/bg_white"

android:orientation="horizontal">

android:id="@+id/txt_chat"

style="@style/tabText"

android:drawableTop="@drawable/tab_menu_chat"

android:text="我的"/>

android:id="@+id/txt_more"

style="@style/tabText"

android:drawableTop="@drawable/tab_menu_more"

android:text="更多"/>

android:id="@+id/txt_contacts"

style="@style/tabText"

android:drawableTop="@drawable/tab_menu_contacts"

android:text="联系人"/>

android:id="@+id/div_tab_bar"

android:layout_width="match_parent"

android:layout_height="2px"

android:background="@color/div_white"

android:layout_above="@id/ly_tab_bar" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_below="@id/ly_top_bar"

android:layout_above="@id/div_tab_bar"

android:id="@+id/ly_content" />

关于布局采用的相对布局分为三个部分：头部标题、中间Fragment的位置、底部导航栏。关于根布局文件中fitsSystemWindows属性是为了配合透明状态栏使用的，有兴趣的可以看看前几天的写的那篇文章。底部导航栏文字很多属性都是一模一样的，所以提出来，写一个style。使用widget属性让其各占1/3。文字样式tabText如下：

step3：Fragment布局文件继承Fragment的类MyFragment

fg_content.xml:

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/bg_white">

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" />

MyFragment.cs

public class MyFragment : Fragment

{

private string content { get; set; }

public MyFragment(string content)

{

this.content = content;

}

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

{

View view = inflater.Inflate(Resource.Layout.fg_content, container, false);

TextView txt_content = (TextView)view.FindViewById(Resource.Id.txt_content);

txt_content.Text = content;

return view;

}

}

step3：MainActivity.cs

[Activity(Label = "FragmentDemo", MainLauncher = true, Icon = "@drawable/icon", Theme = "@android:style/Theme.Light.NoTitleBar")]

public class MainActivity : Activity

{

private TextView txt_chat;

private TextView txt_contacts;

private TextView txt_more;

private FrameLayout ly_content;

private MyFragment fg1, fg2, fg3;

private FragmentManager fManager;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

SetContentView(Resource.Layout.Main);

ly_content = (FrameLayout)FindViewById(Resource.Id.ly_content);

MyFragment fg = new MyFragment("第一个fragment");

txt_chat = (TextView)FindViewById(Resource.Id.txt_chat);

txt_contacts = (TextView)FindViewById(Resource.Id.txt_contacts);

txt_more = (TextView)FindViewById(Resource.Id.txt_more);

bindViews();

txt_chat.PerformClick();

}

//ui组件初始化与事件绑定

private void bindViews()

{

txt_chat.Click += (s, e) => { onClick(txt_chat); };

txt_contacts.Click += delegate { onClick(txt_contacts); };

txt_more.Click += delegate { onClick(txt_more); };

}

//隐藏所有Fragment

private void hideAllFragment(FragmentTransaction fragmentTransaction)

{

if (fg1 != null) fragmentTransaction.Hide(fg1);

if (fg2 != null) fragmentTransaction.Hide(fg2);

if (fg3 != null) fragmentTransaction.Hide(fg3);

}

//重置所有文本的选中状态

private void setSelected()

{

txt_chat.Selected =false;

txt_contacts.Selected = false;

txt_more.Selected = false;

}

//单击事件

public void onClick(View v)

{

FragmentTransaction fTransaction = FragmentManager.BeginTransaction();

hideAllFragment(fTransaction);

switch (v.Id)

{

case Resource.Id.txt_chat:

setSelected();

txt_chat.Selected = true;

if (fg1 == null)

{

fg1 = new MyFragment("聊天Fragment");

fTransaction.Add(Resource.Id.ly_content, fg1);

}

else{fTransaction.Show(fg1);}break;

case Resource.Id.txt_contacts:

setSelected();

txt_contacts.Selected = true;

if (fg2 == null)

{

fg2 = new MyFragment("联系人Fragment");

fTransaction.Add(Resource.Id.ly_content, fg2);

}

else{fTransaction.Show(fg2);}

break;

case Resource.Id.txt_more:

setSelected();

txt_more.Selected = true;

if (fg3 == null)

{

fg3 = new MyFragment("MoreFragment");

fTransaction.Add(Resource.Id.ly_content, fg3);

}else{fTransaction.Show(fg3);}break;

}

fTransaction.Commit();

}

}关于继承的主题使用的android自带的主题Theme.Light.NoTitle，当然你也可以引入v7兼容包，继承AppcompatActivity，使用兼容包主题

step4：沉浸式状态栏

这个随手也实现一下吧，挺简单的。Main.axml中根布局中已经设置了属性fitsSystemWindows，兼容android4.4 和安定肉ID5.* ,我们在用代码设置状态栏透明就可以。有关的介绍可以参考

Xamarin android沉浸式状态栏

if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)

{

//透明状态栏

Window.AddFlags(WindowManagerFlags.TranslucentStatus);

//透明导航栏

Window.AddFlags(WindowManagerFlags.TranslucentNavigation);

} 代码下载：http://download.csdn.net/detail/kebi007/9820839

作者：张林

转载随意注明出处