一起来搭简单的App框架

时间：2021-11-01 19:11:05

1、概述

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

一起来搭简单的App框架

主要实现了

【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>

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

一起来搭简单的App框架，

不过要注意对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

相关文章