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

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

(1)ViewPager实现点击Tab切换和手势滑动切换

(2)Fragment实现点击Tab切换界面

(3)ViewPager和FragmentPagerAdapter实现点击Tab切换和手势滑动切换

(4)ViewPagerIndicator与ViewPager实现Tab

(1)ViewPager实现点击Tab切换和手势滑动切换

先定义一个button布局作为主界面的Tab button.xml，四个Tab的小图标

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_bottom_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="@android:color/darker_gray"
android:layout_marginBottom="10dp"
>
<!-- 底部四个导航按钮 -->
<LinearLayout
android:id="@+id/ll_tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
>
<LinearLayout
android:id="@+id/lin_one"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:background="#ffffff"
>
<ImageView
android:layout_width="30dp"
android:src="@mipmap/main_switch"
android:layout_gravity="center_horizontal"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_main"
android:layout_width="match_parent"
android:text="首页"
android:gravity="center_horizontal"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/lin_two"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ffffff"
>
<ImageView
android:layout_width="30dp"
android:src="@mipmap/my_switch"
android:layout_gravity="center_horizontal"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_contact"
android:layout_width="match_parent"
android:text="联系人"
android:gravity="center_horizontal"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/lin_three"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ffffff"
>
<ImageView
android:layout_width="30dp"
android:src="@mipmap/my_switch"
android:layout_gravity="center_horizontal"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_my"
android:layout_width="match_parent"
android:text="我的"
android:gravity="center_horizontal"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/lin_four"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#ffffff"
>
<ImageView
android:layout_width="30dp"
android:src="@mipmap/main_switch"
android:layout_gravity="center_horizontal"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_set"
android:layout_width="match_parent"
android:text="设置"
android:gravity="center_horizontal"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<!-- 导航和视图的分割线 -->
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#0eefff"
android:layout_above="@id/ll_tabs"
/>

</LinearLayout>

现在来书写主活动的XMLactivity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<!-- VIewPager 主要是加载内容的 -->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"/>

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

</LinearLayout>

定义几个TAB分别对应的界面（4个layout文件）相似的

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

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="这是聊天页卡"
android:textColor="@color/colorAccent"
android:textSize="20sp"
android:gravity="center"/>
</LinearLayout>

现在来看看MainActivity中代码的书写

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
/**
* 四个导航
*/
LinearLayout lintonOne;
LinearLayout lintonTwo;
LinearLayout lintonThree;
LinearLayout lintonFour;
PagerAdapter adapter;
private TextView tvmain;
private TextView tvcontact;
private TextView tvmy;
private TextView tvset;
/**
* 作为页面容器的ViewPager
*/
ViewPager mViewPager;
private List<View> mViews=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initialize();
}
private void initialize() {
lintonOne= (LinearLayout) findViewById(R.id.lin_one);
lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
lintonThree=(LinearLayout) findViewById(R.id.lin_three);
lintonFour=(LinearLayout) findViewById(R.id.lin_four);
tvmain = (TextView) findViewById(R.id.tv_main);
tvcontact = (TextView) findViewById(R.id.tv_contact);
tvmy = (TextView) findViewById(R.id.tv_my);
tvset = (TextView) findViewById(R.id.tv_set);
tvmain.setTextColor(Color.RED);
lintonOne.setOnClickListener(this);
lintonTwo.setOnClickListener(this);
lintonThree.setOnClickListener(this);
lintonFour.setOnClickListener(this);
mViewPager=(ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater=LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.fragment_chat, null);
View view2 = inflater.inflate(R.layout.fragment_contact, null);
View view3 = inflater.inflate(R.layout.fragment_my, null);
View view4 = inflater.inflate(R.layout.fragment_set, null);
mViews.add(view1);
mViews.add(view2);
mViews.add(view3);
mViews.add(view4);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
resetImg();
switch (position){
case 0:
mViewPager.setCurrentItem(0);
tvmain.setTextColor(Color.RED);
break;
case 1:
mViewPager.setCurrentItem(1);
tvcontact.setTextColor(Color.RED);
break;
case 2:
mViewPager.setCurrentItem(2);
tvmy.setTextColor(Color.RED);
break;
case 3:
mViewPager.setCurrentItem(3);
tvset.setTextColor(Color.RED);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
adapter=new PagerAdapter() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViews.get(position);

container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
};
mViewPager.setAdapter(adapter);
}
@Override
public void onClick(View v) {
resetImg();
switch(v.getId()){
case R.id.lin_one:
tvmain.setTextColor(Color.RED);
mViewPager.setCurrentItem(0);
break;
case R.id.lin_two:
mViewPager.setCurrentItem(1);
tvcontact.setTextColor(Color.RED);
break;
case R.id.lin_three:
mViewPager.setCurrentItem(2);
tvmy.setTextColor(Color.RED);
break;
case R.id.lin_four:
mViewPager.setCurrentItem(3);
tvset.setTextColor(Color.RED);
break;
}
}
//重置TAB的字体颜色（也可以变化图片）
private void resetImg() {
tvmain.setTextColor(Color.BLACK);
tvcontact.setTextColor(Color.BLACK);
tvmy.setTextColor(Color.BLACK);
tvset.setTextColor(Color.BLACK);
}
}

