App主界面Tab实现方法

ViewPager + FragmentPagerAdapter

这里模仿下微信APP界面的实现

国际惯例，先看下效果图：

 

activity_main.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.kevin.viewpager_fragment.MainActivity">

    <include layout="@layout/top" />

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

    <include layout="@layout/bottom" />

</LinearLayout>

top.xml 布局文件

<?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="45dp"
    android:background="@mipmap/title_bar"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

bottom.xml 布局文件

<?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="55dp"
    android:background="@mipmap/bottom_bar"
    android:orientation="horizontal">

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

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />

    </LinearLayout>

</LinearLayout>

tap01.xml 布局文件

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap02.xml 布局文件

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信2"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap03.xml 布局文件

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信3"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap04.xml 布局文件

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信4"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

MainActivity.class 主类。 使用的是FragmentPagerAdapter，这个承载的是一个个Fragment，需要注意的是，这里需要继承自 FragmentActivity 。 上源码吧，看了就知道是多么简单了。

  1 package com.kevin.viewpager_fragment;
  2
  3 import android.os.Bundle;
  4 import android.support.v4.app.Fragment;
  5 import android.support.v4.app.FragmentActivity;
  6 import android.support.v4.app.FragmentPagerAdapter;
  7 import android.support.v4.view.ViewPager;
  8 import android.view.View;
  9 import android.widget.ImageButton;
 10 import android.widget.LinearLayout;
 11
 12 import java.util.ArrayList;
 13 import java.util.List;
 14
 15 import fragment.AddressFragment;
 16 import fragment.FrdFragment;
 17 import fragment.SettingFragment;
 18 import fragment.WeiXinFragment;
 19
 20 public class MainActivity extends FragmentActivity implements View.OnClickListener {
 21
 22     private ViewPager mViewPager;
 23     private FragmentPagerAdapter mAdapter;
 24     private List<Fragment> mFragments;
 25
 26     private LinearLayout mTabWeixin;
 27     private LinearLayout mTabFrd;
 28     private LinearLayout mTabAddress;
 29     private LinearLayout mTabSetting;
 30
 31     private ImageButton mImgWeixin;
 32     private ImageButton mImgFrd;
 33     private ImageButton mImgAddress;
 34     private ImageButton mImgSetting;
 35
 36     @Override
 37     protected void onCreate(Bundle savedInstanceState) {
 38         super.onCreate(savedInstanceState);
 39         setContentView(R.layout.activity_main);
 40
 41         initView();
 42         initEvent();
 43     }
 44
 45     private void initEvent() {
 46         mTabWeixin.setOnClickListener(this);
 47         mTabFrd.setOnClickListener(this);
 48         mTabAddress.setOnClickListener(this);
 49         mTabSetting.setOnClickListener(this);
 50     }
 51
 52     private void initView() {
 53         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
 54
 55         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
 56         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
 57         mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
 58         mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
 59
 60         mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
 61         mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
 62         mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
 63         mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);
 64
 65         mFragments = new ArrayList<>();
 66         Fragment mTab01 = new WeiXinFragment();
 67         Fragment mTab02 = new FrdFragment();
 68         Fragment mTab03 = new AddressFragment();
 69         Fragment mTab04 = new SettingFragment();
 70         mFragments.add(mTab01);
 71         mFragments.add(mTab02);
 72         mFragments.add(mTab03);
 73         mFragments.add(mTab04);
 74
 75         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
 76             @Override
 77             public Fragment getItem(int position) {
 78                 return mFragments.get(position);
 79             }
 80
 81             @Override
 82             public int getCount() {
 83                 return mFragments.size();
 84             }
 85         };
 86
 87         mViewPager.setAdapter(mAdapter);
 88
 89         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 90             @Override
 91             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 92
 93             }
 94
 95             @Override
 96             public void onPageSelected(int position) {
 97                 int currentItem = mViewPager.getCurrentItem();//拿到当前显示的那一个item页面
 98                 setTab(currentItem);
 99             }
100
101             @Override
102             public void onPageScrollStateChanged(int state) {
103
104             }
105         });
106     }
107
108     @Override
109     public void onClick(View v) {
110
111         switch (v.getId()) {
112             case R.id.id_tab_weixin:
113                 setSelect(0);
114                 break;
115             case R.id.id_tab_frd:
116                 setSelect(1);
117                 break;
118             case R.id.id_tab_address:
119                 setSelect(2);
120                 break;
121             case R.id.id_tab_setting:
122                 setSelect(3);
123                 break;
124             default:
125                 break;
126         }
127     }
128
129     /*
130     *  切换所有图片为暗色
131     * */
132     private void resetImgs() {
133         mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);
134         mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);
135         mImgAddress.setImageResource(R.mipmap.tab_address_normal);
136         mImgSetting.setImageResource(R.mipmap.tab_settings_normal);
137     }
138
139     private void setSelect(int i) {
140
141         setTab(i);
142
143         mViewPager.setCurrentItem(i);
144
145     }
146
147     private void setTab(int i) {
148
149         resetImgs();//调用这个方法，设置所有的tab图片为暗色
150
151         // 设置图片为亮色
152         //切换内容区域
153         switch (i) {
154             case 0:
155                 mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);
156                 break;
157             case 1:
158                 mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);
159                 break;
160             case 2:
161                 mImgAddress.setImageResource(R.mipmap.tab_address_pressed);
162                 break;
163             case 3:
164                 mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);
165                 break;
166         }
167     }
168 }

