你的位置:首页 > 操作系统

[操作系统]ViewPager + Fragment 制作类似底部导航栏


12

1. 四个类似的Frament布局

tab_main_fragment.

<LinearLayout ="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical">  <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="main"    android:textSize="40sp"/></LinearLayout>

2.四个类似的Frament类

MainFragment

package com.example.zps.xuxian2.tab;import android.support.v4.app.Fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.zps.xuxian2.R;/** * Created by zps on 2015/9/8. */public class MainFragment extends Fragment{//注意 Fragment 包是V4包
  @Nullable  @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {    return inflater.inflate(R.layout.tab_main_fragment,container,false);  }}

3. viewpager 整体界面布局

tab_main_viewpager.

<??><LinearLayout ="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical">  <android.support.v4.view.ViewPager    android:id="@+id/tab_main_viewpager"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1" />  <include layout="@layout/tab_buttom" /></LinearLayout>

4. 底部的标签兰布局   (插入到3的布局中)

tab_buttom.

<??><LinearLayout ="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="horizontal">  <LinearLayout    android:id="@+id/id_tab_main"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:orientation="vertical">    <ImageButton      android:id="@+id/tab_main_icon_grey"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:background="#00000000"      android:clickable="false"      android:src="@drawable/tab_main_icon_grey" />    <TextView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="主页"      android:textColor="#000000" />  </LinearLayout>  <LinearLayout    android:id="@+id/id_tab_community"    android:layout_width="0dp"    android:layout_height="fill_parent"    android:layout_weight="1"    android:gravity="center"    android:orientation="vertical">    <ImageButton      android:id="@+id/tab_community_icon_grey"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:background="#00000000"      android:clickable="false"      android:src="@drawable/tab_community_icon_grey" />    <TextView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="附近"      android:textColor="#000000" />  </LinearLayout>  <LinearLayout    android:id="@+id/id_tab_shopping"    android:layout_width="0dp"    android:layout_height="fill_parent"    android:layout_weight="1"    android:gravity="center"    android:orientation="vertical">    <ImageButton      android:id="@+id/tab_shopping_cart_icon_grey"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:background="#00000000"      android:clickable="false"      android:src="@drawable/tab_shopping_cart_icon_grey" />    <TextView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="购物"      android:textColor="#000000" />  </LinearLayout>  <LinearLayout    android:id="@+id/id_tab_me"    android:layout_width="0dp"    android:layout_height="fill_parent"    android:layout_weight="1"    android:gravity="center"    android:orientation="vertical">    <ImageButton      android:id="@+id/tab_me_icon_grey"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:background="#00000000"      android:clickable="false"      android:src="@drawable/tab_me_icon_grey" />    <TextView      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="个人"      android:textColor="#000000" />  </LinearLayout></LinearLayout>

5 . 适配器FragmentPagerAdapter(用于2的适配器)

package com.example.zps.xuxian2.tab;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * Created by zps on 2015/9/8. */public class TabFragmentPagerAdapter extends FragmentPagerAdapter{ //继承FragmentPagerAdapter类 ,并自定义的构造器 private List<Fragment> fragments;  public TabFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments) {    super(fm);    this.fragments =fragments;  }  @Override  public Fragment getItem(int position) {    return fragments.get(position);  }  @Override  public int getCount() {    return fragments.size();  }}

6.总的活动类,实现滑动界面和点击Tab图标改变界面

TabMainActivity

package com.example.zps.xuxian2.tab;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.View;import android.view.Window;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.LinearLayout;import com.example.zps.xuxian2.R;import java.nio.IntBuffer;import java.util.ArrayList;import java.util.List;/** * Created by zps on 2015/9/8. */public class TabMainActivity extends FragmentActivity implements View.OnClickListener {//注意是继承FragmentActivity!!我找了半天的错误    private LinearLayout mTabMain;  private LinearLayout mTabCommunity;  private LinearLayout mTabShopping;  private LinearLayout mTabMe;  private ImageButton mImageTabMain;  private ImageButton mImageTabCommunity;  private ImageButton mImageTabShopping;  private ImageButton mImageTabMe;  private ViewPager mViewPager;  private TabFragmentPagerAdapter mAdapter;  private List<Fragment> mFragments;    @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    requestWindowFeature(Window.FEATURE_NO_TITLE);    setContentView(R.layout.tab_main_viewpager);    initView();    initClickListener();  }    private void initView() {    mViewPager = (ViewPager) findViewById(R.id.tab_main_viewpager);    mTabMain = (LinearLayout) findViewById(R.id.id_tab_main);    mTabCommunity = (LinearLayout) findViewById(R.id.id_tab_community);    mTabShopping = (LinearLayout) findViewById(R.id.id_tab_shopping);    mTabMe = (LinearLayout) findViewById(R.id.id_tab_me);    mImageTabMain = (ImageButton) findViewById(R.id.tab_main_icon_grey);    mImageTabCommunity = (ImageButton) findViewById(R.id.tab_community_icon_grey);    mImageTabShopping = (ImageButton) findViewById(R.id.tab_shopping_cart_icon_grey);    mImageTabMe = (ImageButton) findViewById(R.id.tab_me_icon_grey);    mFragments = new ArrayList<Fragment>();    Fragment mTab_01 = new MainFragment();    Fragment mTab_02 = new CommunityFragment();    Fragment mTab_03 = new ShoppingFragment();    Fragment mTab_04 = new MeFragment();    mFragments.add(mTab_01);    mFragments.add(mTab_02);    mFragments.add(mTab_03);    mFragments.add(mTab_04);    mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), mFragments);    mViewPager.setAdapter(mAdapter);//设置滑动监听器    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {      @Override      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {      }//滑动时 改变图标状态      @Override      public void onPageSelected(int position) {        int currentItem = mViewPager.getCurrentItem();        initTabImage();        switch (currentItem) {          case 0:            mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);            break;          case 1:            mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_green);            break;          case 2:            mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_green);            break;          case 3:            mImageTabMe.setImageResource(R.drawable.tab_me_icon_green);            break;        }      }      @Override      public void onPageScrollStateChanged(int state) {      }    });  }//初始的图标状态(滑动和点击事件改变的时候都要初始化)  private void initTabImage() {    mImageTabMain.setImageResource(R.drawable.tab_main_icon_grey);    mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_grey);    mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_grey);    mImageTabMe.setImageResource(R.drawable.tab_me_icon_grey);  }  //设置图标点击监听器  private void initClickListener() {    mTabMain.setOnClickListener(this);    mTabCommunity.setOnClickListener(this);    mTabShopping.setOnClickListener(this);    mTabMe.setOnClickListener(this);  }  @Override  public void onClick(View v) {    switch (v.getId()) {      case R.id.id_tab_main:        // initTabImage();        //mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);        //注意上面修改的只是图标的状态,还要修改相对应的fragment;        setSelect(0);        break;      case R.id.id_tab_community:        setSelect(1);        break;      case R.id.id_tab_shopping:        setSelect(2);        break;      case R.id.id_tab_me:        setSelect(3);        break;    }  }//设置将点击的那个图标为亮色,切换内容区域  private void setSelect(int i) {        initTabImage();    switch (i) {      case 0:        mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);        break;      case 1:        mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_green);        break;      case 2:        mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_green);        break;      case 3:        mImageTabMe.setImageResource(R.drawable.tab_me_icon_green);        break;      default:        break;    }    mViewPager.setCurrentItem(i);  }}