Android之多种多样的App主界面TAB实现方法
2016-12-27 本文已影响140人
破荒之恋
多种多样的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">
