注册
登录
| 关键词： nbsp 导航 菜单 标签 ViewPager 区域 控件 一个 顶部 页面 |
随着时间的推移现在的软件要求显示的内容越来越多，所以要在小的屏幕上能够更好的显示更多的内容，首先我们会想到底部菜单栏，但是有时候像今日头条新闻客户端要显示的内容太多，而且又想在主界面全部显示出来，所以有加了顶部导航栏。今日头条顶部导航栏区域的主要部分是一个导航菜单。导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面。当用户在ViewPager区域滑动页面时，对应的导航菜单标签也会相应的被选中，选中的标签通过一个矩形红框高亮显示，红框背景中的标签文字变为白色，红框外的区域标签文字仍为灰色。当用户直接在导航菜单选中某个标签时，ViewPager会自动的切换到对应的分页面。在本文中导航菜单作为一个单独的UI控件实现，类名为CatagoryTabStrip，继承自HorizontalScrollView，这样就可以很容易的实现导航菜单的左右滑动效果以及与下面ViewPager控件的联动。先看一下实现的效果对比：顶部导航栏区域和ViewPager区域View层次结构主界面布局[html] view plaincopy<RelativeLayout android:id="@+id/main_layout" android:background="@color/activity_bg_color" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <RelativeLayout android:id="@+id/title_bar" style="@style/main_title_bar_style"> <FrameLayout android:id="@+id/top_head_container" android:paddingLeft="10.0dip" android:paddingRight="10.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent"> <ImageView android:layout_gravity="center_vertical" android:id="@+id/top_head" android:contentDescription="@string/app_name" android:background="@drawable/bg_head" android:src="@drawable/default_round_head" android:padding="2.0dip" android:layout_width="@dimen/head_size" android:layout_height="@dimen/head_size" android:scaleType="fitXY" /> </FrameLayout> <ImageView android:gravity="center" android:id="@+id/top_more" android:contentDescription="@string/app_name" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="12.0dip" android:src="@drawable/right_drawer" android:scaleType="centerInside" android:layout_alignParentRight="true" android:layout_centerVertical="true" /> <RelativeLayout android:id="@+id/title_click_layout" android:paddingLeft="13.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_centerInParent="true"> <FrameLayout android:id="@+id/title_parent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true"> <ImageView android:layout_gravity="center" android:id="@+id/title_recent" android:contentDescription="@string/app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/title" /> < |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