(2)Fragment实现点击Tab切换界面（不可手势滑动）

layout文件和上面的一样

创建四个Fragment ：ChatFragment、ContactsFragment、MyFragment、SetFragment

/**
*聊天界面
*/
public class ChatFragment extends Fragment {

private static final String TAG = "ChatFragment";
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

Log.i(TAG, "------:Chat ");

return  inflater.inflate(R.layout.fragment_chat,container,false);

}
}

其他的Fragment都一样，只是加载不一样的Layout

MainActivity代码的书写

package com.cca.an.myfragment02;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.PagerAdapter;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private FrameLayout frameLayout;

/**
* 四个导航
*/
LinearLayout lintonOne;
LinearLayout lintonTwo;
LinearLayout lintonThree;
LinearLayout lintonFour;
private TextView tvmain;
private TextView tvcontact;
private TextView tvmy;
private TextView tvset;

/**
* 四个切换的界面
*/
private ChatFragment mChatFragment;
private ContactFragment mContactFragment;
private MyFragment mMyFragment;
private SetFragment mSetFragment;

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

/**
* 初始化控件
*/
private void initialize() {
lintonOne= (LinearLayout) findViewById(R.id.lin_one);
lintonTwo=(LinearLayout) findViewById(R.id.lin_two);
lintonThree=(LinearLayout) findViewById(R.id.lin_three);
lintonFour=(LinearLayout) findViewById(R.id.lin_four);
tvmain = (TextView) findViewById(R.id.tv_main);
tvcontact = (TextView) findViewById(R.id.tv_contact);
tvmy = (TextView) findViewById(R.id.tv_my);
tvset = (TextView) findViewById(R.id.tv_set);
tvmain.setTextColor(Color.RED);
lintonOne.setOnClickListener(this);
lintonTwo.setOnClickListener(this);
lintonThree.setOnClickListener(this);
lintonFour.setOnClickListener(this);
frameLayout = (FrameLayout) findViewById(R.id.frameLayout);

//默认第一个
setSelect(0);

}

/**
* 点击事件的处理
* @param v
*/
@Override
public void onClick(View v) {
resetImg();
switch(v.getId()){
case R.id.lin_one:
setSelect(0);
break;
case R.id.lin_two:
setSelect(1);
break;
case R.id.lin_three:
setSelect(2);
break;
case R.id.lin_four:
setSelect(3);
break;
}
}

