一起来搭简单的App框架-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

一起来搭简单的App框架

简介:

1、概述

最近在学车,抽着空写了一个常用的App框架,可惜不会制作gif图片,请忽略录屏软件的那个浮动窗口,要是有更好的方式制作gif麻烦告知下提前感谢,效果图如下,凑合着看下吧。


主要实现了

【1】使用RadioGroup处理选项卡优化布局
【2】使用ToolBar跟侧滑图表联动,效果更好
【3】集合了viewerPager+fragment,drawerlayout+toolbar,optionmenu以及circleImageView处理头像等功能

一般app项目应该可以应付了。下面说下实现


2、选项卡按钮

这里使用了RadioGroup,以前用的是多层linearlayout结合weight属性,再使用ImageView和TextView感觉有点过度绘制,这里做了优化采用RadioGroup

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.     android:id="@+id/bottom"  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent">  
  7.   
  8.     <RadioGroup  
  9.   
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_alignParentBottom="true"  
  13.         android:background="@color/mainpage_mycrircle_leftview_item_auth_name"  
  14.         android:orientation="horizontal">  
  15.   
  16.         <RadioButton  
  17.             android:id="@+id/id_tab_mycircle"  
  18.             style="@style/style_RadioButton"  
  19.             android:layout_width="wrap_content"  
  20.             android:layout_height="wrap_content"  
  21.             android:checked="true"  
  22.             android:drawableTop="@drawable/mainpage_tab_mycircle"  
  23.             android:text="我的圈子"  
  24.             />  
  25.   
  26.         <RadioButton  
  27.             android:id="@+id/id_tab_discovery"  
  28.             style="@style/style_RadioButton"  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:checked="true"  
  32.             android:drawableTop="@drawable/mainpage_tab_discovery"  
  33.             android:text="发现"/>  
  34.   
  35.         <RadioButton  
  36.             android:id="@+id/id_tab_message"  
  37.             style="@style/style_RadioButton"  
  38.             android:layout_width="wrap_content"  
  39.             android:layout_height="wrap_content"  
  40.             android:checked="true"  
  41.             android:drawableTop="@drawable/mainpage_tab_message"  
  42.             android:text="消息"/>  
  43.   
  44.         <RadioButton  
  45.             android:id="@+id/id_tab_setting"  
  46.             style="@style/style_RadioButton"  
  47.             android:layout_width="wrap_content"  
  48.             android:layout_height="wrap_content"  
  49.             android:checked="true"  
  50.             android:drawableTop="@drawable/mainpage_tab_setting"  
  51.             android:text="个人中心"  
  52.             />  
  53.   
  54.     </RadioGroup>  
  55.   
  56.   
  57. </RelativeLayout>  
  58. </span>  

出来的效果是这样的感觉还可以,布局也很简单

不过要注意对radioButton的style做一番更改换掉原来的属性 styles.xml中

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><style name="style_RadioButton">  
  2.         <item name="android:button">@null</item>  
  3.         <item name="android:background">@null</item>  
  4.         <item name="android:layout_weight">0.25</item>  
  5.         <item name="android:gravity">center</item>  
  6.         <item name="android:textColor">@color/gray</item>  
  7.         <item name="android:textSize">12sp</item>  
  8.     </style></span>  



3、ViewPager+fragment实现选项卡内容区域

主要是viewPager使用的FragmentPagerAdapter 
如何使用ViewPager和他的三种适配器请参考我的上一篇博客http://blog.csdn.net/xsf50717/article/details/49764521 这里就不在详细讲了,看一下核心代码

首先我们需要4个fragment对应4个选项卡,然后在viewPager中管理这4个,核心代码在MainActivity.Java

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">private void initViewPages() {  
  2.         //初始化四个布局  
  3.         Fragment01 tab01 = new Fragment01();  
  4.         Fragment02 tab02 = new Fragment02();  
  5.         Fragment03 tab03 = new Fragment03();  
  6.         Fragment04 tab04 = new Fragment04();  
  7.         mFragments.add(tab01);  
  8.         mFragments.add(tab02);  
  9.         mFragments.add(tab03);  
  10.         mFragments.add(tab04);  
  11.         //初始化Adapter这里使用FragmentPagerAdapter  
  12.         mAdpter = new FragmentPagerAdapter(getSupportFragmentManager()) {  
  13.             @Override  
  14.             public Fragment getItem(int position) {  
  15.   
  16.                 return mFragments.get(position);  
  17.             }  
  18.   
  19.             @Override  
  20.             public int getCount() {  
  21.                 return mFragments.size();  
  22.             }  
  23.   
  24.   
  25.         };  
  26.         mViewPager.setAdapter(mAdpter);  
  27.   
  28.     }</span>  

