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

最新推荐文章于 2018-03-26 17:45:16 发布
最新推荐文章于 2018-03-26 17:45:16 发布
阅读量456 收藏 1
点赞数
分类专栏： android开发 文章标签： Android ViewPager Fragment
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujunjie1002/article/details/84699819
版权

主界面 主要使用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);  
    }

}

 

 

效果图：



 

liujunjie1002
关注
专栏目录
Android10.3-ViewPager+Fragment实现仿微信界面
JHandYY的博客
06-15 560
首先将实现界面给大家看看 实现的代码有四个小的碎片，和一个完整的XML界面 《1》四个碎片 <ImageView android:layout_width="match_parent" android:layout_height="match_parent" andro
Android ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）
05-17
Android ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）Android ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）Android ViewPager+Fragment超高仿微信主界面（带底部图标切换动画）
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
12-27
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)
weixin_33906657的博客
09-19 292
什么是ViewPager？ 　　关于ViewPager的介绍和使用，在之前我写过一篇相关的文章《安卓开发复习笔记——ViewPager组件（仿微信引导界面）》，不清楚的朋友可以看看，这里就不再重复。   什么是Fragment？    Fragment是Android3.0后新增的概念，Fragment名为碎片，不过却和Activity十分相似，具有自己的生命周期，它是用来描述一些行为或一...
Fragment+ViewPager实现仿微信点击和滑动切换界面
longduyuan的博客
12-18 482
这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码： xml代码： &lt;span style="font-size:14px;"&gt; &lt;android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_con...
ViewPager+Fragment实现仿微信首页
Diors
05-06 2632
用Viewpager加上Fragment可以实现的界面。 这些微信，通讯录，发现，我的图标使用iconfont字体图标，这样清晰度非常的高，很清楚。 主要文件: MainActivity: package com.example.dior.fragment_viewpager; import android.graphics.Typeface; import android.os
ViewPager 与 Fragment相结合实现微信界面实例代码
01-20
【Android 开发】使用ViewPager与Fragment构建微信样式界面详解 在Android应用开发中，实现复杂的用户界面是一项常见的任务。微信作为一款全球用户广泛使用的社交应用，其界面设计和交互模式被许多开发者作为参考。...
Android ViewPager+Fragment超高仿微信主界面
12-22
在Android应用开发中，创建一个类似微信主界面的布局是一个常见的需求，这涉及到对ViewPager、RadioGroup以及Fragment的深入理解和灵活运用。`ViewPager`是Android官方提供的一个强大的滑动页面容器，而`Fragment`则...
使用ViewPager+Fragment+RadioGroup实现类似微信主界面
12-14
使用ViewPager+Fragment+RadioGroup实现类似微信主界面
Viewpager模仿微信主布局的三种方式 ViewPager,Fragment,ViewPager+FragmentPagerAdapter
weixin_30532987的博客
02-04 127
效果大概就是这样 很简单 : 1 创建 top 和bottom 2主界面布局 添加top 和bottom 中间添加一个ViewPage 3 给ViewPager 和 底部View设置点击事件 源码下载 (图片资源也在里面) https://github.com/AceInAndroid/imitateWeixinUIDemo 第二种Fragment 只能点...
Android ViewPager+RadioGroup+Fragment超高仿微信底部滑动菜单AndroidStudio源码
02-05
Android ViewPager+RadioGroup+Fragment超高仿微信底部滑动菜单AndroidStudio源码 Blog:http://blog.csdn.net/shenyuanqing/article/details/46670761
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
04-01
Android ViewPager和Fragment实现仿微信导航界面及滑动效果
Android ViewPager和Fragment 实现滑动切换页面
10-27
使用ViewPager + Fragment实现滑动切换页面的简单样例
ViewPager+RadioGroup+Fragment超高仿微信主界面AndroidStudio源码
06-28
ViewPager+RadioGroup+Fragment超高仿微信主界面,可通过左右滑动或点击底部RadioButton切换Fragment http://blog.csdn.net/shenyuanqing/article/details/46670761 开发环境AndroidStudio1.2
Fragment和ViewPager的结合——仿制微信界面6.0<二>
weixin_34284188的博客
03-31 126
【概述】 在微信中，拖动就可以转换视图。这是如何实现的呢？ 其实这并不难，用到ViewPager和Fragment的结合就可以了。 今天就将这一部分的代码敲出。 【在xml中加入】 在需要的地方加入ViewPager标签，这里将layout_height设置为0dp，并且将weight设置为1。这样在后来再在底部添加底部图标时，ViewPager都将占据剩余的...
通过ViewPager实现类似微信的页面切换（Fragment篇）
qqazl001的博客
03-26 421
此文，仅做为个人学习Android，记录成长以及方便复习！实现ViewPager实现类似微信的页面切换，此文通过Fragment适配器实现首先在布局文件activity_main.xml添加ViewPager ViewPager是页面，PagerTabStrip和 PagerTitleStrip是设置标题的&lt;?xml version="1.0" encoding="utf-8"?&gt; &...
Android仿微信界面--使用FragmentPagerAdapter,viewpager实现(慕课网笔记)
Fly~~~的专栏
12-15 3933
来自慕课网：http://www.imooc.com/video/5904 使用FragmenPagerAdapter和viewpager实现微信界面，与http://blog.csdn.net/hnyzwtf/article/details/50296013不同的是，可以左右滑动切换聊天界面； 效果图： 总体设计：一个标题栏top.xml,一个底部导航栏bottom.xml
Android ViewPager+Fragment实现仿微信界面
qq1170762202的博客
10-25 763
效果如下： 仿微信Demo下载
使用ViewPager+Fragment构建微信样式界面教程
"使用ViewPager和Fragment实现微信界面的实例代码教程" 在Android开发中，创建复杂的、可滚动的用户界面是一项常见的任务。此实例教程聚焦于如何利用ViewPager与Fragment结合，来构建一个类似微信的界面。ViewPager...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值