多种多样APP主界面Tab实现
来源：互联网 发布：教育过程最优化 编辑：程序博客网 时间：2024/06/10 15:04
由于APP的空间比较小，为了显示更多的内容以及更好的排版APP的内容形式，我们需要向用户展示大量的数据以及动画功能，这个时候我们就需要使用到Tab实现滑动显示更多的内容
接下来我们主要讲解4种实现方法
实现的效果
Viewpager实现
基本界面：顶部一个微信标题 中部一个Viewpager实现活动显示页面 底部一个可选择活动的四个按钮
实现方法
顶部布局：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:gravity="center" android:background="@drawable/bottom_bar" android:layout_height="45dp"> <!-- 注释的快捷键是Ctrl+Shift+/ --> <!-- layout_gravity是控件在父布局中的位置 --> <!-- gravity是控件中的内容在控件中的位置--> <TextView android:layout_gravity="center" android:gravity="left|center" android:text="@string/weixin" android:textColor="#ffffff" android:layout_width="match_parent" android:textStyle="bold" android:layout_height="match_parent" /></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="60dp" android:background="#ffffffff" android:orientation="horizontal" > <LinearLayout android:clickable="true" android:id="@+id/id_tab_weixin" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_weixin_pressed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_frd" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_find_frd_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_address" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_address_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_settings" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_settings_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_settings_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#000000"/> </LinearLayout></LinearLayout>整体上的布局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.example.tab.MainActivity"> <include layout="@layout/top"></include> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" ></android.support.v4.view.ViewPager> <include layout="@layout/bottom"></include></LinearLayout>
package com.example.viewpager.Adapter;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.viewpager.R;import java.util.ArrayList;import java.util.List;/** * Created by 小新 on 2016/5/1. */public class ViewpagerAndPagerAdapter extends PagerAdapter { private List<View> mViews = new ArrayList<View>(); Context context; public ViewpagerAndPagerAdapter( Context context){ this.context = context; LayoutInflater mInflater = LayoutInflater.from(context); View tab01 = mInflater.inflate(R.layout.tab01,null);//设配器中加载布局 View tab02 = mInflater.inflate(R.layout.tab02,null); View tab03 = mInflater.inflate(R.layout.tab03,null); View tab04 = mInflater.inflate(R.layout.tab04,null); mViews.add(tab01); mViews.add(tab02); mViews.add(tab03); mViews.add(tab04); } @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; }}mainactivity
package com.example.viewpager;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.ImageButton;import android.widget.LinearLayout;import com.example.viewpager.Adapter.ViewpagerAndPagerAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private ViewPager mViewPager; private PagerAdapter mAdapter; // TAB private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; private ImageButton mWeixinImg; private ImageButton mFrdImg; private ImageButton mAddressImg; private ImageButton mSettingImg; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initEvents(); } private void initView() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); // tabs mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings); // ImageButton mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img); mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img); mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img); mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img); mAdapter = new ViewpagerAndPagerAdapter(MainActivity.this); mViewPager.setAdapter(mAdapter); } private void initEvents() { mTabWeixin.setOnClickListener(MainActivity.this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int arg0) { int currentItem = mViewPager.getCurrentItem(); resetImg(); switch (currentItem) { case 0: mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: mAddressImg .setImageResource(R.drawable.tab_address_pressed); break; case 3: mSettingImg .setImageResource(R.drawable.tab_settings_pressed); break; } } public void onPageScrolled(int arg0, float arg1, int arg2) { } public void onPageScrollStateChanged(int arg0) { } }); } @Override public void onClick(View v) { resetImg(); switch (v.getId()) { case R.id.id_tab_weixin: mViewPager.setCurrentItem(0); mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed); break; case R.id.id_tab_frd: mViewPager.setCurrentItem(1); mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed); break; case R.id.id_tab_address: mViewPager.setCurrentItem(2); mAddressImg.setImageResource(R.drawable.tab_address_pressed); break; case R.id.id_tab_settings: mViewPager.setCurrentItem(3); mSettingImg.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } } private void resetImg() { mWeixinImg.setImageResource(R.drawable.tab_weixin_normal); mFrdImg.setImageResource(R.drawable.tab_find_frd_normal); mAddressImg.setImageResource(R.drawable.tab_address_normal); mSettingImg.setImageResource(R.drawable.tab_settings_normal); }}
Fragment的实现
顶部布局：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:gravity="center" android:background="@drawable/bottom_bar" android:layout_height="45dp"> <!-- 注释的快捷键是Ctrl+Shift+/ --> <!-- layout_gravity是控件在父布局中的位置 --> <!-- gravity是控件中的内容在控件中的位置--> <TextView android:layout_gravity="center" android:gravity="left|center" android:text="@string/weixin" android:textColor="#ffffff" android:layout_width="match_parent" android:textStyle="bold" android:layout_height="match_parent" /></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="60dp" android:background="#ffffffff" android:orientation="horizontal" > <LinearLayout android:clickable="true" android:id="@+id/id_tab_weixin" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_weixin_pressed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_frd" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_find_frd_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_address" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_address_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_settings" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_settings_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_settings_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#000000"/> </LinearLayout></LinearLayout>
<?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" > <include layout="@layout/top"></include> <FrameLayout android:id="@+id/id_content" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" ></FrameLayout> <include layout="@layout/bottom"></include></LinearLayout>
四个Fragment和四个Fragment布局文件
第一个微信
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class WeixinFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab01,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Weixin Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第二个朋友
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class FrdFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab02,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Frd Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第三个通讯录
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class AddressFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab03,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Address Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第四个设置
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class SettingsFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab04,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Settings Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
package com.example.viewpager;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;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.ImageButton;import android.widget.LinearLayout;import com.example.viewpager.Adapter.ViewpagerAndPagerAdapter;import com.example.viewpager.Fragment.AddressFragment;import com.example.viewpager.Fragment.FrdFragment;import com.example.viewpager.Fragment.SettingFragment;import com.example.viewpager.Fragment.WeixinFragment;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSettings; private ImageButton mImgWeixin; private ImageButton mImgFrd; private ImageButton mImgAddress; private ImageButton mImgSettings; private Fragment mTab01; private Fragment mTab02; private Fragment mTab03; private Fragment mTab04; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initEvent(); } private void initEvent() { mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSettings.setOnClickListener(this); } private void initView() { mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img); mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img); mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img); mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img); } private void setSelect(int i) { FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); // 把图片设置为亮的 // 设置内容区域 switch (i) { case 0: if (mTab01 == null) { mTab01 = new WeixinFragment(); transaction.add(R.id.id_content, mTab01); } else { transaction.show(mTab01); } mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: if (mTab02 == null) { mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02); } else { transaction.show(mTab02); } mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: if (mTab03 == null) { mTab03 = new AddressFragment(); transaction.add(R.id.id_content, mTab03); } else { transaction.show(mTab03); } mImgAddress.setImageResource(R.drawable.tab_address_pressed); break; case 3: if (mTab04 == null) { mTab04 = new SettingFragment(); transaction.add(R.id.id_content, mTab04); } else { transaction.show(mTab04); } mImgSettings.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } transaction.commit(); } //隐藏Fragment private void hideFragment(FragmentTransaction transaction) { if (mTab01 != null) { transaction.hide(mTab01); } if (mTab02 != null) { transaction.hide(mTab02); } if (mTab03 != null) { transaction.hide(mTab03); } if (mTab04 != null) { transaction.hide(mTab04); } } @Override public void onClick(View v) { resetImgs(); switch (v.getId()) { case R.id.id_tab_weixin: setSelect(0); break; case R.id.id_tab_frd: setSelect(1); break; case R.id.id_tab_address: setSelect(2); break; case R.id.id_tab_settings: setSelect(3); break; default: break; } } private void resetImgs() { mImgWeixin.setImageResource(R.drawable.tab_weixin_normal); mImgFrd.setImageResource(R.drawable.tab_find_frd_normal); mImgAddress.setImageResource(R.drawable.tab_address_normal); mImgSettings.setImageResource(R.drawable.tab_settings_normal); }}Fragment是不可以滑动的，viewpager是可以右滑的，QQ每一个可以右滑删除就是用了Fragment（这样就一个聊天窗口右滑删除和一个页面的右滑就没有冲突了），微信用viewpager可以右滑
Viewpager+FragmentPagerAdapter实现
基本界面：顶部一个微信标题 中部一个Viewpager实现活动显示页面 底部一个可选择活动的四个按钮
实现方法
顶部布局：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:gravity="center" android:background="@drawable/bottom_bar" android:layout_height="45dp"> <!-- 注释的快捷键是Ctrl+Shift+/ --> <!-- layout_gravity是控件在父布局中的位置 --> <!-- gravity是控件中的内容在控件中的位置--> <TextView android:layout_gravity="center" android:gravity="left|center" android:text="@string/weixin" android:textColor="#ffffff" android:layout_width="match_parent" android:textStyle="bold" android:layout_height="match_parent" /></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="60dp" android:background="#ffffffff" android:orientation="horizontal" > <LinearLayout android:clickable="true" android:id="@+id/id_tab_weixin" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_weixin_pressed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_frd" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_find_frd_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_address" android:layout_width="0dp" android:layout_height="fill_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="@drawable/tab_address_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#000000" /> </LinearLayout> <LinearLayout android:clickable="true" android:id="@+id/id_tab_settings" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/id_tab_settings_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:clickable="false" android:src="@drawable/tab_settings_normal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#000000"/> </LinearLayout></LinearLayout>整体上的布局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.example.tab.MainActivity"> <include layout="@layout/top"></include> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" ></android.support.v4.view.ViewPager> <include layout="@layout/bottom"></include></LinearLayout>四个Fragment和四个Fragment布局文件
第一个微信
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class WeixinFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab01,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Weixin Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第二个朋友
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class FrdFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab02,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Frd Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第三个通讯录
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class AddressFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab03,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Address Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
第四个设置
package com.example.tab;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;/** * Created by 小新 on 2016/4/30. */public class SettingsFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.tab04,container,false); }}
<?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="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="This is Settings Tab" android:textSize="30sp" android:textStyle="bold" /></LinearLayout>
Viewpager的设配器 因为是Viewpager中加载Fragment所以用FragmentViewpagerAdapter
package com.example.tab;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.ArrayList;import java.util.List;/** * Created by 小新 on 2016/4/30. * 设配器 */public class FragmentAndViewpagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments; public FragmentAndViewpagerAdapter(FragmentManager fm) { super(fm); mFragments = new ArrayList<Fragment>(); Fragment mTab01 = new WeixinFragment(); Fragment mTab02 = new FrdFragment(); Fragment mTab03 = new AddressFragment(); Fragment mTab04 = new SettingsFragment(); mFragments.add(mTab01); mFragments.add(mTab02); mFragments.add(mTab03); mFragments.add(mTab04); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); }}
mainactivity中
package com.example.tab;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener{ //viewpager＋FragmentPagerAdapter实现 //viewpager可滑动 private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List<Fragment> mFragments; private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSettings; private ImageButton mImgWeixin; private ImageButton mImgFrd; private ImageButton mImgAddress; private ImageButton mImgSettings; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); initEvent(); } //点击事件 private void initEvent() { mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSettings.setOnClickListener(this); } //初始化数据 private void initView() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings); //找到按钮 滑动的时候改变图片 mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img); mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img); mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img); mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img); //实例化适配器 mAdapter = new FragmentAndViewpagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); //活动的监听事件 mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { public void onPageSelected(int arg0) { int currentItem = mViewPager.getCurrentItem(); setTab(currentItem); } public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.id_tab_weixin: setSelect(0); break; case R.id.id_tab_frd: setSelect(1); break; case R.id.id_tab_address: setSelect(2); break; case R.id.id_tab_settings: setSelect(3); break; default: break; } } private void setSelect(int i) { setTab(i); // 切换内容区域 mViewPager.setCurrentItem(i); } private void setTab(int i) { resetImgs(); // 设置图片为亮色 switch (i) { case 0: mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: mImgAddress.setImageResource(R.drawable.tab_address_pressed); break; case 3: mImgSettings.setImageResource(R.drawable.tab_settings_pressed); break; } } //切换图片到暗色 private void resetImgs() { mImgWeixin.setImageResource(R.drawable.tab_weixin_normal); mImgFrd.setImageResource(R.drawable.tab_find_frd_normal); mImgAddress.setImageResource(R.drawable.tab_address_normal); mImgSettings.setImageResource(R.drawable.tab_settings_normal); }}
链接
Viewpager实现的Demo https://github.com/xin917480852/Viewpager
Fragment实现的Demo https://github.com/xin917480852/FragmentTab
Viewpager+Viewpager实现的Demo https://github.com/xin917480852/ViewpagerAndFragment
0 0
- 多种多样APP主界面Tab实现
- 多种多样的App主界面Tab实现方法
- 多种多样的App主界面TAB实现方法
- 多种多样的App主界面Tab实现方法——单独利用ViewPager实现Tab
- 多种多样的App主界面Tab实现方法——单独利用Fragment实现Tab
- 多种多样的App主界面Tab实现方法——利用ViewPager+FragmentPagerAdapter实现Tab
- 多种多样的App主界面Tab实现方法——利用ViewPagerIndicator+ViewPager实现Tab
- 多种多样的App主界面Tab实现方法（四）：ViewPagerIndicator实现tab功能
- 多种多样的App主界面Tab实现方法（导航贴）
- 多种多样的App主界面Tab实现方法（一）：Viewpager
- 多种多样的App主界面Tab实现方法（二）：Fragment
- 多种多样的App主界面Tab实现方法（三）：Fragment+ViewPager
- App主界面Tab实现方法
- viewpager+FragmentAdapter实现App主界面Tab
- App主界面Tab实现方法
- App主界面Tab四个实现方法
- 4种的App主界面Tab实现方法
- APP主界面Tab的4种实现
- SortedSet和TreeSet
- 《hadoop进阶》web日志系统 KPI指标的分析与实现
- ztr loves math
- javascript 抽奖
- 《More Effective C++》读书笔记-效率
- 多种多样APP主界面Tab实现
- servlet、jsp跳转(传值)总结及URL传参数
- 第二次打字测试
- linux内存源码分析 - 内存回收(lru链表)
- Java重拾之猜数字小游戏
- bootstrap表单验证插件 经验记录 与RSA加密事件配合修改
- Android广播机制
- C经典 快速实现加减乘除
- 1048. 数字加密(20)
