Android小Demo：高仿微信5.3界面

最新推荐文章于 2024-05-14 09:01:02 发布

南郭竽

最新推荐文章于 2024-05-14 09:01:02 发布

阅读量1.4k

点赞数 1

分类专栏：学习笔记文章标签： android viewpager

本文链接：https://blog.csdn.net/DucklikeJAVA/article/details/48915925

版权

学习笔记专栏收录该内容

48 篇文章 0 订阅

订阅专栏

近日看慕课讲解的一个高仿微信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，此处获取。

南郭竽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Android小Demo：高仿微信5.3界面

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

扫一扫

专栏目录