效果图:
1.activity.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:background="@color/comm_bg"
android:orientation="vertical">
<!--<include layout="@layout/base_header" />-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/main_tab_home"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/selector_tab_home"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页" />
</LinearLayout>
<LinearLayout
android:id="@+id/main_tab_shop"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/selector_tab_shop"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="商城" />
</LinearLayout>
<LinearLayout
android:id="@+id/main_tab_my"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/selector_tab_my"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
2.三个布局文件
fm_home
<?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">
</LinearLayout>
fm_shop
<?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">
</LinearLayout>
fm_my
<?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">
</LinearLayout>
3.三个Fragment文件
作用是给ViewPager返回三个布局文件。
MainHomeFragment
package com.nicemaking.o2orepairtech.view.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.nicemaking.o2orepairtech.R;
public class MainHomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fm_home,container, false);
return view;
}
}
MainShopFragment
package com.nicemaking.o2orepairtech.view.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.nicemaking.o2orepairtech.R;
/**
* Created by daguye on 16/3/11.
*/
public class MainHomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fm_shop,container, false);
return view;
}
}
MainMyFragment
package com.nicemaking.o2orepairtech.view.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.nicemaking.o2orepairtech.R;
/**
* Created by daguye on 16/3/11.
*/
public class MainHomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fm_my,container, false);
return view;
}
}
4.MainFragemntPagerAdapter
把返回的三个布局如何显示在View上,适配器Adapter的作用就是数据和视图之间的桥梁。
package com.nicemaking.o2orepairtech.view.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by daguye on 16/3/11.
*/
public class MainFragmentPagerAdapter extends FragmentPagerAdapter {
List<Fragment> mList;
public MainFragmentPagerAdapter(FragmentManager fm, List<Fragment> list){
super(fm);
mList=list;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
}
5.MainActivity
package com.nicemaking.o2orepairtech.view.activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import com.nicemaking.o2orepairtech.R;
import com.nicemaking.o2orepairtech.base.BaseHeadActivity;
import com.nicemaking.o2orepairtech.view.adapter.MainFragmentPagerAdapter;
import com.nicemaking.o2orepairtech.view.fragment.MainHomeFragment;
import com.nicemaking.o2orepairtech.view.fragment.MainMyFragment;
import com.nicemaking.o2orepairtech.view.fragment.MainShopFragment;
import java.util.ArrayList;
import java.util.List;
import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;
/**
* Created by daguye on 16/3/10.
*/
public class MainActivity extends AppCompatActivity {
@Bind(R.id.viewpager)
ViewPager viewpager;
@Bind(R.id.main_tab_home)
LinearLayout mainTabHome;
@Bind(R.id.main_tab_shop)
LinearLayout mainTabShop;
@Bind(R.id.main_tab_my)
LinearLayout mainTabMy;
List<Fragment> list_fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
list_fm=new ArrayList<>();
MainHomeFragment home=new MainHomeFragment();
MainShopFragment shop=new MainShopFragment();
MainMyFragment my =new MainMyFragment();
list_fm.add(home);
list_fm.add(shop);
list_fm.add(my);
MainFragmentPagerAdapter mAdapter=new MainFragmentPagerAdapter(getSupportFragmentManager(),list_fm);
viewpager.setAdapter(mAdapter);
viewpager.setCurrentItem(0);
viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//页面滑动
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
mainTabHome.setSelected(true);
mainTabShop.setSelected(false);
mainTabMy.setSelected(false);
break;
case 1:
mainTabHome.setSelected(false);
mainTabShop.setSelected(true);
mainTabMy.setSelected(false);
break;
case 2:
mainTabHome.setSelected(false);
mainTabShop.setSelected(false);
mainTabMy.setSelected(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
mainTabHome.setSelected(true);
mainTabShop.setSelected(false);
mainTabMy.setSelected(false);
}
//导航栏点击
@OnClick({R.id.main_tab_home, R.id.main_tab_shop, R.id.main_tab_my})
public void onClick(View view) {
switch (view.getId()) {
case R.id.main_tab_home:
viewpager.setCurrentItem(0);
break;
case R.id.main_tab_shop:
viewpager.setCurrentItem(1);
break;
case R.id.main_tab_my:
viewpager.setCurrentItem(2);
break;
}
}
}