/**
* 选择字体的颜色和显示选中的Fragment
* @param i
*/
private void setSelect(int i) {
FragmentManager fm=getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
if (mChatFragment==null){
mChatFragment=new ChatFragment();
transaction.add(R.id.frameLayout,mChatFragment);
}else {
transaction.show(mChatFragment);
}
tvmain.setTextColor(Color.RED);
break;
case 1:
if (mContactFragment==null){
mContactFragment=new ContactFragment();
transaction.add(R.id.frameLayout,mContactFragment);
}else {
transaction.show(mContactFragment);
}
tvcontact.setTextColor(Color.RED);
break;
case 2:
if (mMyFragment==null){
mMyFragment=new MyFragment();
transaction.add(R.id.frameLayout,mMyFragment);
}else {
transaction.show(mMyFragment);
}
tvmy.setTextColor(Color.RED);
break;
case 3:
if (mSetFragment==null){
mSetFragment=new SetFragment();
transaction.add(R.id.frameLayout,mSetFragment);
}else {
transaction.show(mSetFragment);
}
tvset.setTextColor(Color.RED);
break;

}
transaction.commit();
}

/**
* 隐藏所有的Fragment
* @param transaction
*/
private void hideFragment(FragmentTransaction transaction) {
if (mChatFragment!=null){
transaction.hide(mChatFragment);
}
if (mContactFragment!=null){
transaction.hide(mContactFragment);
}
if (mMyFragment!=null){
transaction.hide(mMyFragment);
}
if (mSetFragment!=null){
transaction.hide(mSetFragment);
}

}

//重置TAB的字体颜色（也可以变化图片）
private void resetImg() {
tvmain.setTextColor(Color.BLACK);
tvcontact.setTextColor(Color.BLACK);
tvmy.setTextColor(Color.BLACK);
tvset.setTextColor(Color.BLACK);
}
}

(3)ViewPager和FragmentPagerAdapter实现点击Tab切换和手势滑动切换

四个layout和Fragment资源和上面一样

MainActivity界面的main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<!-- VIewPager 主要是加载内容的 -->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"/>

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

</LinearLayout>

MainActivity代码的书写

package com.cca.an.myviewpagerfragment03;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

/**
* 四个导航
*/
LinearLayout lintonOne;
LinearLayout lintonTwo;
LinearLayout lintonThree;
LinearLayout lintonFour;
private TextView tvmain;
private TextView tvcontact;
private TextView tvmy;
private TextView tvset;

/**
* 四个切换的界面
*/
private ChatFragment mChatFragment;
private ContactFragment mContactFragment;
private MyFragment mMyFragment;
private SetFragment mSetFragment;

private ViewPager mViewPager;
FragmentPagerAdapter adapter;
private List<Fragment> mFragments=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initialize();
}

/**
* 初始化控件
*/
private void initialize() {
lintonOne = (LinearLayout) findViewById(R.id.lin_one);
lintonTwo = (LinearLayout) findViewById(R.id.lin_two);
lintonThree = (LinearLayout) findViewById(R.id.lin_three);
lintonFour = (LinearLayout) findViewById(R.id.lin_four);
tvmain = (TextView) findViewById(R.id.tv_main);
tvcontact = (TextView) findViewById(R.id.tv_contact);
tvmy = (TextView) findViewById(R.id.tv_my);
tvset = (TextView) findViewById(R.id.tv_set);
tvmain.setTextColor(Color.RED);
lintonOne.setOnClickListener(this);
lintonTwo.setOnClickListener(this);
lintonThree.setOnClickListener(this);
lintonFour.setOnClickListener(this);
mViewPager= (ViewPager) findViewById(R.id.viewPager);

mChatFragment=new ChatFragment();
mContactFragment=new ContactFragment();
mMyFragment=new MyFragment();
mSetFragment=new SetFragment();

mFragments.add(mChatFragment);
mFragments.add(mContactFragment);
mFragments.add(mMyFragment);
mFragments.add(mSetFragment);

adapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}

@Override
public int getCount() {
return mFragments.size();
}
};

mViewPager.setAdapter(adapter);

//ViewPager界面滑动的监听器
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
resetImg();
setSelect(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}

/**
* 点击事件的处理
* @param v
*/
@Override
public void onClick(View v) {
resetImg();
switch(v.getId()){
case R.id.lin_one:
setSelect(0);
break;
case R.id.lin_two:
setSelect(1);
break;
case R.id.lin_three:
setSelect(2);
break;
case R.id.lin_four:
setSelect(3);
break;
}
}

