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的布局：

        <?xml version="1.0" encoding="utf-8"?><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>

    <?xml version="1.0" encoding="utf-8"?><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<Fragment> 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<Fragment>();        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，此处获取。