然后逻辑处理在MainActivity的initEvent()中,对RadioGroup和Viewpager滑动监听

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"//监听RadioGroup  
  2.         mGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
  3.             @Override  
  4.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
  5.                 switch (checkedId) {  
  6.                     case R.id.id_tab_mycircle:  
  7.                         mViewPager.setCurrentItem(0false);  
  8.                         break;  
  9.                     case R.id.id_tab_discovery:  
  10.                         mViewPager.setCurrentItem(1false);  
  11.                         break;  
  12.                     case R.id.id_tab_message:  
  13.                         mViewPager.setCurrentItem(2false);  
  14.                         break;  
  15.                     case R.id.id_tab_setting:  
  16.                         mViewPager.setCurrentItem(3false);  
  17.                         break;  
  18.                     default:  
  19.                         break;  
  20.                 }  
  21.             }  
  22.         });  
  23.         //监听Page滑动  
  24.         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
  25.             @Override  
  26.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  27.   
  28.             }  
  29.   
  30.             @Override  
  31.             public void onPageSelected(int position) {  
  32.                 //当viewPager滑动的时候  
  33.                 switch (position) {  
  34.                     case 0:  
  35.                         mGroup.check(R.id.id_tab_mycircle);  
  36.                         break;  
  37.                     case 1:  
  38.                         mGroup.check(R.id.id_tab_discovery);  
  39.                         break;  
  40.                     case 2:  
  41.                         mGroup.check(R.id.id_tab_message);  
  42.                         break;  
  43.                     case 3:  
  44.                         mGroup.check(R.id.id_tab_setting);  
  45.                         break;  
  46.                     default:  
  47.                         break;  
  48.                 }  
  49.   
  50.             }  
  51.   
  52.             @Override  
  53.             public void onPageScrollStateChanged(int state) {  
  54.   
  55.             }  
  56.         });  
  57. </span>  

4、侧滑联动

这里使用了谷歌官方的的DrawerLayout(support V4包)+ToolBar(support V7包)方式,需要在Android stuido中实现导入这俩个库,一般V7库默认就存在了

4.1、DrawerLayout的使用

DrawerLayout使用比较简单,必须把DrawerLayout作为布局的跟标签。然后在跟标签中添加一个包含内容的视图,就是当抽屉完全隐藏的时候显示的内容布局,然后 添加的就是抽屉布局,这个布局可以按照需求自己定义,顺序不要搞反了

