从零开始打造一个新闻订阅APP之Android篇（一、实现仿微信主界面效果）

微信作为面向大众的产品，它的界面一直保持简洁的风格，实现布板的主界面时也参考了很多APP的设计，最终决定采用类似于微信的主界面，即四个tab滑动。

google了一把之后，找到了一款滑动利器PagerSlidingTabStrip。

官网地址：https://github.com/astuetz/PagerSlidingTabStrip

官方效果图如下：



但使用过程中发现想要把滑动tab放到底部更改布局相当麻烦，后来自己思考并结合了guolin大神的一篇介绍Fragment的文章 Android Fragment应用实战，使用碎片向ActivityGroup说再见，终于完美地实现了想要的效果，如下是最终的效果图：



首先新建一个activity_main.xml布局文件，代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools= "http://schemas.android.com/tools"
xmlns:pagerslidingtabstrip="http://schemas.android.com/apk/res-auto"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
android:background= "@color/mainbackground"
android:clipChildren= "false"
android:clipToPadding= "false"
>
<com.astuetz.PagerSlidingTabStrip
android:id= "@+id/mainTabs"
android:layout_width="match_parent"
android:layout_height="10dp"
android:visibility="gone"
/>
<android.support.v4.view.ViewPager
android:id= "@+id/mainPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

<LinearLayout
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clipChildren="false"
android:clipToPadding= "false"
android:background= "@color/mainbackground"
android:baselineAligned= "false"
>
<LinearLayout
android:id= "@+id/onlyYou"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id= "@+id/onlyYouImage"
android:layout_width="25dp"
android:layout_height="25dp"
/>
<TextView
android:id= "@+id/onlyYouText"
android:textSize="10sp"
android:text="@string/onlyyou"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:id= "@+id/guang"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id= "@+id/guangImage"
android:layout_width="25dp"
android:layout_height="25dp"
/>
<TextView
android:id= "@+id/guangText"
android:textSize="10sp"
android:text="@string/guang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:id= "@+id/find"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:id= "@+id/findImage"
android:layout_width="25dp"
android:layout_height="25dp"
/>
<TextView
android:id= "@+id/findText"
android:textSize="10sp"
android:text="@string/find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:id= "@+id/me"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:id= "@+id/meImage"
android:layout_width="25dp"
android:layout_height="25dp"
/>
<TextView
android:id= "@+id/meText"
android:textSize="10sp"
android:text="@string/me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout >
</RelativeLayout>

这段代码中，10-20行是引入PagerSlidingTabStrip+ViewPager用来实现滑动效果，而22-115行就是底部的一行导航Tab。注意这里由于不使用PagerSlidingTabStrip的导航Tab，直接将其visibility设置为gone即可。

接下来新建MainActivity.java文件，在onCreate方法中完成初始化工作：

@Override
protected void onCreate (Bundle savedInstanceState) {
noSelectColorId = getResources().getColor( R. color.noSelectColor );
selectColorId = getResources().getColor( R. color.selectColor );
super.onCreate (savedInstanceState );

setContentView(R .layout.activity_main) ;

//检查版本更新
UpdateManager.update (this);

mViewPager = (ViewPager) findViewById (R.id. mainPager) ;
onMainClickListener = new OnMainClickListener ();
onlyYou = (View) findViewById (R.id. onlyYou) ;
onlyYouText = (TextView) findViewById (R.id. onlyYouText);
onlyYouImage = (ImageView) findViewById(R .id.onlyYouImage) ;
onlyYou. setTag( 0) ;
onlyYou. setOnClickListener(onMainClickListener );
onlyYouText.setTextColor (selectColorId );
guang = (View) findViewById (R.id. guang) ;
guang. setTag( 1) ;
guang. setOnClickListener(onMainClickListener );
guangText = (TextView) findViewById (R.id. guangText) ;
guangImage = (ImageView) findViewById (R.id. guangImage) ;
find = (View) findViewById (R.id. find) ;
find. setTag( 2) ;
find. setOnClickListener(onMainClickListener );
findText = (TextView) findViewById (R.id. findText) ;
findImage = (ImageView) findViewById (R.id. findImage) ;
me = (View) findViewById (R.id. me) ;
me. setTag( 3) ;
me. setOnClickListener(onMainClickListener );
meText = (TextView) findViewById (R.id. meText) ;
meImage = (ImageView) findViewById (R.id. meImage) ;

onlyYouText.setTextColor (selectColorId );
guangText. setTextColor(noSelectColorId );
findText. setTextColor(noSelectColorId );
meText. setTextColor(noSelectColorId );
onlyYouImage.setBackgroundResource (R.drawable. icon_onlyyou_select);
guangImage. setBackgroundResource(R .drawable.icon_guang_no_select) ;
findImage. setBackgroundResource(R .drawable.icon_find_no_select) ;
meImage. setBackgroundResource(R .drawable.icon_me_no_select) ;

}

