Android小Demo：高仿微信5.3界面

• 近日看慕课讲解的一个高仿微信5.2.1主界面及消息提醒的案例，感觉也不是很难，就顺便也写了一下。
• 涉及知识点如下：
  
  • 怎样在代码中动态设置一个控件，必然ImageView 的宽度。
  • 怎样获取屏幕宽度。
  • github开源控件BadgeView的使用。(非常简单)
  • 动态改变ViewPager对应的各个Fragment的tab字体颜色改变的小技巧。
  • 怎样自定义ViewPager的滑动跟随tabLine。(比较取巧，也很简单)
  • ViewPager + Fragment 的简单使用。
• ok,介绍就这么多了。下面是代码区：

• xml布局：

  • Activity的xml

    <LinearLayout 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:orientation="vertical" >
    
        <include layout="@layout/top1" />
    
        <include layout="@layout/top2" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="5dp" >
    
            <ImageView
                android:id="@+id/iv_line"
                android:layout_width="120dp"
                android:layout_height="match_parent"
                android:background="@drawable/tabline" />
        LinearLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    LinearLayout>

  • 里面的两个include的布局：

        
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/background_dark"
        android:orientation="vertical"
        android:paddingLeft="12dp"
        android:paddingRight="12dp" >
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:gravity="center" >
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/actionbar_icon" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="微信"
                android:textColor="@android:color/white" />
        LinearLayout>
    
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:gravity="center" >
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/actionbar_search_icon" />
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/actionbar_add_icon" />
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/actionbar_more_icon" />
        LinearLayout>
    
    RelativeLayout>

    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="37dp"
        android:background="@android:color/darker_gray"
        android:baselineAligned="false"
        android:orientation="horizontal" >
    
        <LinearLayout
            android:id="@+id/ll_chat_warpper"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" >
    
            <TextView
                android:id="@+id/tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="聊天"
                android:textColor="#FF0000FF" />
        LinearLayout>
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" >
    
            <TextView
                android:id="@+id/tv_friend"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="发现" />
        LinearLayout>
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" >
    
            <TextView
                android:id="@+id/tv_contect"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="通讯录" />
        LinearLayout>
    
    LinearLayout>

• 布局算是完成了。当然，这里面涉及到一下图片资源，就在慕课讲解的那里可以下载。
• 然后是Java代码：
  
  • 首先是三个Fragment的代码，因为，对Fragment里面没有做任何的操作，也没有搞什么布局。自身在里面放了一个TextView，所以，Fragment就贴一个出来了，后面两个都一样的。

package org.duck.moocweixin.f;

import org.duck.moocweixin.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ChatFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01, container, false);
    }
}

• 然后是Activity的代码，关键的部分都在这里了：

package org.duck.moocweixin;

import java.util.ArrayList;
import java.util.List;

import org.duck.moocweixin.f.ChatFragment;
import org.duck.moocweixin.f.ContectFragment;
import org.duck.moocweixin.f.FriendFragment;
import org.duck.moocweixin.weight.BadgeView;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
        OnPageChangeListener {

    private ViewPager viewPager;
    private PagerAdapter adapter;
    private List fragments;
    private TextView tvChat;
    private TextView tvFriend;
    private TextView tvContact;
    private LinearLayout chatWarpper;
    private BadgeView badgeView;
    private int mScreenWidth1_3;
    private ImageView textLine;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chatWarpper = (LinearLayout) findViewById(R.id.ll_chat_warpper);
        initViewPager();
        initTextView();
        initTextLine();
        badgeView = new BadgeView(this);
        // {
        // // 使用这种方式获取的宽度设置给滑动跟随的图片不行，就是不显示！！！why>????
        // WindowManager wm = getWindow().getWindowManager();
        // Display display = wm.getDefaultDisplay();
        // mScreenWidth1_3 = display.getWidth() / 3;
        // System.out.println("mScreenWidth1_3: " + mScreenWidth1_3);
        // }
    }

    private void initTextLine() {
        textLine = (ImageView) findViewById(R.id.iv_line);
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreenWidth1_3 = outMetrics.widthPixels / 3;
        // System.out.println("#####:"+mScreenWidth1_3);
        LayoutParams params = textLine.getLayoutParams();
        params.width = mScreenWidth1_3;
        // params.width = 400;
        textLine.setLayoutParams(params);// 不加这一句上面的设置宽度没用
    }

    private void initTextView() {
        tvChat = (TextView) findViewById(R.id.tv_chat);
        tvFriend = (TextView) findViewById(R.id.tv_friend);
        tvContact = (TextView) findViewById(R.id.tv_contect);
    }

    private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        fragments = new ArrayList();
        fragments.add(new ChatFragment());
        fragments.add(new FriendFragment());
        fragments.add(new ContectFragment());
        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return fragments.size();
            }

            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }
        };
        viewPager.setAdapter(adapter);
        viewPager.setOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        // System.out.println("position: " + position + " positionOffset: "
        // + positionOffset + " positionOffsetPixels: "
        // + positionOffsetPixels);
        LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) textLine
                .getLayoutParams();
        if (position == 0) {// 只能 0-->1 滑动
            // 只能0-->1滑动
            lp.leftMargin = (int) (positionOffsetPixels / 3);
        } else if (position == 1) {
            lp.leftMargin = (int) (positionOffsetPixels / 3) + mScreenWidth1_3;
        } else if (position == 2) {
            lp.leftMargin = (int) (positionOffsetPixels / 3) + mScreenWidth1_3
                    * 2;
        }
        textLine.setLayoutParams(lp);
    }

    @Override
    public void onPageSelected(int position) {
        resetTextViewText();
        switch (position) {
        case 0:
            tvChat.setTextColor(Color.BLUE);
            if (badgeView != null) {
                chatWarpper.removeView(badgeView);// 避免添加多次添加
            }
            LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tvChat
                    .getLayoutParams();
            lp.height = LayoutParams.WRAP_CONTENT;
            lp.width = LayoutParams.WRAP_CONTENT;
            lp.leftMargin = 5;
            badgeView.setBadgeCount(6);
            chatWarpper.addView(badgeView, lp);
            break;
        case 1:
            tvFriend.setTextColor(Color.BLUE);
            break;
        case 2:
            tvContact.setTextColor(Color.BLUE);
            break;
        default:
            break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {// nothing to do
        // 这个方法在这里没意义
    }

    // / tools
    private void resetTextViewText() {
        tvChat.setTextColor(Color.BLACK);
        tvFriend.setTextColor(Color.BLACK);
        tvContact.setTextColor(Color.BLACK);
    }
}

• 关于滑动跟随，其实我这个代码比慕课讲解的那个判断逻辑稍微简单一些，不过还是慕课的讲解给了我思路。
• 以上代码运行ok，完整Demo，此处获取。