天天看點
傳回

ViewPager實作滑動頁面

效果圖：

ViewPager實作滑動頁面

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();
        viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //頁面滑動
            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case :
                        mainTabHome.setSelected(true);
                        mainTabShop.setSelected(false);
                        mainTabMy.setSelected(false);
                        break;
                    case :
                        mainTabHome.setSelected(false);
                        mainTabShop.setSelected(true);
                        mainTabMy.setSelected(false);
                        break;
                    case :
                        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();
                break;
            case R.id.main_tab_shop:
                viewpager.setCurrentItem();
                break;
            case R.id.main_tab_my:
                viewpager.setCurrentItem();
                break;
        }
    }
}
android viewpager 布局
上一篇: android垂直viewpager,android viewpager實作豎直滑動效果
下一篇: 不用ViewPager和Fragment實作滑動頁面的效果

繼續閱讀