最近在学车，抽着空写了一个常用的app框架，可惜不会制作gif图片，请忽略录屏软件的那个浮动窗口，要是有更好的方式制作gif麻烦告知下提前感谢，效果图如下，凑合着看下吧。
主要实现了
【1】使用radiogroup处理选项卡优化布局
【2】使用toolbar跟侧滑图表联动，效果更好
【3】集合了viewerpager+fragment，drawerlayout+toolbar，optionmenu以及circleimageview处理头像等功能
一般app项目应该可以应付了。下面说下实现
这里使用了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="我的圈子"
/>
android:id="@+id/id_tab_discovery"
android:drawabletop="@drawable/mainpage_tab_discovery"
android:text="发现"/>
android:id="@+id/id_tab_message"
android:drawabletop="@drawable/mainpage_tab_message"
android:text="消息"/>
android:id="@+id/id_tab_setting"
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>
主要是viewpager使用的fragmentpageradapter
<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);
}
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() {
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);
case r.id.id_tab_message:
mviewpager.setcurrentitem(2, false);
case r.id.id_tab_setting:
mviewpager.setcurrentitem(3, false);
default:
}
});
//监听page滑动
mviewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
public void onpageselected(int position) {
//当viewpager滑动的时候
switch (position) {
case 0:
mgroup.check(r.id.id_tab_mycircle);
case 1:
mgroup.check(r.id.id_tab_discovery);
case 2:
mgroup.check(r.id.id_tab_message);
case 3:
mgroup.check(r.id.id_tab_setting);
public void onpagescrollstatechanged(int state) {
drawerlayout使用比较简单，必须把drawerlayout作为布局的跟标签。然后在跟标签中添加一个包含内容的视图，就是当抽屉完全隐藏的时候显示的内容布局，然后 添加的就是抽屉布局，这个布局可以按照需求自己定义，顺序不要搞反了
本例的抽屉布局drawerlayout.xml代码如下
<android.support.v4.widget.drawerlayout
android:id="@+id/id_drawerlayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
<relativelayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:background="@color/white">
<radiogroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
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="我的圈子"
/>
android:id="@+id/id_tab_discovery"
android:drawabletop="@drawable/mainpage_tab_discovery"
android:text="发现"/>
android:id="@+id/id_tab_message"
android:drawabletop="@drawable/mainpage_tab_message"
android:text="消息"/>
android:id="@+id/id_tab_setting"
android:drawabletop="@drawable/mainpage_tab_setting"
android:text="个人中心"
</radiogroup>
<android.support.v4.view.viewpager
android:id="@+id/id_viewpager"
android:layout_above="@id/radiogroup"
>
</android.support.v4.view.viewpager>
</relativelayout>
<linearlayout
android:id="@+id/id_drawer"
android:layout_width="240dp"
android:layout_gravity="start"
android:background="#e0eee0"
android:orientation="vertical">
<com.elvis.utils.circleimageview
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
<imageview
android:src="@drawable/banner_left"
<textview
android:gravity="center"
android:paddingtop="5dp"
android:text="xsfelvis"
android:textsize="15sp"
android:src="@drawable/banner_right"
</linearlayout>
<listview
android:id="@+id/id_lv"
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>
我们可以看出，内容布局在relativelayout中，抽屉布局在linearlayout中，内容布局包含radiogroup，viewpager俩部分，而抽屉布局包含一个circleimageview和一个listview
由于toolbar是继承自view，所以可以像其他标准控件一样直接主布局文件添加toolbar，但是为了提高toolbar的重用效率，可以在layout创建一个custom_toolbar.xml代码如下：
<android.support.v7.widget.toolbar
android:id="@+id/tl_custom"
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>
使用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>
<!--option菜单文字样式-->
<style name="overflowmenutextappearance" parent="@style/textappearance.appcompat.widget.popupmenu.large">
<item name="android:textcolor">@color/overflowtextcolor</item>
从效果图也可以看出，我们在滑动中从横线变为箭头，效果有点炫酷，在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) {
public void ondraweropened(view drawerview) {
super.ondraweropened(drawerview);
toolbar.settitle("侧滑栏");
public void ondrawerclosed(view drawerview) {
super.ondrawerclosed(drawerview);
toolbar.settitle("app framework");
mdrawertoggle.syncstate();
mdrawerlayout.setdrawerlistener(mdrawertoggle);
}
菜单显示出图标，我们需要重新一个方法，使用反射让其显示出来
<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) {
} catch (illegalaccessexception e) {
}
return false;//关闭系统menu按键
最后记得return false 否则你按系统的menu也会从下方出来menu菜单，感觉不是很好看。
转自：http://blog.csdn.net/xsf50717/article/details/49799485