一起来搭简单的App框架
1、概述
最近在学车,抽着空写了一个常用的App框架,可惜不会制作gif图片,请忽略录屏软件的那个浮动窗口,要是有更好的方式制作gif麻烦告知下提前感谢,效果图如下,凑合着看下吧。
主要实现了
【1】使用RadioGroup处理选项卡优化布局
【2】使用ToolBar跟侧滑图表联动,效果更好
【3】集合了viewerPager+fragment,drawerlayout+toolbar,optionmenu以及circleImageView处理头像等功能
一般app项目应该可以应付了。下面说下实现
2、选项卡按钮
这里使用了RadioGroup,以前用的是多层linearlayout结合weight属性,再使用ImageView和TextView感觉有点过度绘制,这里做了优化采用RadioGroup
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/bottom" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/mainpage_mycrircle_leftview_item_auth_name" android:orientation="horizontal"> <RadioButton android:id="@+id/id_tab_mycircle" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:drawableTop="@drawable/mainpage_tab_mycircle" android:text="我的圈子" /> <RadioButton android:id="@+id/id_tab_discovery" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:drawableTop="@drawable/mainpage_tab_discovery" android:text="发现"/> <RadioButton android:id="@+id/id_tab_message" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:drawableTop="@drawable/mainpage_tab_message" android:text="消息"/> <RadioButton android:id="@+id/id_tab_setting" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:drawableTop="@drawable/mainpage_tab_setting" android:text="个人中心" /> </RadioGroup> </RelativeLayout> </span>
出来的效果是这样的感觉还可以,布局也很简单
,
不过要注意对radioButton的style做一番更改换掉原来的属性 styles.xml中
<span style="font-size:18px;"><style name="style_RadioButton"> <item name="android:button">@null</item> <item name="android:background">@null</item> <item name="android:layout_weight">0.25</item> <item name="android:gravity">center</item> <item name="android:textColor">@color/gray</item> <item name="android:textSize">12sp</item> </style></span>
3、ViewPager+fragment实现选项卡内容区域
主要是viewPager使用的FragmentPagerAdapter
如何使用ViewPager和他的三种适配器请参考我的上一篇博客http://blog.csdn.net/xsf50717/article/details/49764521 这里就不在详细讲了,看一下核心代码
首先我们需要4个fragment对应4个选项卡,然后在viewPager中管理这4个,核心代码在MainActivity.java中
<span style="font-size:18px;">private void initViewPages() { //初始化四个布局 Fragment01 tab01 = new Fragment01(); Fragment02 tab02 = new Fragment02(); Fragment03 tab03 = new Fragment03(); Fragment04 tab04 = new Fragment04(); mFragments.add(tab01); mFragments.add(tab02); mFragments.add(tab03); mFragments.add(tab04); //初始化Adapter这里使用FragmentPagerAdapter mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } }; mViewPager.setAdapter(mAdpter); }</span>
然后逻辑处理在MainActivity的initEvent()中,对RadioGroup和Viewpager滑动监听
<span style="font-size:18px;"> //监听RadioGroup mGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.id_tab_mycircle: mViewPager.setCurrentItem(0, false); break; case R.id.id_tab_discovery: mViewPager.setCurrentItem(1, false); break; case R.id.id_tab_message: mViewPager.setCurrentItem(2, false); break; case R.id.id_tab_setting: mViewPager.setCurrentItem(3, false); break; default: break; } } }); //监听Page滑动 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //当viewPager滑动的时候 switch (position) { case 0: mGroup.check(R.id.id_tab_mycircle); break; case 1: mGroup.check(R.id.id_tab_discovery); break; case 2: mGroup.check(R.id.id_tab_message); break; case 3: mGroup.check(R.id.id_tab_setting); break; default: break; } } @Override public void onPageScrollStateChanged(int state) { } }); </span>
4、侧滑联动
这里使用了谷歌官方的的DrawerLayout(support V4包)+ToolBar(support V7包)方式,需要在android stuido中实现导入这俩个库,一般V7库默认就存在了
4.1、DrawerLayout的使用
DrawerLayout使用比较简单,必须把DrawerLayout作为布局的跟标签。然后在跟标签中添加一个包含内容的视图,就是当抽屉完全隐藏的时候显示的内容布局,然后 添加的就是抽屉布局,这个布局可以按照需求自己定义,顺序不要搞反了
本例的抽屉布局drawerlayout.xml代码如下
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout android:id="@+id/id_drawerlayout" 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"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/mainpage_mycrircle_leftview_item_auth_name" android:orientation="horizontal"> <RadioButton android:id="@+id/id_tab_mycircle" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:drawableTop="@drawable/mainpage_tab_mycircle" android:text="我的圈子" /> <RadioButton android:id="@+id/id_tab_discovery" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/mainpage_tab_discovery" android:text="发现"/> <RadioButton android:id="@+id/id_tab_message" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/mainpage_tab_message" android:text="消息"/> <RadioButton android:id="@+id/id_tab_setting" style="@style/style_RadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/mainpage_tab_setting" android:text="个人中心" /> </RadioGroup> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/radioGroup" > </android.support.v4.view.ViewPager> </RelativeLayout> <LinearLayout android:id="@+id/id_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#E0EEE0" android:orientation="vertical"> <com.elvis.utils.CircleImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="10dp" android:src="@drawable/xsfelvis" app:border_color="@color/page_item_black_50" app:border_width="2dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/banner_left" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:paddingTop="5dp" android:text="xsfelvis" android:textSize="15sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/banner_right" /> </LinearLayout> <ListView android:id="@+id/id_lv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:cacheColorHint="#00000000" android:footerDividersEnabled="false" android:gravity="center" android:listSelector="@android:color/transparent"> </ListView> </LinearLayout> </android.support.v4.widget.DrawerLayout> </span>
我们可以看出,内容布局在RelativeLayout中,抽屉布局在LinearLayout中,内容布局包含radiogroup,viewpager俩部分,而抽屉布局包含一个CircleImageView和一个listview
4.2 ToolBar的使用
由于Toolbar是继承自View,所以可以像其他标准控件一样直接主布局文件添加Toolbar,但是为了提高Toolbar的重用效率,可以在layout创建一个custom_toolbar.xml代码如下:
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar android:id="@+id/tl_custom" 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="wrap_content" android:background="?attr/colorPrimaryDark" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.ActionBar"> </android.support.v7.widget.Toolbar> </span>
使用Toolbar一定要将styles中apptheme重新设置styles.xml
<span style="font-size:18px;"> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- 状态栏和标题栏颜色--> <!--<item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item> <!--Toolbar颜色--> <item name="colorPrimary">@color/Indigo_colorPrimary</item> <!-- 标题颜色--> <item name="android:textColorPrimary">@android:color/white</item> <!-- 溢出菜单图标颜色--> <item name="colorControlNormal">@android:color/white</item> <!-- 箭头 --> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> <!-- 溢出菜单文字颜色--> <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item> <!-- 菜单项点击selector--> <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item> </style> <!-- 左边的箭头指示--> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/white</item> </style> <!--option菜单文字样式--> <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large"> <item name="android:textColor">@color/overflowTextColor</item> </style> </span>
4.3、DrawerLayout与Toolbar联动
从效果图也可以看出,我们在滑动中从横线变为箭头,效果有点炫酷,在MainActivity.java中initEvent()中
<span style="font-size:18px;"> //ToolBar toolbar.setTitle("APP FrameWork");//设置Toolbar标题 toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色 setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawopen, R.string.drawclose) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); toolbar.setTitle("侧滑栏"); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); toolbar.setTitle("APP FrameWork"); } }; mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle); } </span>
5、optionMeun设置
菜单显示出图标,我们需要重新一个方法,使用反射让其显示出来
<span style="font-size:18px;"> @Override public boolean onMenuOpened(int featureId, Menu menu) { if (menu != null) { if (menu.getClass().getSimpleName().equals("MenuBuilder")) { try { Method m = menu.getClass().getDeclaredMethod( "setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } } } return false;//关闭系统menu按键 } </span>
最后记得return false 否则你按系统的menu也会从下方出来menu菜单,感觉不是很好看。
到此结束,源码在github上,有用的话就点个赞吧~https://github.com/xsfelvis/AppFrameWork
一起来搭简单的App框架的更多相关文章
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- 几款开源的hybird移动app框架分析
几款开源的Hybrid移动app框架分析 Ionic Onsen UI 与 ionic 相比 jQuery Mobile Mobile Angular UI 结论 很多移动开发者喜欢使用原生代码开发, ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 移动app框架inoic功能研究
原生移动app框架inoic功能研究 本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验. 一.inoic是什么? inoic是一个可以使用Web技术以hybird方式开发移动app的前 ...
- 混合App 框架选型
个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...
- 最简单的Java框架
框架framework的目的是定义骨架式方案,处理各种相同的底层细节:而开发人员使用框架时,能够依照自己的需求实现自己的功能--仅仅须要填入自己的东西/flesh. 最简单的框架,类似于JUnit,它 ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- koa2源码解读及实现一个简单的koa2框架
阅读目录 一:封装node http server. 创建koa类构造函数. 二:构造request.response.及 context 对象. 三:中间件机制的实现. 四:错误捕获和错误处理. k ...
- 使用cordova + vue搭建混合app框架
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zxj0904010228/article ...
随机推荐
- Android开发过程中在sh,py,mk文件中添加log信息的方法
Android开发过程中在sh,py,mk文件中添加log信息的方法 在sh文件中: echo "this is a log info" + $info 在py文件中: print ...
- ANTLR和StringTemplate实例:自动生成单元测试类
ANTLR和StringTemplate实例:自动生成单元测试类 1. ANTLR语法 要想自动生成单元测试,首先第一步就是分析被测试类.这里以Java代码为例,用ANTLR对Java代码进行分析.要 ...
- 计算机网络之TCP协议与UDP协议
运输层向它上面应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最底层. 两个主机进行通信实际上就是两个主机中的应用进程互相通信.应用进程之间的通信又称为端到端的通信. 应用层不同进 ...
- Android程序员必须掌握的知识点-多进程和多线程
当某个应用组件启动且该应用没有运行其他任何组件时,Android 系统会使用单个执行线程为应用启动新的 Linux 进程.默认情况下,同一应用的所有组件在相同的进程和线程(称为"主" ...
- 剑指Offer——中国银行面试知识储备
剑指Offer--中国银行面试知识储备+面试内容 事件介绍 时间:2016.11.23 08:30 地点:北京市海淀区永丰路299号南门(中国银行软件中心) 事件:中国银行面试(中英文面试) 注意事项 ...
- 将树形递归转换为loop
class Stack(object): def __init__(self,**kwargs): self.__dict__.update(kwargs) def __str__(self): re ...
- 27 自定义View 和案例
有时安卓提供的View不满足我们的需求时可以创建一个类继承View或其子类重写方法 如 package com.qf.sxy.day28_customview.view; import android ...
- 剑指Offer——搜狐畅游笔试题+知识点总结
剑指Offer--搜狐畅游笔试题+知识点总结 情景回顾 时间:2016.9.24 10:00-12:00 地点:山东省网络环境智能计算技术重点实验室 事件:搜狐畅游笔试 注意事项:要有大局观,该舍 ...
- java.util.Arrays类详解(源码总结)
概述 Arrays类位于java.util包下,是一个对数组操作的工具类.今天详细的看了看Arrays类的4千多行源码,现将Arrays类中的方法做一个总结(JDK版本:1.6.0_34).Array ...
- Dynamics CRM2016 业务流程之Task Flow(一)
Task Flow 属于CRM移动端的特性,如果在项目实施中用不到CRM自带的APP或者对自APP不感冒的,那就没有往下看的必要了,移步吧. 该功能默认是不开启的,需要我们去系统设置中开启它,打勾,选 ...