升级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, 终于把想做的事情做了.