仿微信5.4新版主界面

     今天是2014年10月12日，据微信5.4新版推出已过不少时间，我一直在上网搜索微信新版主界面的制作方法，但却一直找不到。只好硬着头皮，自己尝试写一个出来吧。

   先说说实现思路，第一次下载5.4的微信，就在思索其中的细节，同事说是有好多好多张不同颜色值的图片，当滑动时不断刷新。我当时就觉得肯定不是这样实现的，因为无论从代码复杂度还是APP性能来考虑，这都是不理想的。

   我回去思考了一下，可以考虑将图片中间挖空，然后用canvas的draw方法实现画绿色。但事实上当这样实现时，效果还是差强人意。

   于是我打开微信apk，查看其中的图片，发现其实每张图片只有两张。

   我如梦初醒，只要把两张图片叠加在一起，用设置透明度setalpha的方法来控制上层绿色图片的显示，就OK了。思路理清，马上动手实践。

    一开始胸怀壮志，想像Github那些大神一样自己写个tabindicator继承自HorizontalScrollView类，结果星期六从早上到下午写了8个小时直接吐血，功力不够，用纯代码动态生成控件实在是太繁琐。于是我还是先用xml写好布局，再来实现吧。

    项目下载地址：http://download.csdn.net/detail/moneydie/8028713

   mainactivity的布局activity_main.xml代码如下：

<span style="font-size:18px;"><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <View        android:layout_width="match_parent"        android:layout_height="0.3dp"        android:layout_alignTop="@+id/ll_tabsContainer"        android:background="@color/gray" />    <include layout="@layout/tabindicator"        android:id="@+id/ll_tabsContainer"/></RelativeLayout></span>

    底部滑动条布局：tabindicator的布局代码如下： 

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/ll_tabsContainer"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:baselineAligned="false"    android:paddingBottom="5dp"    android:paddingTop="4dp" >    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afj" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="微信"                android:textSize="12sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_indicator_1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:alpha="0"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afi" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="微信"                android:textColor="@color/green"                android:textSize="12sp" />        </LinearLayout>    </FrameLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afh" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="通讯录"                android:textSize="12sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_indicator_2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:alpha="0"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afg" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="通讯录"                android:textColor="@color/green"                android:textSize="12sp" />        </LinearLayout>    </FrameLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:id="@+id/iv_bottom_3"                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afl" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="发现"                android:textSize="12sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_indicator_3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:alpha="0"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afk" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="发现"                android:textColor="@color/green"                android:textSize="12sp" />        </LinearLayout>    </FrameLayout>    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afn" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="我"                android:textSize="12sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/ll_indicator_4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:alpha="0"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:layout_width="30dp"                android:layout_height="30dp"                android:src="@drawable/afm" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="我"                android:textColor="@color/green"                android:textSize="12sp" />        </LinearLayout>    </FrameLayout>

        mainactivity的代码：

public class MainActivity extends FragmentActivity {private ViewPager pager;private MyPagerAdapter pagerAdapter;private ArrayList<LinearLayout> indicators =new ArrayList<LinearLayout>();private ArrayList<Fragment> fragments =new ArrayList<Fragment>();private ImageView bottomImage_3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initUI();initData();}private void initUI() {pager = (ViewPager) findViewById(R.id.pager);pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());pager.setAdapter(pagerAdapter);bottomImage_3 = (ImageView) findViewById(R.id.iv_bottom_3);//初始化linearlayoutindicators.add((LinearLayout)findViewById(R.id.ll_indicator_1));indicators.add((LinearLayout)findViewById(R.id.ll_indicator_2));indicators.add((LinearLayout)findViewById(R.id.ll_indicator_3));indicators.add((LinearLayout)findViewById(R.id.ll_indicator_4));}private void initData() {pager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {}//核心代码，在页面滑动时控制上层图片的透明度@Overridepublic void onPageScrolled(int position, float offset, int arg2) {if(position < 3){if(position == 2){bottomImage_3.setAlpha(offset);}else if(position == 1){bottomImage_3.setAlpha(1f - offset);}indicators.get(position).setAlpha(1f - offset);indicators.get(position + 1).setAlpha(offset);}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});}private class MyPagerAdapter extends FragmentPagerAdapter{private String[] titles = {"微信","通讯录","发现","我"};public MyPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic int getCount() {return titles.length;}@Overridepublic Fragment getItem(int position) {//初始化fragmentsfragments.add(new WeiChat());fragments.add(new Contact());fragments.add(new Find());fragments.add(new Me());return fragments.get(position);}}

    解释一下，就是默认上层绿色页面的alpha值为0，即透明，当页面滑动时，将其alpha值设为随滑动距离而改变。其实第三张图片，即“发现”，当其滑动时还会将底层的灰色图片设为透明，而方向与其它绿色图层相反。
    由于这是我第一次写博客，格式不熟悉，加上自己水平有限，写得不好。如有问题，欢迎一起交流。
    效果还行，还有许多要完善的地方，HorizontalScrollView类是要继承的，独立的tabindicator类是要写的。AVD突然出问题不能用，不能做个gif放上来看，用了大学4年的笔记本卡得飞起，还没钱换。赶紧享受所剩不多的周末，如果有人感兴趣，我下周再做个尽善尽美的版本，这次只是实现了大概的想法，剩下的一些工作，如点击事件，actionbar制作网上都有好多优秀的例子。