logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Android 仿QQ主页面的实

 arm_embed 2012-11-14

Android 仿QQ主页面的实

分类： Android 2012-11-11 20:45 1571人阅读 评论(26) 收藏 举报

  这一节讲一下QQ主页面的实现，先看一下官方效果图：


其中的好友，群组等既可以点击切换也卡，也可以滑动切换。所以，在实现的时候要同时使用两个手段。“会话”，“好友”等可以用Button来写，也可以是RadioButton，还可以是TextView,方法很多，在这里我选择了用TextView来做。而且这里的TextView要支持颜色的切换，默认一个暗白色，页卡停留在那是白色。总体来说还是比较简单的，下面看一下xml布局文件：

[html] view plaincopy?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas./apk/res/android"  
  3.     xmlns:tools="http://schemas./tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MainQQActivity" >  
  8.   
  9.     <RelativeLayout  
  10.         android:id="@+id/headlayout"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:background="@drawable/chat_bottom_send_pressed" >  
  14.   
  15.         <ImageView  
  16.             android:id="@+id/stateimage"  
  17.             android:layout_width="13dp"  
  18.             android:layout_height="13dp"  
  19.             android:layout_toRightOf="@+id/nametext"  
  20.             android:layout_marginLeft="10dp"  
  21.             android:layout_centerInParent="true"  
  22.             android:contentDescription="wq"  
  23.             android:src="@drawable/onlinestatus_online" />  
  24.   
  25.         <ImageView  
  26.             android:id="@+id/faceimage"  
  27.             android:layout_width="40dp"  
  28.             android:layout_height="40dp"  
  29.             android:layout_marginLeft="6dp"  
  30.             android:layout_marginTop="10dp"  
  31.             android:layout_alignParentLeft="true"  
  32.             android:layout_centerVertical="true"  
  33.             android:src="@drawable/qq" />  
  34.   
  35.         <TextView  
  36.             android:id="@+id/nametext"  
  37.             android:layout_width="wrap_content"  
  38.             android:layout_height="wrap_content"  
  39.             android:layout_centerVertical="true"  
  40.             android:layout_marginLeft="14dp"  
  41.             android:layout_toRightOf="@+id/faceimage"  
  42.             android:text="JY"  
  43.             android:textColor="@color/color_bai"  
  44.             android:textSize="18dp" />  
  45.     </RelativeLayout>//这个Layout是最上面的头像，名称以及状态的布局。当然，也可以用LinearLayout来做。  
  46.   
  47.     <LinearLayout   
  48.         android:layout_width="match_parent"  
  49.         android:layout_height="wrap_content"  
  50.         android:background="@drawable/login_moremenu_back"  
  51.         android:orientation="vertical"  
  52.         >  
  53.     <LinearLayout//这个LinearLayout用来显示四个标题  
  54.         android:id="@+id/bodylayout"  
  55.         android:layout_width="match_parent"  
  56.         android:layout_height="wrap_content"  
  57.         android:background="@drawable/login_moremenu_back"  
  58.         android:orientation="horizontal" >  
  59.   
  60.         <TextView  
  61.             android:id="@+id/speaktext"  
  62.             android:layout_width="wrap_content"  
  63.             android:layout_height="wrap_content"  
  64.             android:layout_marginBottom="5dp"  
  65.             android:layout_marginTop="5dp"  
  66.             android:layout_weight="1"  
  67.             android:gravity="center"  
  68.             android:text="会话"  
  69.             android:textColor="@drawable/text_color"  
  70.             android:textSize="18dp" />  
  71.   
  72.         <TextView  
  73.             android:id="@+id/fridenttext"  
  74.             android:layout_width="wrap_content"  
  75.             android:layout_height="wrap_content"  
  76.             android:layout_marginBottom="5dp"  
  77.             android:layout_marginTop="5dp"  
  78.             android:layout_weight="1"  
  79.             android:gravity="center"  
  80.             android:text="好友"  
  81.             android:textColor="@drawable/text_color"  
  82.             android:textSize="18dp" />  
  83.   
  84.         <TextView  
  85.             android:id="@+id/grouptext"  
  86.             android:layout_width="wrap_content"  
  87.             android:layout_height="wrap_content"  
  88.             android:layout_marginBottom="5dp"  
  89.             android:layout_marginTop="5dp"  
  90.             android:layout_weight="1"  
  91.             android:gravity="center"  
  92.             android:text="群组"  
  93.             android:textColor="@drawable/text_color"  
  94.             android:textSize="18dp" />  
  95.   
  96.         <TextView  
  97.             android:id="@+id/changetext"  
  98.             android:layout_width="wrap_content"  
  99.             android:layout_height="wrap_content"  
  100.             android:layout_marginBottom="5dp"  
  101.             android:layout_marginTop="5dp"  
  102.             android:layout_weight="1"  
  103.             android:gravity="center"  
  104.             android:text="动态"  
  105.             android:textColor="@drawable/text_color"  
  106.             android:textSize="18dp" />  
  107.     </LinearLayout>  
  108.       
  109.     <ImageView//这个就是下面的横杠图片  
  110.         android:id="@+id/cursor"  
  111.         android:layout_width="50dp"  
  112.         android:layout_height="6dp"  
  113.         android:layout_marginLeft="15dp"  
  114.         android:src="@drawable/meitu" />  
  115.       
  116.     </LinearLayout>  
  117.   
  118.       
  119.   
  120.     <android.support.v4.view.ViewPager//不解释，用来滑动页卡  
  121.         android:id="@+id/vPager"  
  122.         android:layout_width="wrap_content"  
  123.         android:layout_height="0dp"  
  124.         android:layout_gravity="center"  
  125.         android:layout_weight="1.0"  
  126.         android:background="#000000"  
  127.         android:flipInterval="30"  
  128.         android:persistentDrawingCache="animation" />  
  129.   
  130. </LinearLayout>  

 有了上一篇《Android ViewPager使用详解 》的基础 ，Activity的代码就很容易理解了，我就不注释了。看一下Activity代码：

[java] view plaincopy?
  1. package com.example.imitateqq;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import android.app.Activity;  
  6. import android.graphics.BitmapFactory;  
  7. import android.graphics.Matrix;  
  8. import android.os.Bundle;  
  9. import android.support.v4.view.PagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.util.DisplayMetrics;  
  13. import android.view.LayoutInflater;  
  14. import android.view.View;  
  15. import android.view.Window;  
  16. import android.view.View.OnClickListener;  
  17. import android.view.animation.Animation;  
  18. import android.view.animation.TranslateAnimation;  
  19. import android.view.ViewGroup;  
  20. import android.widget.ImageView;  
  21. import android.widget.TextView;  
  22.   
  23. public class MainQQActivity extends Activity {  
  24.   
  25.     private ViewPager viewPager;  
  26.     private ImageView imageView;  
  27.     private TextView textView1, textView2, textView3, textView4;  
  28.     private View view1, view2, view3, view4;  
  29.     private List<View> views;  
  30.     private int offSet = 0;// 动画图片偏移量  
  31.     private int currIndex = 0;// 当前页卡编号  
  32.     private int bmpW;// 动画图片宽度  
  33.   
  34.     @Override  
  35.     protected void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
  38.         setContentView(R.layout.mainqq);  
  39.         initView();  
  40.         initListener();  
  41.     }  
  42.   
  43.     private void initView() {  
  44.         viewPager = (ViewPager) findViewById(R.id.vPager);  
  45.         imageView = (ImageView) findViewById(R.id.cursor);  
  46.   
  47.         textView1 = (TextView) findViewById(R.id.speaktext);  
  48.         textView2 = (TextView) findViewById(R.id.fridenttext);  
  49.         textView3 = (TextView) findViewById(R.id.grouptext);  
  50.         textView4 = (TextView) findViewById(R.id.changetext);  
  51.   
  52.         LayoutInflater layoutInflater = getLayoutInflater();  
  53.         view1 = layoutInflater.inflate(R.layout.qqtab_1, null);  
  54.         view2 = layoutInflater.inflate(R.layout.qqtab_2, null);  
  55.         view3 = layoutInflater.inflate(R.layout.qqtab_3, null);  
  56.         view4 = layoutInflater.inflate(R.layout.qqtab_4, null);  
  57.   
  58.         views = new ArrayList<View>();  
  59.         views.add(view1);  
  60.         views.add(view2);  
  61.         views.add(view3);  
  62.         views.add(view4);  
  63.   
  64.         bmpW=BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();  
  65.         DisplayMetrics displayMetrics=new DisplayMetrics();  
  66.         getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);  
  67.         int screenW=displayMetrics.widthPixels;  
  68.         offSet=(screenW / 4 - bmpW) / 2;  
  69.         Matrix matrix=new Matrix();  
  70.         matrix.postTranslate(screenW, 0);  
  71.         imageView.setImageMatrix(matrix);  
  72.     }  
  73.   
  74.     private void initListener() {  
  75.         textView1.setOnClickListener(new MyOnClickListener(0));  
  76.         textView2.setOnClickListener(new MyOnClickListener(1));  
  77.         textView3.setOnClickListener(new MyOnClickListener(2));  
  78.         textView4.setOnClickListener(new MyOnClickListener(3));  
  79.   
  80.         viewPager.setAdapter(new MyPagerAdapter(views));  
  81.         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
  82.         viewPager.setCurrentItem(0);  
  83.         textView1.setTextColor(getResources().getColor(R.color.color_bai));  
  84.     }  
  85.   
  86.     private class MyPagerAdapter extends PagerAdapter {  
  87.         private List<View> mListViews;  
  88.   
  89.         public MyPagerAdapter(List<View> mListViews) {  
  90.             this.mListViews = mListViews;  
  91.         }  
  92.   
  93.         @Override  
  94.         public void destroyItem(ViewGroup container, int position, Object object) {  
  95.             container.removeView(mListViews.get(position));  
  96.         }  
  97.   
  98.         @Override  
  99.         public Object instantiateItem(ViewGroup container, int position) {  
  100.             container.addView(mListViews.get(position));  
  101.             return mListViews.get(position);  
  102.         }  
  103.   
  104.         @Override  
  105.         public int getCount() {  
  106.             return mListViews.size();  
  107.         }  
  108.   
  109.         @Override  
  110.         public boolean isViewFromObject(View arg0, Object arg1) {  
  111.             return arg0 == arg1;  
  112.         }  
  113.   
  114.     }  
  115.   
  116.     private class MyOnPageChangeListener implements OnPageChangeListener {  
  117.         int one = offSet * 2 + bmpW;// 页卡1 -> 页卡2 偏移量  
  118.           
  119.         public void onPageScrollStateChanged(int arg0) {  
  120.               
  121.   
  122.         }  
  123.   
  124.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  125.               
  126.   
  127.         }  
  128.   
  129.         public void onPageSelected(int arg0) {  
  130.             Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);  
  131.             currIndex = arg0;  
  132.             animation.setFillAfter(true);// True:图片停在动画结束位置  
  133.             animation.setDuration(300);  
  134.             imageView.startAnimation(animation);  
  135.             switch(currIndex){  
  136.             case 0:  
  137.                 textView1.setTextColor(getResources().getColor(R.color.color_bai));  
  138.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  139.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  140.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  141.                 break;  
  142.             case 1:  
  143.                 textView2.setTextColor(getResources().getColor(R.color.color_bai));  
  144.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  145.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  146.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  147.                 break;  
  148.             case 2:  
  149.                 textView3.setTextColor(getResources().getColor(R.color.color_bai));  
  150.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  151.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  152.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  153.                 break;  
  154.             case 3:  
  155.                 textView4.setTextColor(getResources().getColor(R.color.color_bai));  
  156.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  157.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  158.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  159.                 default :  
  160.                     break;  
  161.             }  
  162.         }  
  163.   
  164.     }  
  165.   
  166.     private class MyOnClickListener implements OnClickListener {  
  167.         private int index = 0;  
  168.   
  169.         public MyOnClickListener(int i) {  
  170.             index = i;  
  171.         }  
  172.   
  173.         public void onClick(View v) {  
  174.             viewPager.setCurrentItem(index);  
  175.               
  176.             switch(index){  
  177.             case 0:  
  178.                 textView1.setTextColor(getResources().getColor(R.color.color_bai));  
  179.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  180.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  181.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  182.                 break;  
  183.             case 1:  
  184.                 textView2.setTextColor(getResources().getColor(R.color.color_bai));  
  185.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  186.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  187.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  188.                 break;  
  189.             case 2:  
  190.                 textView3.setTextColor(getResources().getColor(R.color.color_bai));  
  191.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  192.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  193.                 textView4.setTextColor(getResources().getColor(R.color.title_bg));  
  194.                 break;  
  195.             case 3:  
  196.                 textView4.setTextColor(getResources().getColor(R.color.color_bai));  
  197.                 textView2.setTextColor(getResources().getColor(R.color.title_bg));  
  198.                 textView3.setTextColor(getResources().getColor(R.color.title_bg));  
  199.                 textView1.setTextColor(getResources().getColor(R.color.title_bg));  
  200.                 default :  
  201.                     break;  
  202.             }  
  203.               
  204.         }  
  205.   
  206.     }  
  207. }  


 最后看一下效果图：

  关于QQ的UI部分基本上就是这样，之后将引入服务器，实现通信的功能。当然，还有很多UI要写，比如聊天页面，设置页面等等，在用到的时候再去写。谢谢大家关注！

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： arm_embed > 《仿》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多