慕课网高仿微信学习笔记

1.    微信中的点击这种的效果图，

tab1.xml中：

<LinearLayout
android:orientation="horizontal">
<LinearLayout>
        <TextView
               android:text="聊天"/>
</LinearLayout>
<LinearLayout>
        <TextView
               android:text="发现"/>
</LinearLayout>
<LinearLayout>
        <TextView
               android:text="通讯录"/>
</LinearLayout>
 
<ImageView/> à 这个ImageView中的宽度是要在代码中改变的，要改变的宽度和TextView一样
 
</LinearLayout>

2.    res/tabl.xml 这是一个布局文件，res/activity_main.xml这是主界面，则要在主界面中包含tab1.xml界面：<includelayout=”@layout/tab1”>

3.    这部分的使用ViewPager，它可以实现滑动切换，用来切换时的加载不同的Fragment，

有三个Fragment：ChatMainFragment.java 这个是第一个聊天的Fragment，对应的XML文件为：res/tab01.xml；其他两个同第一个。

4.    MainActivity中：ViewPager是android.support.v4.view.ViewPager下的包或者是android.view.ViewPager的包，包要相同。

5.    MainActivity：

private ViewPager mViewPager; à 这个是装Fragment的
private FragemntPagerAdapter mAdapter;à 这个是ViewPager的适配器
eg.mAdapter=new FragmentPagerAdapter(getSupportFragmentManager())
        {
               @Override
               publicint getCount()
               {
                      returnmDatas.size();
               }
 
               @Override
               publicFragment getItem(int arg0)
               {
                      returnmDatas.get(arg0);
               }
        };
privateList<Fragment> mDatas; à 这个是每一个Fragment的类，这些类实例化的对象保存在这里：
eg. ChatMainActivity tab01 = newChatMainActivity();
       mDatas.add(tab01);
 
最後mViewPager.setAdapter(mAdapter);

6.     mViewPager.setOnPageChangeListener(newOnPageChangeListener() 为ViewPager注册事件，

@Override
               publicvoid onPageSelected(int position)
               {
resetTextView();à这是一个自定义函数，为了将三个TextView中的字体全变成黑色
                      switch(position)
                      {
case 0: à当滑动到第一个面板时：
 
                             if(mBadgeView != null)
                             {
                                    mChatLinearLayout.removeView(mBadgeView);
                             }
                             mBadgeView= new BadgeView(MainActivity.this);
                             mBadgeView.setBadgeCount(7);
                             mChatLinearLayout.addView(mBadgeView);
 
mChatTextView.setTextColor(Color.parseColor("#008000"));
                             break;
                      case1:
                             mFriendTextView.setTextColor(Color.parseColor("#008000"));
                             break;
                      case2:
                             mContactTextView.setTextColor(Color.parseColor("#008000"));
                             break;
 
                      }

7.    这个显示聊天数目的需要用到一个BadgeView的效果，这个要在Gitub中下载这个项目然后把这的项目导入到目前项目中，

首先：在本项目中右击找到propertity 中点击Android然后在最后的isLibrary中导入其实就是导入badgeView.jar的包，其中可能与android.support.v4.jar包冲突，所以要删除libs目录下的android.support.v4.jar包

badgeview项目下载路径：https://github.com/stefanjauker/BadgeView

（我实验时的做法：由于试了很久上面的办法没有用，错误为下所以经过找资料等过程后动作如下：

在上面网址下了ZIP包后，找到其中的BadgeView项目，然后将这个项目中BadgeView.java这个文件的包package拷贝到要自己的项目src下，即可使用

但依然没有出现上述效果，如果有人解决了请告之）

 

8.    下面实现那个蓝色的底条纹随滑动而变化位置

它的原理是 ImageView的android.margLeft = “XX.dp”

所以要在代码中动态的将ImageView的margLeft随滑动的距离左边的距离变大

shift+Alt+n 可以将一段代码变成一个方法

其中下面代码的mScreen1_3是手机屏幕的宽度的三分之一

privateint mScreen1_3;
Display display =getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetricsoutMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreen1_3= outMetrics.widthPixels / 3;
        LayoutParamslp = mTabline.getLayoutParams();
        lp.width= mScreen1_3;
        mTabline.setLayoutParams(lp);à mTabline是那个蓝色底线
 
 
 

</pre><pre name="code" class="java">下面是ViewPager的OnPagerChangeListener
监听事件方法：（不知怎么这里总是显示为代码）

/**
			 * 当滑动页面后，此时滑动的动作已经停止，则现在停在滑动后的页面中
			 */
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				MainActivity.this.setTabColor();
				switch (position) {
				case 0:
					if(badgeView!=null)
					{
						mLinearLayout.removeView(badgeView);
					}
					badgeView = new com.jauker.widget.BadgeView(MainActivity.this);
					badgeView.setBadgeCount(4);
					mLinearLayout.addView(badgeView);
					MainActivity.this.chat.setTextColor(Color
							.parseColor("#008000"));
					break;
				case 1:
					if(badgeView!=null)
					{
						mLinearLayout.removeView(badgeView);
					}
					badgeView = new com.jauker.widget.BadgeView(MainActivity.this);
					badgeView.setBadgeCount(4);
					mLinearLayout.addView(badgeView);
					MainActivity.this.record.setTextColor(Color
							.parseColor("#008000"));
					break;
				case 2:
					if(badgeView!=null)
					{
						mLinearLayout.removeView(badgeView);
					}
					badgeView = new com.jauker.widget.BadgeView(MainActivity.this);
					badgeView.setBadgeCount(4);
					mLinearLayout.addView(badgeView);
					MainActivity.this.find.setTextColor(Color
							.parseColor("#008000"));
					break;
				}
				currentPage = position;
			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPx) {
				// TODO Auto-generated method stub

//				System.out.println("position:" + position + " positionOffset:"
//						+ positionOffset + " positionOffsetPx:"
//						+ positionOffsetPx);
				// 取得tabline的位置参数
				LinearLayout.LayoutParams lp = (LayoutParams) tabline
						.getLayoutParams();

				if (currentPage == 0 && position == 0)// 从第一页滑到第二页
				{
					lp.leftMargin = (int) (positionOffset * mScreen + currentPage
							* mScreen);
				} else if (currentPage == 1 && position == 0) {// 从第二页滑到第一页
					lp.leftMargin = (int) (currentPage * mScreen + (positionOffset - 1)
							* mScreen);
				} else if (currentPage == 1 && position == 1)// 从第二页滑动到第三页
				{
					lp.leftMargin = (int) (positionOffset * mScreen + currentPage
							* mScreen);
				} else if (currentPage == 2 && position == 1) {// 从第三页到第二页
					lp.leftMargin = (int) (currentPage * mScreen + (positionOffset - 1)
							* mScreen);
				}
				tabline.setLayoutParams(lp);
			}

由于这里没有办法粘贴图片所以上面的图片就没有了