前言
今天要向大家介绍的是有关于微服私访App的主界面的UI框架实现,根据界面模块可以划分为三个部分:1.顶部导航栏 2.中间内容布局 3.底部导航栏
先来看一下预览效果:
介绍
整体的UI实现是ViewPager+Fragment的实现方式,这也是比较主流的实现方式。
一、顶部导航栏
从上面预览效果可以看出,顶部的导航栏只是在页面的切换时更改了titleBar的标题,以及显示或隐藏图标控件。由于Android源生的actionBar的局限性,这里我们采用自己自定义的TitleBar,因此这里需要对标题栏进行隐藏处理
requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题栏
,下面看一下titleBar的实现,这里把包含所有界面可能用到的titleBar控件都写出来,通过代码来控制隐藏和显示。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="43dp"
android:background="@color/colorAccent"
android:gravity="center_vertical"
>
<TextView
android:id="@+id/title_bar_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:drawableLeft="@drawable/title_bar_back"
android:gravity="center"
android:paddingLeft="@dimen/title_bar_back_left"
android:paddingRight="@dimen/title_bar_add_padding"
android:paddingBottom="@dimen/title_bar_back_bottom"
android:paddingTop="@dimen/title_bar_back_bottom"/>
<TextView
android:id="@+id/title_bar_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="name"
android:singleLine="true"
android:textColor="@color/white"
android:textSize="@dimen/title_bar_text_size"/>
<ImageView
android:id="@+id/title_bar_more"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/title_bar_add"
android:paddingTop="@dimen/title_bar_add_bottom"
android:paddingBottom="@dimen/title_bar_add_bottom"
android:paddingLeft="@dimen/title_bar_add_padding"
android:paddingRight="@dimen/title_bar_add_right"
android:visibility="gone"
/>
<ImageView
android:id="@+id/title_bar_save"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/title_bar_save"
android:paddingTop="@dimen/title_bar_save_bootom"
android:paddingBottom="@dimen/title_bar_save_bootom"
android:paddingLeft="@dimen/title_bar_save_right"
android:paddingRight="@dimen/title_bar_save_right"
android:visibility="gone"
/>
<ImageView
android:id="@+id/title_bar_change"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_toLeftOf="@+id/title_bar_more"
android:layout_centerVertical="true"
android:src="@drawable/title_bar_histroy"
android:paddingTop="@dimen/title_bar_add_padding"
android:paddingBottom="@dimen/title_bar_add_padding"
android:paddingLeft="@dimen/title_bar_histroy_right"
android:paddingRight="@dimen/title_bar_histroy_right"
android:visibility="gone"
/>
</RelativeLayout>
总结一下,可以从以下三个步骤来实现顶部导航栏:1.分析全量因素 2.分析可控制变化因素 3.抽取公共基类
二、底布导航栏
底布的导航栏采用的通过权重来实现五个控件的等间距分布,每一块采用的是TexView控件,通过android:drawableTop="@drawable/menu_me_style"
来实现在文本上面放置图片。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_menu_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@color/color_bottom_layout_bg"
android:layout_alignParentBottom="true"
android:layout_gravity="center_vertical"
>
<TextView
android:id="@+id/txt_menu_bottom_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:drawablePadding="@dimen/bottom_img_padding"
android:drawableTop="@drawable/menu_home_style"
android:gravity="center"
android:padding="@dimen/bottom_img_padding"
android:text="@string/txt_home"
android:textColor="@color/color_txt_bottom_style"
android:textSize="@dimen/bottom_text_size"/>
<TextView
android:id="@+id/txt_menu_bottom_shop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:drawablePadding="@dimen/bottom_img_padding"
android:drawableTop="@drawable/menu_shop_style"
android:gravity="center"
android:padding="@dimen/bottom_img_padding"
android:text="@string/txt_shop"
android:textColor="@color/color_txt_bottom_style"
android:textSize="@dimen/bottom_text_size"/>
<TextView
android:id="@+id/txt_menu_bottom_visit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:drawablePadding="@dimen/bottom_img_padding"
android:drawableTop="@drawable/menu_visit_style"
android:gravity="center"
android:padding="@dimen/bottom_img_padding"
android:text="@string/txt_visit"
android:textColor="@color/color_txt_bottom_style"
android:textSize="@dimen/bottom_text_size"/>
<TextView
android:id="@+id/txt_menu_bottom_train"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:drawablePadding="@dimen/bottom_img_padding"
android:drawableTop="@drawable/menu_train_style"
android:gravity="center"
android:padding="@dimen/bottom_img_padding"
android:text="@string/txt_train"
android:textColor="@color/color_txt_bottom_style"
android:textSize="@dimen/bottom_text_size"/>
<TextView
android:id="@+id/txt_menu_bottom_me"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:drawablePadding="@dimen/bottom_img_padding"
android:drawableTop="@drawable/menu_me_style"
android:gravity="center"
android:padding="@dimen/bottom_img_padding"
android:text="@string/txt_me"
android:textColor="@color/color_txt_bottom_style"
android:textSize="@dimen/bottom_text_size"/>
</LinearLayout>
到这里就可以通过include 标签来添加顶部和底布导航栏
<include
android:id="@+id/title_up_layout"
layout="@layout/title_bar_activity"/>
<include
android:id="@+id/layout_menu_bottom"
layout="@layout/title_bottom_layout"/>
三、中间内容层实现ViewPager+Fragment
1.为了更好实现对具有相同导航栏的Activity进行管理,我们需要封装一个自己的BaseFragmentActivity来重写setContentView,更好的控制titleBar的上的控件的隐藏和显示。
2.构建fragment基类,通过重写startActivity(),给fragment到Activity添加动画事件。
3.通过getSupportFragmentManager来构造ViewPager的适配器,设置setOnPageChangeListener监听来实现,fragment的滑动切换。
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override public void onPageSelected(int position) {
switch (position){
case TAB_HOME://点击首页模块执行
IsTab = 1;
jumpHomeFragment();
break;
case TAB_SHOP://点击巡店模块执行
IsTab = 2;
jumpShopFragment();
break;
case TAB_VISIT://点击拜访模块执行
IsTab = 3;
jumpVisitsFragment();
break;
case TAB_TRAIN://点击培训模块执行
IsTab = 4;
jumpTrainFragment();
break;
case TAB_ME://点击个人中心模块执行
IsTab = 5;
jumpMeFragment();
break;
}
}
@Override public void onPageScrollStateChanged(int state) {
}
});
}
4.通过对底部导航栏中的TextView添加点击事件来实现通过点击来切换fragment
case R.id.txt_menu_bottom_home://点击首页模块执行
IsTab = 1;
titleBarMore.setVisibility(View.GONE);
titleBarChange.setVisibility(View.GONE);
setSelected(txtMenuBottomHome);
viewPagerContent.setCurrentItem(TAB_HOME, false);
setTitleBarName("首页");
break;
case R.id.txt_menu_bottom_shop://点击巡店模块执行
IsTab = 2;
titleBarMore.setVisibility(View.VISIBLE);
titleBarChange.setVisibility(View.VISIBLE);
setSelected(txtMenuBottomShop);
viewPagerContent.setCurrentItem(TAB_SHOP, false);
setTitleBarName("巡店");
break;
case R.id.txt_menu_bottom_visit://点击拜访模块执行
IsTab = 3;
titleBarMore.setVisibility(View.VISIBLE);
titleBarChange.setVisibility(View.GONE);
setSelected(txtMenuBottomVisit);
viewPagerContent.setCurrentItem(TAB_VISIT, false);
setTitleBarName("拜访");
break;
case R.id.txt_menu_bottom_train://点击培训模块执行
IsTab = 4;
titleBarMore.setVisibility(View.GONE);
titleBarChange.setVisibility(View.GONE);
setSelected(txtMenuBottomTrain);
viewPagerContent.setCurrentItem(TAB_TRAIN, false);
setTitleBarName("培训");
break;
case R.id.txt_menu_bottom_me://点击个人中心模块执行
IsTab = 4;
titleBarMore.setVisibility(View.GONE);
titleBarChange.setVisibility(View.GONE);
setSelected(txtMenuBottomMe);
viewPagerContent.setCurrentItem(TAB_ME, false);
setTitleBarName("个人中心");
break;
default:
break;
}
小伙伴们到这里就实现了整体的一个UI框架的搭建,是不是很简单~,在这里说明一下,本文中这种tab导航实现的方式较为简单,感兴趣的读者可以考虑用一下两种方式实现效果更好的tab导航:
1.顶部导航栏:Toolbar 参考文章:
http://dujinghua.cn/2017/01/18/Android5.0%E4%B9%8BToolbar%E8%AF%A6%E8%A7%A3/
2.底部导航栏:BottomView 参考文章:
http://www.jianshu.com/p/2bd1d1f35465到这里依旧给大家介绍几个干货网站:
屏幕尺寸:https://material.io/devices/
配色方案:https://webgradients.com/
从图片中提取颜色:http://www.colorfavs.com/