升级CompileSdk和重构主页

计步器的编译SDK版本比较低, 今天升级了最新版本-23, 出来了很多问题, 并且都解决了, 又简单地重构了主页. 让我们来看看吧, 给想用新特性的工程做一些参考.

1. 升级CompileSdk

升级SDK之后, Apache的Http库被遗弃了, 需要使用Library重新引入.

    compileSdkVersion 23
    buildToolsVersion '23.0.1'
    ...
    dependencies {
        compile 'com.android.support:appcompat-v7:23.1.0'
        compile 'com.android.support:design:23.1.0'
   }

引入

useLibrary 'org.apache.http.legacy'

需要同时升级gradle版本1.3.1

classpath 'com.android.tools.build:gradle:1.3.1'

顺便解决了Lambda表达proguard警告的问题, 参考.

以后在添加第三方库时, 一定要注意配合Proguard, 添加相应的设置.

升级以后, 项目使用ActionBar全部都无法全部显示了, 前后各有一处留白. 原因是新版本对ActionBar添加了额外属性, 控制边界, 需要设置AppBar的Styles.

    <style name="CYActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        ...
        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

contentInset分别表示前后的留白, 设置0dp则可以避免.

推荐Picasso, 非常好用的下载库, 还有Git管理软件SourceTree.

2. 重构主页

主页以前写法是在ActionBar中, 添加多个按钮, 监听按钮点击, 替换Fragment.
这次使用TabLayout+ViewPager的架构, 更好地交互效果.

界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  android:id="@+id/pedometer_fragment_content" 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" android:background="@android:color/transparent" android:orientation="vertical">

    <LinearLayout  android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/actionbar_background" android:baselineAligned="false" android:gravity="center" android:orientation="horizontal">

        <android.support.design.widget.TabLayout  android:id="@+id/main_tl_tab_bar" android:layout_width="0dp" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="@android:color/transparent" app:tabIndicatorColor="@android:color/transparent" app:tabMode="scrollable"/>

        <LinearLayout  android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:gravity="center">

            <de.hdodenhof.circleimageview.CircleImageView  android:id="@+id/main_piv_portrait" android:layout_width="@dimen/d28dp" android:layout_height="@dimen/d28dp" android:background="@android:color/transparent" android:scaleType="centerCrop" android:src="@drawable/tab_portrait" app:border_color="@color/gray" app:border_width="@dimen/d1dp"/>

        </LinearLayout>

    </LinearLayout>

    <View  android:layout_width="match_parent" android:layout_height="@dimen/d0.5dp" android:background="@color/gray_line"/>

    <android.support.v4.view.ViewPager  android:id="@+id/main_vp_container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>

TabLayout的tabMode="scrollable"属性, 使Tab全部靠近左侧;
tabIndicatorColor="@android:color/transparent"游标颜色透明, 即隐藏.

ViewPager的Adapter逻辑.

/** * 首页ViewPager的Adapter * <p> * Created by wangchenlong on 15/11/10. */
public class MainPageAdapter extends FragmentPagerAdapter {

    private static final int PAGE_NUM = 3;

    private PedometerFunctionFragment mFunctionFragment; // 核心功能页面
    private CompetitionFragment mCompetitionFragment; // 好友竞赛页面
    private CenterFragment mCenterFragment; // 数据中心页面

    public MainPageAdapter(FragmentManager fm) {
        super(fm);

        mFunctionFragment = new PedometerFunctionFragment();
        mCompetitionFragment = new CompetitionFragment();
        mCenterFragment = new CenterFragment();
    }

    @Override public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return mFunctionFragment;
            case 1:
                return mCompetitionFragment;
            case 2:
                return mCenterFragment;
        }
        return null;
    }

    @Override public int getCount() {
        return PAGE_NUM;
    }
}

首页逻辑, 根据Tab依次添加图片.

    @DrawableRes
    private static final int TAB_IMAGES[] = {
            R.drawable.tab_counter,
            R.drawable.tab_contest,
            R.drawable.tab_center
    };
...
        MainPageAdapter adapter = new MainPageAdapter(getSupportFragmentManager());
        mVpContainer.setAdapter(adapter);
        mTlTabBar.setupWithViewPager(mVpContainer);
        for (int i = 0; i < mTlTabBar.getTabCount(); i++) {
            TabLayout.Tab tab = mTlTabBar.getTabAt(i);
            if (tab != null) {
                tab.setIcon(TAB_IMAGES[i]);
            }
        }

注意图片资源, 根据选择状态切换颜色, 红(选中)->灰(未选中).

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_counter_light" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_counter_gray" android:state_selected="false"/>
</selector>

效果

OK, 终于把想做的事情做了.