除了主类，接下来是4个Fragment页面。这里没什么内容，只是加载一个布局。

WeiXinFragment.class :

 1 package fragment;
 2
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9
10 import com.kevin.viewpager_fragment.R;
11
12 /**
13  * Created by ${火龙裸先生} on 2016/11/4.
14  * 邮箱：[email protected]
15  */
16 public class WeiXinFragment extends Fragment {
17
18     @Nullable
19     @Override
20     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
21
22         View view = inflater.inflate(R.layout.tab01, container, false);
23
24         return view;
25     }
26 }

FrdFragment.class :

 1 package fragment;
 2
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9
10 import com.kevin.viewpager_fragment.R;
11
12 /**
13  * Created by ${火龙裸先生} on 2016/11/4.
14  * 邮箱：[email protected]
15  */
16 public class FrdFragment extends Fragment {
17
18     @Nullable
19     @Override
20     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
21         View view = inflater.inflate(R.layout.tab02, container, false);
22
23         return view;
24     }
25 }

AddressFragment.class :

 1 package fragment;
 2
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9
10 import com.kevin.viewpager_fragment.R;
11
12 /**
13  * Created by ${火龙裸先生} on 2016/11/4.
14  * 邮箱：[email protected]
15  */
16 public class AddressFragment extends Fragment {
17
18     @Nullable
19     @Override
20     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
21         View view = inflater.inflate(R.layout.tab03, container, false);
22
23         return view;
24     }
25 }

Setting.class :

package fragment;

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;

import com.kevin.viewpager_fragment.R;

/**
 * Created by ${火龙裸先生} on 2016/11/4.
 * 邮箱：[email protected]
 */
public class SettingFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab04, container, false);

        return view;
    }
}

就是这些代码了。
总结一下：实现这样功能的实现，不止这一种方法，但是，采用ViewPager + FragmentPagerAdapter， 这里的内容区域是Fragment，所以优势就出来了，Fragment管理自己的布局内部所有控件的事件等各种东西，不需要把代码都冗余在MainActivity.class中， 我们的MainActivity只作为一个调度器，调度显示不同的Fragment、隐藏不同的Fragment。 这样的话，便于后期的复用，也便于后期的维护。  然后，我们用的ViewPager，肯定有ViewPager的优势，如果大家希望能够左右拖动，大家就选择 “ViewPager + FragmentPagerAdapter”作为实现，如果大家不需要左右去拖动，比如QQ，一个页面有LitView或者RecyclerView，并且Item需要“侧滑删除”的一个效果，所以这个时候可能就不需要ViewPager的这样一个效果，这就可以选择直接使用Fragment去实现。也建议尽量去使用Fragment。

时间： 2025-01-06 00:31:16

App主界面Tab实现方法的相关文章

多种多样的App主界面Tab实现方法

看了一下App主界面Tab实现方法,总结一下: 再看看实现的效果图:                            第一种:ViewPager实现Tab: 思路:1.布局方面实现顶层和底层布局,中间是ViewPager实现的.中间是四个布局实现的,List<View>                 2.实现:setOnPageChangeListener内部类                3.需要一个适配器:PagerAdapter 源代码如下: <span style=&q

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 1 <FrameLayout 2 android:id="@+id/id_content" 3 android:layout_width="fill_parent" 4 android:layout_height="0dp" 5 android:layout_weight="1" > 6 &

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

1.ViewPager实现Tab 首先实现底部和底部布局 <?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="4

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(三)

Fragment+ViewPager 与之前直接用ViewPager不同的是,数组里面放的不再是View,而是Fraagment; 使用FragmentPagerAdapter xml文件没有变化,只有代码发生变化 1 package com.imooc.tab03; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.os.Bundle; 7 import android.support.v4.

66、多种多样的App主界面Tab（1）------ ViewPager实现Tab

1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- bottom.xml --> 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" 5 android:layout_height=

安卓开发_慕课网_Fragment实现Tab(App主界面)

学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信)的图标为亮,其他三个为暗 2.点击相应的按钮,首先将所有的图标变暗,接着隐藏所有Fragment,再把点击的对应的Fragment显示出来,并把相应的图标显示亮 首先布局文件 activity_main.xml与ViewPager实现Tab的是不一样的 1 <LinearLayout xmlns:

Android学习系列(23)--App主界面实现

在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下最终的界面设计图:    上面顶部是一个9patch背景图片+标题文字:下面底部是5个tab标签,表示应用的5大模块.中间内容部分则是各个模块的具体内容,可以再分类,或者直接显示内容. 2.准备素材按照上篇文章的界面,我们需要事先提供两大方面的素材:顶部+底部.顶部的素材非常简单,最重要的是背景(9patch

ScrollView + viewpager实现android的app主界面效果

ScrollView + viewpager实现android的app主界面效果 Android的主界面一般由两部分组成:导航栏,滑动的分屏(我自己这么叫的).其中滑动的分屏肯定是用的fragment,具体的承载的控件是viewpager.而导航分页栏用的控件就有很多了,tabhost,Scrollview或者自定义的都行. 个人认为tabhost和Scrollview都是比较好的,因为后期的可拓展性比较好,除非导航栏界面确实属于"自定义"范畴,基本上我们可以选择这两样就可以了. 其实

安卓开发_慕课网_ViewPager实现Tab(App主界面)

学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_w