慕课网高仿微信学习笔记

来源：互联网发布：esp8266 51单片机例程编辑：程序博客网时间：2024/04/28 05:49

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

tab1.xml中：

<LinearLayoutandroid: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监听事件方法：（不知怎么这里总是显示为代码）

/** * 当滑动页面后，此时滑动的动作已经停止，则现在停在滑动后的页面中 */@Overridepublic void onPageSelected(int position) {// TODO Auto-generated method stubMainActivity.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;}@Overridepublic 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);}

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

0 0