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

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

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

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

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(0, false);  
8.                         break;  
9.                     case R.id.id_tab_discovery:  
10.                         mViewPager.setCurrentItem(1, false);  
11.                         break;  
12.                     case R.id.id_tab_message:  
13.                         mViewPager.setCurrentItem(2, false);  
14.                         break;  
15.                     case R.id.id_tab_setting:  
16.                         mViewPager.setCurrentItem(3, false);  
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

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

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

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

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

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