使用FragmentTabHost和ViewPager实现仿微信主界面策划

最近看到很多界面主页都差不多,决定研究研究写出来,以后直接拿来用,不做代码的轮子,多总结,多学习

还是废话少说,先上图

介绍一下我的代码:

首先是布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

当然如果你想让底部的tab放在上面的话,可以把viewPager和FragmentTabHost位置换一下,以上就是主界面了,比较简单没什么好说的,给个小技巧吧,shift+ctrl+T可以查找你想要的包,例如输入viewPager,直接粘android.support.v4.view.ViewPager就可以了,比较方便

下面就是MainActivity了:

package com.sdufe.thea.framework;

import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.os.Bundle;
import android.R.integer;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TabWidget;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
		OnPageChangeListener, OnTabChangeListener {

	private FragmentTabHost mTabHost;
	private LayoutInflater layoutInflater;
	private Class fragmentArray[] = { Fragment1.class, Fragment.class,
			Fragment3.class, Fragment4.class };
	private int imageViewArray[] = { R.drawable.mywork, R.drawable.mypatient,
			R.drawable.infusion, R.drawable.personal };
	private String textViewArray[] = { "工作", "病人", "互动", "个人中心" };
	private List<Fragment> list = new ArrayList<Fragment>();
	private ViewPager vp;

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

		initView();
		initPage();
	}

	/**
	 * 控件初始化
	 */
	private void initView() {
		vp = (ViewPager) findViewById(R.id.pager);
		vp.setOnPageChangeListener(this);
		layoutInflater = LayoutInflater.from(this);
		mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);
		mTabHost.setOnTabChangedListener(this);

		int count = textViewArray.length;

		for (int i = 0; i < count; i++) {
			TabSpec tabSpec = mTabHost.newTabSpec(textViewArray[i])
					.setIndicator(getTabItemView(i));
			mTabHost.addTab(tabSpec, fragmentArray[i], null);
			mTabHost.setTag(i);
		}
	}

	/**
	 * 初始化Fragment
	 */
	private void initPage() {
		Fragment1 fragment1 = new Fragment1();
		Fragment2 fragment2 = new Fragment2();
		Fragment3 fragment3 = new Fragment3();
		Fragment4 fragment4 = new Fragment4();
		list.add(fragment1);
		list.add(fragment2);
		list.add(fragment3);
		list.add(fragment4);
		vp.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), list));
	}

	private View getTabItemView(int i) {
		View view = layoutInflater.inflate(R.layout.tab_content, null);
		ImageView mImageView = (ImageView) view
				.findViewById(R.id.tab_imageview);
		TextView mTextView = (TextView) view.findViewById(R.id.tab_textview);
		mImageView.setBackgroundResource(imageViewArray[i]);
		mTextView.setText(textViewArray[i]);
		return view;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {

	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}

	@Override
	public void onPageSelected(int arg0) {
		TabWidget widget = mTabHost.getTabWidget();
		int oldFocusability = widget.getDescendantFocusability();
		widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
		mTabHost.setCurrentTab(arg0);
		widget.setDescendantFocusability(oldFocusability);
		mTabHost.getTabWidget().getChildAt(arg0)
				.setBackgroundResource(R.drawable.selector_tab_background);
	}

	@Override
	public void onTabChanged(String tabId) {
		int position = mTabHost.getCurrentTab();
		vp.setCurrentItem(position);
	}

}

代码相对来说比较简单,下面的就不贴了

源码:https://github.com/zimoguo/FragmentTabHost-ViewPager

时间: 2024-11-08 08:19:26

使用FragmentTabHost和ViewPager实现仿微信主界面策划的相关文章

Android ActionBar应用实战,高仿微信主界面的设计

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

Android利用ViewPager仿微信主界面-android学习之旅(78)

首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPagerAdapter = new PagerAdapter(){ @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View view, Object o

仿微信主界面导航栏图标字体颜色的变化

在所有的移动产品中,微信的界面做的很简洁,简单,我对微信主界面影响最深的就是微信底部导航栏的图标,以及字体颜色的变化,一直都想实现以下,今天有空,就大体的模仿者做了一遍. 效果图如下: 分析: 底部主要分为图标的渐变,字体颜色的渐变. 图标的颜色的渐变:主要是通过canvas绘制两个不同的图片,控制其图片的alpha透明度,来达到图标的渐变. 字体颜色:字体颜色就很好说了,Animator动画框架应该很熟悉了,在Animator框架中,有一个TypeEven是来计算十六进制色值的,我们可以通过A

ViewPager学习之仿微信主界面

因为素材的原因,这里都是从网上找的图片,所以所谓的仿微信实际上最后成了下图这货...,点击变色也是自己用的windows自带画图的颜料桶填充的空白... 直接上主代码: package com.example.tabandviewpage ; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support

Android 之高仿微信主界面

源码下载:  http://files.cnblogs.com/aibuli/WeChatSample.zip 主界面主要使用ActionBar来完成.  要实现这个效果,第一步当然是编辑menu目录下的main.xml文件. <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:

仿微信主界面

跟着慕课网的教学视频学习了如何制作微信的主界面,因为还有一些地方并没有完全搞懂,所以这里主要是记录下整个制作的过程,方便以后的学习! 效果图如图所示: 实现了点击下面tab切换fragment以及滑动切换tab的功能,同时滑动时,下面tab的icon会实现颜色渐变的效果. 首先是主界面的布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bunschen="

高仿微信主界面:ViewPage+Fragment 不预加载Fragment 也不会销毁Fragment

微信支持下面四个Tab滑动,之前做的demo,遇到两个问题,1:Fragment会预加载,2:创建过的Fragment,来回滑动,会销毁重新创建.今天我这个demo,就要解决这两个问题.第一个问题需要导入一个新的V4包,最后我会提供,ViewPage要设置 mViewPager .setOffscreenPageLimit(0);这样的就能解决预加载的问题.第二个问题:我贴上代码: package com.example.fragmentviewpage; import java.util.Ar

Android控件-Fragment+ViewPager(高仿微信界面)

什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或者重用Fragment在多个activity中. 关于Fragment的生命周期,由于Fragment需要依赖Activity,也就是说当一个Activity的生命周期结束之后,那么Fragment

Android控件:高仿微信主UI

高仿微信主UI 之前在Android组件:Fragment切换后保存状态 一文中讲到了Fragment切换后,是如何保存原来的状态的,最重要的就是用add方法取代现在各种教程常见的replace方法.然而我发现有不少App都貌似采用ViewPager + Fragment来做主UI的.于是在Android组件:Fragment切换后保存状态 的基础上加入了ViewPager,看了下微信界面,要高仿就尽力模仿到最像,所以也把ActionBar也修改成微信的样子. 先上一张效果图: 布局 我知道微信