这里有一个小的细节，由于在顶部导航栏中，我的其中一个Fragment需要加入不同的按钮，本以为是个非常简单的事情，后来发现这是一个大坑，在stackoverflow上有一个专门的讨论，但貌似实现起来都非常麻烦。目前程序必须限制只能竖屏，否则在横竖屏切换时会崩溃，这个后续有机会再介绍，这里不是重点。

还是由于顶部导航栏的原因，初始化viewPager工作放在了onCreateOptionsMenu 中，

@Override
public boolean onCreateOptionsMenu (Menu menu ) {
MenuInflater inflater = getMenuInflater();
inflater. inflate( R. menu.main , menu) ;
switchTypeItem = menu .getItem (0 );
adapter = new MainAdapter(getSupportFragmentManager ());
mViewPager. setAdapter( adapter) ;
mViewPager. setOffscreenPageLimit(4);
mViewPager. setOnPageChangeListener(new MyOnPageChangeListener());
if( personLoaclInfoManager.getUserInfo (). getIsLogin() != 1){
mViewPager. setCurrentItem(1);
}else{
mViewPager. setCurrentItem(0);
}
return super .onCreateOptionsMenu (menu );
}

Tips：

adapter = new MainAdapter (getSupportFragmentManager ());

mViewPager. setAdapter( adapter) ;//这两行设置viewPager的Fragment管理

mViewPager. setOffscreenPageLimit (4);//用来设置缓存view 的个数

mViewPager. setCurrentItem (1);//设置当前显示第几页，从0开始；

mViewPager. setOnPageChangeListener (new MyOnPageChangeListener ());//设置page切换时的监听事件；

MainAdapter很简单，只需要继承FragmentPagerAdapter，初始化Fragment，然后重载getItem(int position)，指定每页对应的Fragment即可；

class MainAdapter extends FragmentPagerAdapter {

private CharSequence [] mTitles;

private int COUNT = 4 ;

public MainAdapter (FragmentManager fm) {
super(fm);
mTitles = getResources().getStringArray( R. array.main_bottom_array );
onlyYouFragment = new OnlyYouFragment(switchTypeItem , MainActivity.this );
guangFragment = new GuangFragment ();
findFragment = new FindFragment ();
mefragment = new MeFragment() ;
}

// ViewPager中显示的内容
@Override
public Fragment getItem(int position) {
switch(position ){
case 0:
return onlyYouFragment ;
case 1:
return guangFragment ;
case 2:
return findFragment ;
default :
return mefragment ;
}
}

// Title中显示的内容
@Override
public CharSequence getPageTitle(int position) {
return mTitles [position ];
}

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

}

等等，微信滑动时，每个tab颜色都会变化，当前页标签会变亮，其它则变暗。这里由于没有用PagerSlidingTabStrip自带的导航tab，所以我们需要自己监听页面变化，并改变相应底部tab颜色，具体监听事件代码如下：

class MyOnPageChangeListener implements OnPageChangeListener{

@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}

@Override
public void onPageSelected(int position) {
onlyYouText.setTextColor (noSelectColorId );
guangText. setTextColor(noSelectColorId );
findText. setTextColor(noSelectColorId );
meText. setTextColor(noSelectColorId );
onlyYouImage.setBackgroundResource (R.drawable. icon_onlyyou_no_select);
guangImage. setBackgroundResource(R .drawable.icon_guang_no_select) ;
findImage. setBackgroundResource(R .drawable.icon_find_no_select) ;
meImage. setBackgroundResource(R .drawable.icon_me_no_select) ;
switch(position ){
case 0:
onlyYouText.setTextColor (selectColorId );
onlyYouImage.setBackgroundResource (R.drawable. icon_onlyyou_select);
switchTypeItem.setVisible (true);
switchTypeItem.setEnabled (true);
onlyYouFragment.refreshView ();
break;
case 1:
guangText. setTextColor(selectColorId );
guangImage. setBackgroundResource(R .drawable.icon_guang_select) ;
switchTypeItem.setVisible (false);
switchTypeItem.setEnabled (false);
break;
case 2:
findText. setTextColor(selectColorId );
findImage. setBackgroundResource(R .drawable.icon_find_select) ;
switchTypeItem.setVisible (false);
switchTypeItem.setEnabled (false);
break;
case 3:
meText. setTextColor(selectColorId );
meImage. setBackgroundResource(R .drawable.icon_me_select) ;
switchTypeItem.setVisible (false);
switchTypeItem.setEnabled (false);
break;
}
}

@Override
public void onPageScrollStateChanged(int state) {

}
}

在onPageSelected(int position)中，改变对于tab的颜色。

同时，点击每个tab也要相应切换到对应Fragment

class OnMainClickListener implements OnClickListener{

@Override
public void onClick(View v) {
switch((Integer )v .getTag ()){
case 0:
mViewPager. setCurrentItem(0);
break;
case 1:
mViewPager. setCurrentItem(1);
break;
case 2:
mViewPager. setCurrentItem(2);
break;
case 3:
mViewPager. setCurrentItem(3);
break;
default:
mViewPager. setCurrentItem(0);
}

}

}

有兴趣的同学也可以去豌豆荚搜索“布板”或扫描二维码下载android的demo版试用看看，欢迎大家一起讨论。