Demo_仿微信界面_141019

最新推荐文章于 2025-09-05 13:49:34 发布

ylineyline

最新推荐文章于 2025-09-05 13:49:34 发布

阅读量555

点赞数

CC 4.0 BY-SA版权

文章标签： android ViewPager Tabline 可运行代码下载 demo

本文链接：https://blog.youkuaiyun.com/u014803950/article/details/40084101

本文基于慕课网的学习教程，介绍了如何使用Android技术高仿微信应用，并对其进行了优化和扩展，包括导入类库、添加包、改进点击标题转到对应viewpager的功能等。通过代码实现，详细展示了MainActivity.java、BadgeView.java、FragmentView1.java、FragmentView2.java、FragmentView3.java等关键部分的使用与功能实现。

学习教程：慕课网 --> android -> 高仿微信

本文主要是由学习慕课网而来，并且修改两点，

1）教程是导入类库，而个人是加了一个包在src 里面，然后，调用

2）教程感觉没有写点击标题转到对应的viewpager的部分（也可能是自己没有听到）

代码介绍：

MainActivity.java 布局的内容、定义、ViewPager部分都在这里面，

BadgeView.java 添加提示个数

FragmentView1.java FragmentView2.java FragmentView3.java 这三个，都是可以自己修改的部分

不多说，上代码：（只上MainActivity部分，以及对应的布局文件，其他的不贴；可以点击链接下载）

// MainActivity.java

package com.yline.ylineweixin4_2;

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

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.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.yline.ylineweixin4_2.Fragment.FragmentView1;
import com.yline.ylineweixin4_2.Fragment.FragmentView2;
import com.yline.ylineweixin4_2.Fragment.FragmentView3;
import com.yline.ylineweixin4_2.resource.BadgeView;

public class MainActivity extends FragmentActivity implements OnClickListener {
	private List<Fragment> mFragmentList;
	private ViewPager mViewPager;
	private FragmentPagerAdapter mVPAdapter;

	private TextView mTextView_1;
	private TextView mTextView_2;
	private TextView mTextView_3;

	private BadgeView mBadgeView;

	private LinearLayout mLinearLayout_1;
	private LinearLayout mLinearLayout_2;
	private LinearLayout mLinearLayout_3;

	private ImageView mTabline;

	private int mScreen1_3;

	private int mCurrentPageIndex;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initTabLine();  // 初始化 移动横杠

		initView();   // 初始化 控件

		tabchanged();     //完成 标题栏 的跳转 

		addFragment();  // 加载 Fragment 
		setFragmentAdapter();  //初始化   FragmentPagerAdapter 适配器
	}

	private void initTabLine(){
		mTabline = (ImageView) findViewById(R.id.id_iv_tabline);

		// 得到窗口空间的大小
		Display display = getWindow().getWindowManager().getDefaultDisplay();  // 得到窗口空间的大小
		DisplayMetrics outMetrics = new DisplayMetrics();
		display.getMetrics(outMetrics);

		// 将 该空间设置为 窗口的 1/3 大小
		mScreen1_3 = outMetrics.widthPixels / 3;
		LayoutParams mlp = mTabline.getLayoutParams();
		mlp.width = mScreen1_3;
		mTabline.setLayoutParams(mlp);
	}

	/**
	 * 初始化 控件
	 */
	private void initView() {
		mTextView_1 = (TextView) findViewById(R.id.id_tv_chat);
		mTextView_2 = (TextView) findViewById(R.id.id_tv_friend);
		mTextView_3 = (TextView) findViewById(R.id.id_tv_contact);
		mLinearLayout_1 = (LinearLayout) findViewById(R.id.id_ll_chat);
		mLinearLayout_2 = (LinearLayout) findViewById(R.id.id_ll_friend);
		mLinearLayout_3 = (LinearLayout) findViewById(R.id.id_ll_contact);
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
	}

	/**
	 * 设置 标题栏的点击事件
	 */
	private void tabchanged(){
		mLinearLayout_1.setOnClickListener(this);
		mLinearLayout_2.setOnClickListener(this);
		mLinearLayout_3.setOnClickListener(this);
	}

	/**
	 * 给标题栏 点击后，跳转到对应的 Viewpager页面
	 */
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.id_ll_chat:
			mViewPager.setCurrentItem(0);
			break;
		case R.id.id_ll_friend:
			mViewPager.setCurrentItem(1);
			break;
		case R.id.id_ll_contact:
			mViewPager.setCurrentItem(2);
			break;
		}
	}

	/**
	 * 添加 Fragment List
	 */
	private void addFragment(){	
		mFragmentList = new ArrayList<Fragment>();

		FragmentView1 tab_1 =  new FragmentView1();
		FragmentView2 tab_2 =  new FragmentView2();
		FragmentView3 tab_3 =  new FragmentView3();

		mFragmentList.add(tab_1);
		mFragmentList.add(tab_2);
		mFragmentList.add(tab_3);
	}

	/**
	 * 初始化   FragmentPagerAdapter 适配器
	 * 监听 ViewPager改变，改变TextView颜色、添加消息数目通知
	 * 监听 ViewPager改变，使横杠移动
	 */
	private void setFragmentAdapter(){

		mVPAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

			@Override
			public int getCount() {
				return mFragmentList.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				return mFragmentList.get(arg0);
			}
		};
		mViewPager.setAdapter(mVPAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					if(mBadgeView != null) {
						mLinearLayout_1.removeView(mBadgeView);
					}
					mBadgeView = new BadgeView(MainActivity.this);
					mBadgeView.setBadgeCount(7);
					mLinearLayout_1.addView(mBadgeView);

					mTextView_1.setTextColor(Color.parseColor("#008000"));
					break;
				case 1:
					mTextView_2.setTextColor(Color.parseColor("#008000"));
					break;
				case 2:
					mTextView_3.setTextColor(Color.parseColor("#008000"));
					break;
				}

				mCurrentPageIndex = position;
			}

			/**
			 * 循环，变量，每一个界面对应两种情况，需要区分，所以三个界面有：（三-1）*3 = 4
			 * @param position 当前页面位置  0->1
			 * @param positionOffset 当前页面偏移的百分比  0->0
			 * @param positionOffsetPx 当前页面偏移的像素位置 0->0
			 */
			@Override
			public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {

				LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline.getLayoutParams();

				if(mCurrentPageIndex == 0 && position == 0){
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset * mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 0){
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1) * mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 1){
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset * mScreen1_3);
				} else if (mCurrentPageIndex == 2 && position == 1){
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1) * mScreen1_3);
				}
				mTabline.setLayoutParams(lp);
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
	}

	private void resetTextView(){
		mTextView_1.setTextColor(Color.BLACK);
		mTextView_2.setTextColor(Color.BLACK);
		mTextView_3.setTextColor(Color.BLACK);
	}

}

// Activity_main.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/top_1" />
    <include layout="@layout/top_2" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

// top_1.xml

<?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="@drawable/top1_bg"
    android:paddingLeft="12dp"
    android:paddingRight="12dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:text="微信"
            android:textColor="#d3d3d3"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_search_icon" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_add_icon" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_more_icon" />
    </LinearLayout>

</RelativeLayout>

// top_2.xml

<?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="40dp"
    android:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="37dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/id_ll_chat"
            android:layout_width="3dp"
            android:orientation="horizontal"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#008000" 
                android:text="聊天" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_ll_friend"
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_friend"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:text="发现" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_ll_contact"
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:text="通讯录" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>

图片：

本代码下载链接：