安卓仿微信Tab页用Fragment实现

最终效果图如：

实现步骤：

新建项目tabdemo，我选的是4.0.3版本，然后依次新建三个Fragment，名字分别为：ChatFragment、FriendFragment、FindFragment，他会生成对应的界面布局xml文件。

项目资源管理器结构如下：

Drawable中是用到的三张图片，可自行找然后粘进去。

对应的Java代码如下：

package com.example.administrator.tabdemo;

import android.content.Context;

import android.net.Uri;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

public class ChatFragment extends Fragment {

    View mView;

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        if (mView == null) {

            mView = inflater.inflate(R.layout.fragment_chat,null);

        }

        ((TextView)mView.findViewById(R.id.mTextView)).setText("聊天界面");

        return mView;

    }

}

package com.example.administrator.tabdemo;

import android.content.Context;

import android.net.Uri;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

public class FriendFragment extends Fragment {

    View mView;

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        if (mView == null) {

            mView = inflater.inflate(R.layout.fragment_friend,null);

        }

        ((TextView)mView.findViewById(R.id.ffTextView)).setText("好友界面");

        return mView;

    }

}

package com.example.administrator.tabdemo;

import android.content.Context;

import android.net.Uri;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

public class FindFragment extends Fragment {

    View mView;

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        if (mView == null) {

            mView = inflater.inflate(R.layout.fragment_find,null);

        }

        ((TextView)mView.findViewById(R.id.sTextView)).setText("查找界面");

        return mView;

    }

}

对应的xml布局文件如下：

<FrameLayout 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"

    tools:context="com.example.administrator.tabdemo.ChatFragment">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/mTextView"

        android:layout_gravity="center" />

</FrameLayout>

<FrameLayout 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"

    tools:context="com.example.administrator.tabdemo.FriendFragment">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/ffTextView"

        android:layout_gravity="center" />

</FrameLayout>

<FrameLayout 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"

    tools:context="com.example.administrator.tabdemo.FindFragment">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/sTextView"

        android:layout_gravity="center" />

</FrameLayout>

另有顶部和底部，直接新建xml布局即可：
layout_bottom.xml和layout_top.xml分别如下

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal" android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"

    android:paddingTop="3dp"

    android:paddingBottom="3dp"

    android:background="@android:color/holo_green_light">

    <LinearLayout

        android:id="@+id/firstLinearLayout"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:gravity="center_horizontal"

        android:layout_weight="1">

        <ImageView

            android:id="@+id/firstImageView"

            android:background="@drawable/tab_weixin"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" />

        <TextView

            android:id="@+id/firstTextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="微信"

            />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/secondLinearLayout"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:gravity="center_horizontal"

        android:layout_weight="1">

        <ImageView

            android:id="@+id/secondImageView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="@drawable/tab_setting"/>

        <TextView

            android:id="@+id/secondTextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="朋友"

            />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/threeLinearLayout"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:gravity="center_horizontal"

        android:layout_weight="1">

        <ImageView

            android:id="@+id/threeImageView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="@drawable/tab_find"/>

        <TextView

            android:id="@+id/threeTextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="发现"

            />

    </LinearLayout>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:paddingTop="3dp"

    android:paddingBottom="3dp"

    android:background="@android:color/darker_gray">

    <TextView

        android:id="@+id/ViewTitle"

        android:layout_marginLeft="20dp"

        android:layout_marginTop="5dp"

        android:textSize="25sp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

最后新建一个类ViewPagerFragmentAdapter继承自FragmentPagerAdapter，代码如下：

package com.example.administrator.tabdemo;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.util.Log;

import java.util.ArrayList;

import java.util.List;

public class ViewPagerFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mList = new ArrayList<Fragment>();

    public ViewPagerFragmentAdapter(FragmentManager fm , List<Fragment> list) {

        super(fm);

        this.mList = list;

    }

    @Override

    public Fragment getItem(int position) {

        return mList.get(position);

    }

    @Override

    public int getCount() {

        return mList != null ? mList.size() : 0;

    }

}

再是MainActivity类，代码如下：

package com.example.administrator.tabdemo;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.view.ViewPager;

