`
liu_android_1002
  • 浏览: 9257 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android ViewPager+Fragment 简单实现微信主界面

阅读更多

主界面 主要使用ViewPager + Fragment 实现 界面的滑动

消息提示主要使用了github 的开源控件 https://github.com/stefanjauker/BadgeView

 

1.实现 TopBar 布局

 

<?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="40dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:background="#000000"
    >
    
  <LinearLayout 
      android:layout_alignParentLeft="true"
      android:gravity="center"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
   <ImageView 
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/actionbar_icon"/>  
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:layout_marginLeft="5dp"
        android:textColor="#FFFAF0"
        android:textSize="15dp"/>    
      
  </LinearLayout>  
  
   <LinearLayout 
      android:layout_alignParentRight="true"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      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>

 2.实现选项卡布局

 

 

<?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:orientation="vertical" >

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

        <LinearLayout
            android:id="@+id/ll_chat"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="聊天"
                android:textColor="#FFF68F"
                android:textSize="15sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_find"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_find"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发现"
                android:textColor="#000000"
                android:textSize="15sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_contact"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="通信录"
                android:textColor="#000000"
                android:textSize="15dp" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/tabline_contact"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:background="@drawable/abc_ab_transparent_light_holo" />

</LinearLayout>

 

 

3.将 TopBar 选项卡 插入到主布局中,使用ViewPager实现滑动效果

 

<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/topbar" />
     <include layout="@layout/optionbar" />   

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

</LinearLayout>

 

 

4.分别实现 三个Fragment 的布局,这里只实现一个,其它几个类似     contact_fragment.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"
    android:gravity="center"
        >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="this is chat fragment"/>

</LinearLayout>

 

5.继承 Fragment 将布局文件填充到Fragment中去

package com.example.weixinui;

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

public class ContactFragment extends Fragment{
	
	@Override
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		return inflater.inflate(R.layout.contact_fragment, container, false);
	}


}

 

 

6.实现MainActivity 的业务逻辑

 

package com.example.weixinui;

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

import com.jauker.widget.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.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
	
	private ViewPager mViewPager;
	private List<Fragment>  mData;
	private FragmentPagerAdapter  mAdapter;
	private TextView mChatTextView,mFindTextView,mContactTextView;
	private LinearLayout  mChatLinearLayout,mFindLinearLayout,mContactLinearLayout;
    private BadgeView mChatBadgeView,mFindBadgeView,mContactBadgeView;
    private ImageView mTabLine;
    private int screenWidth;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);
		
		initView();
		initTabLine();
		
	}

	//初始化控件
	private void initView() {
		mChatTextView = (TextView) findViewById(R.id.tv_chat);
		mFindTextView = (TextView) findViewById(R.id.tv_find);
		mContactTextView = (TextView) findViewById(R.id.tv_contact);
		
		mChatLinearLayout = (LinearLayout) findViewById(R.id.ll_chat);
		mFindLinearLayout = (LinearLayout) findViewById(R.id.ll_find);
		mContactLinearLayout = (LinearLayout) findViewById(R.id.ll_contact);
		
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mData = new ArrayList<Fragment>();
		ChatFragment mChatFragment = new ChatFragment();
		ContactFragment mContactFragment = new ContactFragment();
		FindFragment mFindFragment = new FindFragment();
		
		mChatBadgeView = new BadgeView(this);
		mFindBadgeView = new BadgeView(this);
		mContactBadgeView = new BadgeView(this);
		
		mData.add(mChatFragment);
		mData.add(mContactFragment);
		mData.add(mFindFragment);
		
		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
			
			@Override
			public int getCount() {
				return mData.size();
			}
			
			@Override
			public Fragment getItem(int arg0) {
				return mData.get(arg0);
			}
		};
		
		mViewPager.setAdapter(mAdapter);
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					updateChatLinearLayout();	
					break;
	            case 1:
	            	updateFindLinearLayout();
					break;	
	             case 2:
	            	 updateContactLinearLayout();
					break;
				default:
					break;
				}
				
			}

			
			@Override
			public void onPageScrolled(int pos, float posOffset, int posOffsetPex) {
		        LinearLayout.LayoutParams lp = (LayoutParams)mTabLine.getLayoutParams();
		        lp.leftMargin = (int) ((pos+posOffset) * screenWidth);
		        mTabLine.setLayoutParams(lp);
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
	}

	//重置显示文本的颜色
	private void resetTextView(){
		mChatTextView.setTextColor(Color.BLACK);
		mFindTextView.setTextColor(Color.BLACK);
		mContactTextView.setTextColor(Color.BLACK);

	}
	
	//重置BadgeView 显示位置
	private void resetBadgeView(){
		mChatLinearLayout.removeView(mChatBadgeView);
		mFindLinearLayout.removeView(mFindBadgeView);
	    mContactLinearLayout.removeView(mContactBadgeView);
	}
	
	private void updateChatLinearLayout() {
		resetBadgeView();
		mChatBadgeView.setBadgeCount(5);
		mChatLinearLayout.addView(mChatBadgeView);
		mChatTextView.setTextColor(Color.BLUE);
	}
	
	private void updateFindLinearLayout() {
		resetBadgeView();
		mFindBadgeView.setBadgeCount(5);
		mFindLinearLayout.addView(mFindBadgeView);
		mFindTextView.setTextColor(Color.BLUE);
	}
	
	private void updateContactLinearLayout() {
		resetBadgeView();
	    mContactBadgeView = new BadgeView(MainActivity.this);
	    mContactBadgeView.setBadgeCount(5);
		mContactLinearLayout.addView(mContactBadgeView);
		mContactTextView.setTextColor(Color.BLUE);
	}
	
	  //根据屏幕的宽度,初始化引导线的宽度   
    private void initTabLine()  
    {  
        mTabLine = (ImageView) findViewById(R.id.tabline_contact);  
        DisplayMetrics displayMetrics = new DisplayMetrics();  
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);  
        screenWidth = displayMetrics.widthPixels;  
        LinearLayout.LayoutParams lp =  (LayoutParams) mTabLine.getLayoutParams();  
        lp.width = screenWidth / 3;  
        mTabLine.setLayoutParams(lp);  
    }

}

 

 

效果图:



 

分享到:
评论

相关推荐

    Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)

    Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)

    使用ViewPager+Fragment+RadioGroup实现类似微信主界面

    使用ViewPager+Fragment+RadioGroup实现类似微信主界面

    Android ViewPager+Fragment超高仿微信主界面

    在Android应用开发中,创建一个类似微信主界面的布局是一个常见的需求,这涉及到对ViewPager、RadioGroup以及Fragment的深入理解和灵活运用。`ViewPager`是Android官方提供的一个强大的滑动页面容器,而`Fragment`则...

    Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面

    总的来说,使用`ViewPager`和`Fragment`在Android Studio中实现滑动切换界面是一个标准流程,能够帮助开发者创建功能丰富的多页面应用。通过理解并熟练掌握这些组件,你可以为用户提供更加流畅和直观的交互体验。在...

    ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)

    AS写的ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)demo blog:http://blog.csdn.net/shenyuanqing/article/details/49464767

    ViewPager+RadioGroup+Fragment超高仿微信主界面AndroidStudio源码

    ViewPager+RadioGroup+Fragment超高仿微信主界面,可通过左右滑动或点击底部RadioButton切换Fragment http://blog.csdn.net/shenyuanqing/article/details/46670761 开发环境AndroidStudio1.2

    ViewPager+Fragment+RadioGroup 实现仿微信界面

    在微信界面的实现中,每个Fragment代表一个特定的功能区域,如聊天界面、发现页或者个人信息页。通过ViewPager的适配器(通常是FragmentPagerAdapter或FragmentStatePagerAdapter),我们可以将这些Fragment与...

    VIewPager+Fragment实现仿微信界面

    在Android开发中,"VIewPager+Fragment实现仿微信界面+(BadgView)数字提醒"是一个常见的需求,它涉及到UI设计、页面滑动切换以及通知提醒的实现。下面将详细讲解这一主题的相关知识点。 首先,ViewPager是Android ...

    android 仿微信界面 ViewPager+Fragment

    这个资源专注于利用`ViewPager`和`Fragment`来构建这样的界面,这两种组件是Android SDK中的核心组件,用于实现动态和交互性强的用户界面。接下来,我们将深入探讨这两个组件以及如何结合使用它们来创建一个仿微信的...

    TextView+Fragment+ViewPager实现微信主界面

    在微信主界面中,我们可以利用ViewPager结合FragmentPagerAdapter或FragmentStatePagerAdapter来加载和切换多个Fragment。ViewPager会在需要的时候加载Fragment,有效地节省了内存。同时,我们还可以为ViewPager添加...

    Android 仿微信 fragment+viewpager+listview实例

    在这个实例中,Fragment被用作ViewPager的每个页面,实现了类似微信聊天界面间的切换效果。 接着,我们讨论ViewPager。ViewPager是Android提供的一个强大的视图滑动切换组件,通常与Fragment搭配使用。它允许用户...

    ViewPager 与 Fragment相结合实现微信界面实例代码

    【Android 开发】使用ViewPager与Fragment构建微信样式界面详解 在Android应用开发中,实现复杂的用户界面是一项常见的任务。微信作为一款全球用户广泛使用的社交应用,其界面设计和交互模式被许多开发者作为参考。...

    微信5.0主界面(可滑动,可点击)viewpager+Fragment

    在Android应用开发中,微信5.0主界面的实现是一个典型的案例,涉及到多个关键技术,包括ViewPager和Fragment的使用。这两个组件是Android SDK中的核心组件,用于构建动态、交互丰富的用户界面。 首先,我们来详细...

    actionBar+viewpager+adpter+fragment

    标题中的“actionBar+viewpager+adapter+fragment”是一个经典的Android开发组合,用于构建具有可滑动页面的应用界面。在Android应用开发中,这四个组件是实现动态、交互丰富的用户界面的关键元素。让我们深入探讨...

    ViewPager+RadioGroup实现微信UI界面

    ViewPager是Android SDK中的一个控件,它允许用户左右滑动来浏览多个页面,通常用于实现页面间的平滑切换,例如在应用的主界面或者设置界面中。在实现微信UI时,`ViewPager`可以用来展示不同的聊天会话或发现模块。 ...

    使用fragment实现仿微信界面

    在仿微信界面中,我们可以创建三个主要的Fragment:聊天Fragment、联系人Fragment和发现Fragment,分别对应微信的聊天主界面、通讯录和发现功能。每个Fragment都包含其特定的布局和业务逻辑。 1. 聊天Fragment:这...

    viewpager+fragment实现界面滑动,里面附带说明和截图

    在Android开发中,`ViewPager`和`Fragment`的结合使用是一种常见的实现界面滑动效果的方法。这种方式被广泛应用于创建如微信、支付宝等应用中的多页面滑动浏览功能。本教程将详细讲解如何利用`ViewPager`和`Fragment...

    Fragment和ViewPager组合实现微信模仿

    在Android应用开发中,`Fragment`和`ViewPager`是两个重要的组件,它们常被结合使用以构建复杂的用户界面,特别是那些需要实现滑动切换页面的应用,如微信、支付宝等。`Fragment`允许开发者在单个活动中包含多个可...

    android利用Fragment+RadioButton实现仿微信界面UI

    本文将深入探讨如何利用Fragment和RadioButton组件来实现一个类似微信的多页面滑动切换界面。 Fragment是Android SDK提供的一种组件,主要用于在大屏幕设备上创建动态且灵活的用户界面。它允许我们在一个活动中包含...

    模仿微信主界面跳转和Fragment滑动效果

    本教程主要探讨如何实现“模仿微信主界面跳转和Fragment滑动效果”,这是一个对新手友好的项目,旨在帮助开发者掌握Android中Fragment的使用以及实现平滑的界面切换。 首先,我们要了解Fragment的基本概念。...

Global site tag (gtag.js) - Google Analytics