安卓仿微信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 ...

随机推荐

Backbone.js学习之二
经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...
Ajax从服务器端获取数据
写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...
BZOJ4112 : [Wf2015]Pipe Stream
枚举答案,考虑将速度区间等长地划分成若干个小区间. 设$n_i$表示$i$次敲击能得到的区间数,$v_i$表示$i$次敲击之后答案落在$[v1,v_i]$之间,则$n_0=1,v_0=v2$. 因为对 ...
ACM: Racing Gems - 最长递增序列
Racing Gems You are playing a racing game. Your character starts at the x axis (y = 0) and procee ...
【BZOJ】1524: [POI2006]Pal
题意给出$n$个回文串$s_i(\sum_{i=1}^{n} |s_i| \le 2000000)$求如下二元组$(i, j)$的个数$s_i + s_j$仍然是回文串. 分析这道 ...
【noiOJ】P1996
1996:登山查看提交统计提问总时间限制: 5000ms 内存限制: 131072kB 描述五一到了,PKU-ACM队组织大家去登山观光,队员们发现山上一个有N个景点,并且决定按照顺序 ...
【bzoj1367】[Baltic2004]sequence
2016-05-31 17:31:26 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1367 题解:http://www.cnblogs.co ...
【bzoj2809】[Apio2012]dispatching 左偏树
2016-05-31 15:56:57 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2809 直观的思想是当领导力确定时,尽量选择薪水少的- ...
mysql5.7.11修改root默认密码
知道 MySQL 出了5.7了,并且网上说性能提高了一两倍,于是在虚拟机上安装了个 CentOS 7,在上面安装 MySQL 5.7 我使用的是 yum安装方式,要求虚拟机能够上网,因为它会在线下载安 ...
关于Go，你可能不注意的7件事(转的)
http://tonybai.com/2015/09/17/7-things-you-may-not-pay-attation-to-in-go/ code https://github.com/bi ...

安卓仿微信Tab页用Fragment实现

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

随机推荐

热门专题