本例的抽屉布局drawerlayout.xml代码如下

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v4.widget.DrawerLayout  
  3.     android:id="@+id/id_drawerlayout"  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent">  
  8.   
  9.     <RelativeLayout  
  10.         xmlns:android="http://schemas.android.com/apk/res/android"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="match_parent"  
  13.         android:background="@color/white">  
  14.   
  15.   
  16.         <RadioGroup  
  17.             android:id="@+id/radioGroup"  
  18.             android:layout_width="match_parent"  
  19.             android:layout_height="wrap_content"  
  20.             android:layout_alignParentBottom="true"  
  21.             android:background="@color/mainpage_mycrircle_leftview_item_auth_name"  
  22.             android:orientation="horizontal">  
  23.   
  24.             <RadioButton  
  25.                 android:id="@+id/id_tab_mycircle"  
  26.                 style="@style/style_RadioButton"  
  27.                 android:layout_width="wrap_content"  
  28.                 android:layout_height="wrap_content"  
  29.                 android:checked="true"  
  30.                 android:drawableTop="@drawable/mainpage_tab_mycircle"  
  31.                 android:text="我的圈子"  
  32.                 />  
  33.   
  34.             <RadioButton  
  35.                 android:id="@+id/id_tab_discovery"  
  36.                 style="@style/style_RadioButton"  
  37.                 android:layout_width="wrap_content"  
  38.                 android:layout_height="wrap_content"  
  39.   
  40.                 android:drawableTop="@drawable/mainpage_tab_discovery"  
  41.                 android:text="发现"/>  
  42.   
  43.             <RadioButton  
  44.                 android:id="@+id/id_tab_message"  
  45.                 style="@style/style_RadioButton"  
  46.                 android:layout_width="wrap_content"  
  47.                 android:layout_height="wrap_content"  
  48.   
  49.                 android:drawableTop="@drawable/mainpage_tab_message"  
  50.                 android:text="消息"/>  
  51.   
  52.             <RadioButton  
  53.                 android:id="@+id/id_tab_setting"  
  54.                 style="@style/style_RadioButton"  
  55.                 android:layout_width="wrap_content"  
  56.                 android:layout_height="wrap_content"  
  57.   
  58.                 android:drawableTop="@drawable/mainpage_tab_setting"  
  59.                 android:text="个人中心"  
  60.                 />  
  61.   
  62.         </RadioGroup>  
  63.   
  64.         <android.support.v4.view.ViewPager  
  65.             android:id="@+id/id_viewpager"  
  66.             android:layout_width="wrap_content"  
  67.             android:layout_height="wrap_content"  
  68.             android:layout_above="@id/radioGroup"  
  69.             >  
  70.         </android.support.v4.view.ViewPager>  
  71.   
  72.   
  73.     </RelativeLayout>  
  74.   
  75.     <LinearLayout  
  76.         android:id="@+id/id_drawer"  
  77.         android:layout_width="240dp"  
  78.         android:layout_height="match_parent"  
  79.         android:layout_gravity="start"  
  80.         android:background="#E0EEE0"  
  81.         android:orientation="vertical">  
  82.   
  83.         <com.elvis.utils.CircleImageView  
  84.             android:layout_width="wrap_content"  
  85.             android:layout_height="wrap_content"  
  86.             android:layout_gravity="center"  
  87.             android:layout_marginTop="10dp"  
  88.             android:src="@drawable/xsfelvis"  
  89.             app:border_color="@color/page_item_black_50"  
  90.             app:border_width="2dp"  
  91.             />  
  92.   
  93.         <LinearLayout  
  94.             android:layout_width="wrap_content"  
  95.             android:layout_height="wrap_content"  
  96.             android:layout_gravity="center"  
  97.             android:orientation="horizontal">  
  98.   
  99.             <ImageView  
  100.                 android:layout_width="wrap_content"  
  101.                 android:layout_height="wrap_content"  
  102.                 android:src="@drawable/banner_left"  
  103.                 />  
  104.   
  105.             <TextView  
  106.                 android:layout_width="wrap_content"  
  107.                 android:layout_height="wrap_content"  
  108.                 android:gravity="center"  
  109.                 android:paddingTop="5dp"  
  110.                 android:text="xsfelvis"  
  111.                 android:textSize="15sp"  
  112.   
  113.   
  114.                 />  
  115.   
  116.             <ImageView  
  117.                 android:layout_width="wrap_content"  
  118.                 android:layout_height="wrap_content"  
  119.                 android:src="@drawable/banner_right"  
  120.                 />  
  121.   
  122.         </LinearLayout>  
  123.   
  124.         <ListView  
  125.             android:id="@+id/id_lv"  
  126.             android:layout_width="wrap_content"  
  127.             android:layout_height="wrap_content"  
  128.             android:layout_marginTop="20dp"  
  129.             android:cacheColorHint="#00000000"  
  130.             android:footerDividersEnabled="false"  
  131.             android:gravity="center"  
  132.             android:listSelector="@android:color/transparent">  
  133.         </ListView>  
  134.     </LinearLayout>  
  135. </android.support.v4.widget.DrawerLayout>  
  136. </span>  


我们可以看出,内容布局在RelativeLayout中,抽屉布局在LinearLayout中,内容布局包含radiogroup,viewpager俩部分,而抽屉布局包含一个CircleImageView和一个listview


4.2 ToolBar的使用

由于Toolbar是继承自View,所以可以像其他标准控件一样直接主布局文件添加Toolbar,但是为了提高Toolbar的重用效率,可以在layout创建一个custom_toolbar.xml代码如下:

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v7.widget.Toolbar  
  3.     android:id="@+id/tl_custom"  
  4.   
  5.     xmlns:android="http://schemas.android.com/apk/res/android"  
  6.   
  7.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  8.     android:layout_width="match_parent"  
  9.     android:layout_height="wrap_content"  
  10.     android:background="?attr/colorPrimaryDark"  
  11.     android:fitsSystemWindows="true"  
  12.     android:minHeight="?attr/actionBarSize"  
  13.     android:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
  14.     app:theme="@style/ThemeOverlay.AppCompat.ActionBar">  
  15. </android.support.v7.widget.Toolbar>  
  16. </span>  