private void setSelect(int i) {
switch (i){
case 0:
tvmain.setTextColor(Color.RED);
break;
case 1:
tvcontact.setTextColor(Color.RED);
break;
case 2:
tvmy.setTextColor(Color.RED);
break;
case 3:
tvset.setTextColor(Color.RED);
break;

}
mViewPager.setCurrentItem(i);
}
//重置TAB的字体颜色（也可以变化图片）
private void resetImg() {
tvmain.setTextColor(Color.BLACK);
tvcontact.setTextColor(Color.BLACK);
tvmy.setTextColor(Color.BLACK);
tvset.setTextColor(Color.BLACK);
}
}

(4)ViewPagerIndicator与ViewPager实现Tab

1、首先在AndroidStudio中导入导入PagerIndicator的依赖包

File–>Project Structure–>Dependencies–>点击+号–>Choose Library Dependency–>在搜索框中输入com.inkapplications.viewpageindicator，选中，点击OK，gradle会自动帮我把改工程加载进来的。

compile 'com.inkapplications.viewpageindicator:library:2.4.3'

2、activity_main的XML文件

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

android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:background="@android:color/holo_blue_bright"
android:orientation="horizontal" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="慕课网"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:textSize="20sp"/>
</LinearLayout>

<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark" >
</com.viewpagerindicator.TabPageIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v4.view.ViewPager>
</LinearLayout>

3、完成MainActivity的书写

package com.cca.an.mypagerind;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.viewpagerindicator.TabPageIndicator;
import com.viewpagerindicator.TitlePageIndicator;

public class MainActivity extends FragmentActivity {
private static final String[] CONTENT = new String[] { "头条", "娱乐", "体育", "财经", "科技", "汽车","NBA","科技", "汽车","NBA" };

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

findView();
}
private void findView() {
FragmentPagerAdapter adapter = new NewsAdapter(getSupportFragmentManager());

ViewPager pager = (ViewPager)findViewById(R.id.framelayout);
pager.setAdapter(adapter);

TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
}

class NewsAdapter extends FragmentPagerAdapter {
public NewsAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
//新建一个Fragment来展示ViewPager item的内容，并传递参数
Fragment fragment = new ItemFragment();
Bundle args = new Bundle();
args.putString("arg", CONTENT[position]);
fragment.setArguments(args);
return fragment;
}

@Override
public CharSequence getPageTitle(int position) {
return CONTENT[position % CONTENT.length].toUpperCase();
}
@Override
public int getCount() {
return CONTENT.length;
}
}

}

4、ViewPager与PagerIndicator绑定的Fragment界面

package com.cca.an.mypagerind;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
* Created by an on 2016/10/16.
*/

public final class ItemFragment extends Fragment {
private static final String KEY_CONTENT = "TestFragment:Content";
private String mContent = "";

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
mContent = savedInstanceState.getString(KEY_CONTENT);
}
}

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

//动态找到布局文件，再从这个布局中find出TextView对象
View contextView = inflater.inflate(R.layout.fragment_layout, container, false);
TextView mTextView = (TextView) contextView.findViewById(R.id.textview);

//获取Activity传递过来的参数
Bundle mBundle = getArguments();
String title = mBundle.getString("arg");
mTextView.setText(title);
mTextView.setTextColor(Color.RED);
mTextView.setGravity(Gravity.CENTER);

return contextView;

/*    TextView text = new TextView(getActivity());
text.setGravity(Gravity.CENTER);
text.setText(mContent);
text.setTextSize(20 * getResources().getDisplayMetrics().density);
text.setPadding(20, 20, 20, 20);
LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
layout.setGravity(Gravity.CENTER);
layout.addView(text);
return layout;*/

}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}

@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putString(KEY_CONTENT, mContent);
}
}

5、最后一步在清单文件中配置主题Threme

android:theme="@style/Theme.PageIndicatorDefaults">

总结：至此，四中主界面Tab的实现方法都已经完成。