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