使用Toolbar一定要将styles中apptheme重新设置styles.xml

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">   <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  2.         <!-- 状态栏和标题栏颜色-->  
  3.         <!--<item name="colorPrimary">@color/colorPrimary</item>  
  4.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>-->  
  5.         <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>  
  6.         <!--Toolbar颜色-->  
  7.         <item name="colorPrimary">@color/Indigo_colorPrimary</item>  
  8.   
  9.         <!-- 标题颜色-->  
  10.         <item name="android:textColorPrimary">@android:color/white</item>  
  11.         <!-- 溢出菜单图标颜色-->  
  12.         <item name="colorControlNormal">@android:color/white</item>  
  13.   
  14.         <!-- 箭头 -->  
  15.         <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>  
  16.         <!-- 溢出菜单文字颜色-->  
  17.         <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>  
  18.         <!-- 菜单项点击selector-->  
  19.         <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item>  
  20.   
  21.     </style>  
  22.     <!-- 左边的箭头指示-->  
  23.     <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">  
  24.         <item name="spinBars">true</item>  
  25.         <item name="color">@android:color/white</item>  
  26.     </style>  
  27.   
  28.     <!--option菜单文字样式-->  
  29.     <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">  
  30.         <item name="android:textColor">@color/overflowTextColor</item>  
  31.     </style>  
  32. </span>  




4.3、DrawerLayout与Toolbar联动

从效果图也可以看出,我们在滑动中从横线变为箭头,效果有点炫酷,在MainActivity.java中initEvent()中

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">  //ToolBar  
  2.   
  3.         toolbar.setTitle("APP FrameWork");//设置Toolbar标题  
  4.         toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //设置标题颜色  
  5.   
  6.         setSupportActionBar(toolbar);  
  7.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
  8.         getSupportActionBar().setHomeButtonEnabled(true);  
  9.   
  10.         mDrawerToggle = new ActionBarDrawerToggle(this,  
  11.                 mDrawerLayout,  
  12.                 toolbar,  
  13.                 R.string.drawopen,  
  14.                 R.string.drawclose) {  
  15.             @Override  
  16.             public void onDrawerOpened(View drawerView) {  
  17.                 super.onDrawerOpened(drawerView);  
  18.                 toolbar.setTitle("侧滑栏");  
  19.   
  20.             }  
  21.   
  22.             @Override  
  23.             public void onDrawerClosed(View drawerView) {  
  24.                 super.onDrawerClosed(drawerView);  
  25.                 toolbar.setTitle("APP FrameWork");  
  26.             }  
  27.   
  28.   
  29.         };  
  30.         mDrawerToggle.syncState();  
  31.         mDrawerLayout.setDrawerListener(mDrawerToggle);  
  32.   
  33.   
  34.     }  
  35. </span>  

5、optionMeun设置

菜单显示出图标,我们需要重新一个方法,使用反射让其显示出来


[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:18px;">    @Override  
  2.     public boolean onMenuOpened(int featureId, Menu menu) {  
  3.         if (menu != null) {  
  4.             if (menu.getClass().getSimpleName().equals("MenuBuilder")) {  
  5.   
  6.                 try {  
  7.                     Method m = menu.getClass().getDeclaredMethod(  
  8.                             "setOptionalIconsVisible", Boolean.TYPE);  
  9.                     m.setAccessible(true);  
  10.                     m.invoke(menu, true);  
  11.                 } catch (NoSuchMethodException e) {  
  12.                     e.printStackTrace();  
  13.                 } catch (InvocationTargetException e) {  
  14.                     e.printStackTrace();  
  15.                 } catch (IllegalAccessException e) {  
  16.                     e.printStackTrace();  
  17.                 }  
  18.   
  19.             }  
  20.         }  
  21.   
  22.         return false;//关闭系统menu按键  
  23.     }  
  24. </span>  

最后记得return false 否则你按系统的menu也会从下方出来menu菜单,感觉不是很好看。


到此结束,源码在github上,有用的话就点个赞吧~https://github.com/xsfelvis/AppFrameWork


转自:http://blog.csdn.net/xsf50717/article/details/49799485

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: