zoukankan      html  css  js  c++  java

  • Android 仿QQ主页面的实

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

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

    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     xmlns:tools="http://schemas.android.com/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要写，比如聊天页面，设置页面等等，在用到的时候再去写。谢谢大家关注！

    路漫漫其修远兮 吾将上下而求索
  • 相关阅读:
    Netty入门——客户端与服务端通信
    使用配置文件自定义Ribbon配置
    使用Java代码自定义Ribbon配置
    Spring Cloud Ribbon入门
    负载均衡简介
    常见的几种负载均衡算法
    Eureka编程
    Eureka多机高可用
    Maven项目打包成可执行Jar文件
    Eureka单机高可用伪集群配置
  • 原文地址：https://www.cnblogs.com/hudabing/p/3109771.html
Copyright © 2011-2022 走看看