一起来搭简单的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 ...
随机推荐
- hiredis异步接口封装并导出到Lua
hiredis异步接口封装并导出到Lua(金庆的专栏 2017.1)hiredis 不支持 Windows, Windows 下使用 wasppdotorg / hiredis-for-windows ...
- cassandra 3.x官方文档(4)---分区器
写在前面 cassandra3.x官方文档的非官方翻译.翻译内容水平全依赖本人英文水平和对cassandra的理解.所以强烈建议阅读英文版cassandra 3.x 官方文档.此文档一半是翻译,一半是 ...
- Django Model field reference
===================== Model field reference ===================== .. module:: django.db.models.field ...
- 用Netty解析Redis网络协议
用Netty解析Redis网络协议 根据Redis官方文档的介绍,学习了一下Redis网络通信协议.然后偶然在GitHub上发现了个用Netty实现的Redis服务器,很有趣,于是就动手实现了一下! ...
- linux:关于Linux系统中 CPU Memory IO Network的性能监测
我们知道:系统优化是一项复杂.繁琐.长期的工作.通常监测的子系统有以下这些:CPUMemoryIO Network 下面是常用的监测工具 Linux 系统包括很多子系统(包括刚刚介绍的CPU,Memo ...
- Device Mapper 代码分析
Device Mapper(DM)是Linux 2.6全面引入的块设备新构架,通过DM可以灵活地管理系统中所有的真实或虚拟的块设备. DM以块设备的形式注册到Linux内核中,凡是挂载(或者说&quo ...
- 剑指Offer——知识点储备-J2EE基础
剑指Offer--知识点储备-J2EE基础 9.2 jdk 1.8的新特性(核心是Lambda 表达式) 参考链接:http://www.bubuko.com/infodetail-690646.ht ...
- Android Multimedia框架总结(六)C++中MediaPlayer的C/S架构
转载请把头部出处链接和尾部二维码一起转载,本文出自: http://blog.csdn.net/hejjunlin/article/details/52435789 前面几节中,都是通过java层调用 ...
- SQL 数据库语言分析总结(三)
这次介绍通过mysql-WorkBench这个工具来管理操作数据库. 创建和删除数据库 1.点击创建数据库按钮 2.选中后右键,出现drop schema一项,这个用来删除. 设置默认数据库 选中右键 ...
- 剑指Offer——回溯算法解迷宫问题(java版)
剑指Offer--回溯算法解迷宫问题(java版) 以一个M×N的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍.设计程序,对任意设定的迷宫,求出从入口到出口的所有通路. 下面我们来详细讲一 ...