import android.util.Log;

import android.view.View;

import android.widget.LinearLayout;

import android.widget.TextView;

import com.example.administrator.tabdemo.ChatFragment;

import com.example.administrator.tabdemo.FriendFragment;

import com.example.administrator.tabdemo.FindFragment;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String TAG = "MainActivity.TAG";

    TextView titleTextView;

    public LinearLayout firstLinearLayout;

    public LinearLayout secondLinearLayout;

    public LinearLayout threeLinearLayout;

    ViewPager mViewPager;

    ViewPagerFragmentAdapter mViewPagerFragmentAdapter;

    FragmentManager mFragmentManager;

    String[] titleName = new String[] {"微信","朋友","发现"};

    List<Fragment> mFragmentList = new ArrayList<Fragment>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        mFragmentManager = getSupportFragmentManager();

        setContentView(R.layout.activity_main);

        initFragmetList();

        mViewPagerFragmentAdapter = new ViewPagerFragmentAdapter(mFragmentManager,mFragmentList);

        initView();

        initViewPager();

    }

    @Override

    protected void onResume() {

        super.onResume();

    }

    public void initViewPager() {

        mViewPager.addOnPageChangeListener(new ViewPagetOnPagerChangedLisenter());

        mViewPager.setAdapter(mViewPagerFragmentAdapter);

        mViewPager.setCurrentItem(0);

        titleTextView.setText(titleName[0]);

        updateBottomLinearLayoutSelect(true,false,false);

    }

    public void initFragmetList() {

        Fragment chat = new ChatFragment();

        Fragment friend = new FriendFragment();

        Fragment find = new FindFragment();

        mFragmentList.add(chat);

        mFragmentList.add(friend);

        mFragmentList.add(find);

    }

    public void initView() {

        titleTextView = (TextView) findViewById(R.id.ViewTitle);

        mViewPager = (ViewPager) findViewById(R.id.ViewPagerLayout);

        firstLinearLayout = (LinearLayout) findViewById(R.id.firstLinearLayout);

        firstLinearLayout.setOnClickListener(this);

        secondLinearLayout = (LinearLayout) findViewById(R.id.secondLinearLayout);

        secondLinearLayout.setOnClickListener(this);

        threeLinearLayout = (LinearLayout) findViewById(R.id.threeLinearLayout);

        threeLinearLayout.setOnClickListener(this);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.firstLinearLayout:

                mViewPager.setCurrentItem(0);

                updateBottomLinearLayoutSelect(true,false,false);

                break;

            case R.id.secondLinearLayout:

                mViewPager.setCurrentItem(1);

                updateBottomLinearLayoutSelect(false,true,false);

                break;

            case R.id.threeLinearLayout:

                mViewPager.setCurrentItem(2);

                updateBottomLinearLayoutSelect(false,false,true);

                break;

            default:

                break;

        }

    }

    private void updateBottomLinearLayoutSelect(boolean f, boolean s, boolean t) {

        firstLinearLayout.setSelected(f);

        secondLinearLayout.setSelected(s);

        threeLinearLayout.setSelected(t);

    }

    class ViewPagetOnPagerChangedLisenter implements ViewPager.OnPageChangeListener {

        @Override

        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            //            Log.d(TAG,"onPageScrooled");

        }

        @Override

        public void onPageSelected(int position) {

            Log.d(TAG,"onPageSelected");

            boolean[] state = new boolean[titleName.length];

            state[position] = true;

            titleTextView.setText(titleName[position]);

            updateBottomLinearLayoutSelect(state[0],state[1],state[2]);

        }

        @Override

        public void onPageScrollStateChanged(int state) {

            Log.d(TAG,"onPageScrollStateChanged");

        }

    }

}

完整代码下载

安卓仿微信Tab页用Fragment实现的更多相关文章

