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