Android之仿微信Tab滑动
这个项目实现了以下的功能:有三个标签聊天.发现和通讯录,左右滑动下面的ViewPager可以切换不同的标签,且标签下面的蓝色条可以随着手指的滑动来实时滑动.另外,如果第二次滑动到“聊天”界面,可以在“ ...
安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)
什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...
转-Fragment+ViewPager组件(高仿微信界面)
http://www.cnblogs.com/lichenwei/p/3982302.html 什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开 ...
安卓开发笔记——ViewPager组件（仿微信引导界面）
这2天事情比较多,都没时间更新博客,趁周末,继续继续~ 今天来讲个比较新潮的组件——ViewPager 什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGro ...
Android控件-Fragment+ViewPager(高仿微信界面)
什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个 ...
Android仿微信界面--使用Fragment实现(慕课网笔记)
1 效果图这里我们没有实现滑动切换view的功能 2 具体实现: 2.1 布局文件:top.xml, bottom.xml,tab01.xml,tab02.xml,tab03.xml,tab04. ...
【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面
android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲 ...
Android仿微信界面
效果图原理介绍 1.先绘制一个颜色(例如:粉红) 2.设置Mode=DST_IN 3.绘制我们这个可爱的小机器人回答我,显示什么,是不是显示交集,交集是什么?交集是我们的小机器人的非透明区域,也就 ...
转-ViewPager组件（仿微信引导界面）
http://www.cnblogs.com/lichenwei/p/3970053.html 这2天事情比较多,都没时间更新博客,趁周末,继续继续~ 今天来讲个比较新潮的组件——ViewPager ...

随机推荐

HDU4871 Shortest-path tree（最短路径树 + 树的点分治）
题目大概要先求一张边有权的图的根为1的最短路径树,要满足根到各点路径序列的字典序最小:然后求这棵最短路径树包含k个结点的最长路径的长度和个数. 首先先构造出这棵字典序最小的最短路径树..好吧,我太傻逼 ...
sql over的作用及用法
over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用.其参数:over(partition by columnname1 order by c ...
你可能不再需要Underscore
过去几年像 Underscore 和 lodash 等库进入许多JavaScript程序员的工具函数中.虽然这些工具库可以使你的代码写起来更容易,但是他们不一定使代码更简单或更容易理解. 各种工具函数 ...
[Noi2015]软件包管理器题解
题目大意: 有n个软件安装包,除第一个以外,其他的要在另一个安装包的基础上安装,且无环,问在安装和卸载某个软件包时,这个操作实际上会改变多少个软件包的安装状态. 思路: 可构成树,用树链剖分,线段树. ...
20145308刘昊阳《Java程序设计》第1周学习总结
20145308刘昊阳 <Java程序设计>第1周学习总结教材学习内容总结第一章 Java平台概论 1.1Java不只是语言 Java最早取名Oak,后改名Java Java三大平台J ...
ihhh题解
10分做法: 由于空间卡得紧,所以给了10分暴力分0.0所以大家很容易就知道暴力就是线段树套ac自动机辣时间:$O((\sum |qSi| + \sum |nSi|)*log Q)$空间:$O((\s ...
【HDU】2147 kiki's game
http://acm.hdu.edu.cn/showproblem.php?pid=2147 题意:n×m的棋盘,每次可以向左走.向下走.向左下走,初始在(1, m),n,m<=2000,问先手 ...
Codeforces Round #210 (Div. 2) C. Levko and Array Recovery
题目链接线段树的逆过程,想了老一会,然后发现应该是包含区间对存在有影响,就不知怎么做了...然后尚大神,说,So easy,你要倒着来,然后再正着来,判断是不是合法就行了.然后我乱写了写,就过了.数 ...
配置hooks使svn提交后自动同步客户端代码（客户端与服务端在同一台机器上）
1.配置svn的hooks 2.实例演示 1.配置svn的hooks 1.1)配置情况承接上篇svn搭建的文章,今次继续使用上篇文章的配置上篇文章的地址:linux下搭建svn代码库 svn仓库所 ...
熟悉Eclipse开发工具
一.熟悉Eclipse 1.Eclipse是由IBM公司投资4000万美元开发的集成开发工具.它基于Java语言编写,并且是开放源代码的.可扩展的,也是目前最流行的Java集成开发工具之一.另外,IB ...

安卓仿微信Tab页用Fragment实现

安卓仿微信Tab页用Fragment实现的更多相关文章

随机推荐

热门专题