1. 程式人生 > >ViewPager+Fragment 實現滑動頁面的效果

ViewPager+Fragment 實現滑動頁面的效果

佈局檔案如下:

<?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" >

    <android.support.v4.view.ViewPager
        android:id
="@+id/act_home_vp" android:layout_width="fill_parent" android:layout_height="0dp" //因為高度為0,然後佈局權重為1,因此就正好實現填充剩餘效果 android:layout_weight="1" >
</android.support.v4.view.ViewPager> <View android:layout_width="fill_parent" android:layout_height="1dp"
android:background="#e2e2e2" />
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:gravity="center" android:orientation="horizontal" > <LinearLayout android:id
="@+id/act_home_lin1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" >
<ImageView android:id="@+id/act_home_lin1_img" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="5dp" android:src="@drawable/icon_anli_on" /> <TextView android:id="@+id/act_home_lin1_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:text="xx" android:textColor="#0099cc" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/act_home_lin2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/act_home_lin2_img" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="5dp" android:src="@drawable/icon_moxing_off" /> <TextView android:id="@+id/act_home_lin2_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:text="yy" android:textColor="#666666" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/act_home_lin3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/act_home_lin3_img" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="5dp" android:src="@drawable/icon_jindu_off" /> <TextView android:id="@+id/act_home_lin3_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:text="zz" android:textColor="#666666" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/act_home_lin4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/act_home_lin4_img" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="5dp" android:src="@drawable/icon_ziliao_off" /> <TextView android:id="@+id/act_home_lin4_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:text="cc" android:textColor="#666666" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:id="@+id/act_home_lin5" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/act_home_lin5_img" android:layout_width="30dp" android:layout_height="30dp" android:layout_marginTop="5dp" android:src="@drawable/icon_my_off" /> <TextView android:id="@+id/act_home_lin5_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:text="vv" android:textColor="#666666" /> </LinearLayout> </LinearLayout> </LinearLayout>

這裡寫圖片描述

Activity檔案:

package com.example.tjhd;

import java.util.ArrayList;
import java.util.List;

import com.example.base.BaseActivity;
import com.example.base.BaseInterface;
import com.example.tjhd.adapter.Act_Home_PagerAdapter;
import com.example.tjhd.fragment.DataFragment;
import com.example.tjhd.fragment.HomeFragment;
import com.example.tjhd.fragment.ModelFragment;
import com.example.tjhd.fragment.MyFragment;
import com.example.tjhd.fragment.PlanFragment;

import android.R.color;
import android.app.AlertDialog;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class HomeActivity extends BaseActivity implements BaseInterface, OnClickListener{


    private static List<Fragment> frags = null;
    private LinearLayout[] lins = new LinearLayout[5];
    private int[] resLinIds = {R.id.act_home_lin1,R.id.act_home_lin2,R.id.act_home_lin3,R.id.act_home_lin4,R.id.act_home_lin5};
    private ImageView[] imgs = new ImageView[5];
    private int[] resImgIds = {R.id.act_home_lin1_img,R.id.act_home_lin2_img,R.id.act_home_lin3_img,R.id.act_home_lin4_img,R.id.act_home_lin5_img};
    private TextView[] tvs = new TextView[5];
    private int[] resTvIds = {R.id.act_home_lin1_tv,R.id.act_home_lin2_tv,R.id.act_home_lin3_tv,R.id.act_home_lin4_tv,R.id.act_home_lin5_tv};

    private int[] iconIds_on = {R.drawable.icon_anli_on,R.drawable.icon_moxing_on,R.drawable.icon_jindu_on,R.drawable.icon_ziliao_on,R.drawable.icon_my_on};
    private int[] iconIds_off = {R.drawable.icon_anli_off,R.drawable.icon_moxing_off,R.drawable.icon_jindu_off,R.drawable.icon_ziliao_off,R.drawable.icon_my_off};

    private ViewPager vp;
    private AlertDialog backDialog;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.act_home);
        initView();
        initData();
        initViewOper();
    }

    @Override
    public void initView() {
        // TODO Auto-generated method stub
        for (int i = 0; i < 5; i++) {
            lins[i] = linerById(resLinIds[i]);
            imgs[i] = imgById(resImgIds[i]);
            tvs[i] = tvById(resTvIds[i]);
            lins[i].setOnClickListener(this);

        }
        vp = (ViewPager) findViewById(R.id.act_home_vp);

    }

    @Override
    public void initData() {
        // TODO Auto-generated method stub
        frags = new ArrayList<Fragment>();
        frags.add(new HomeFragment());
        frags.add(new ModelFragment());
        frags.add(new PlanFragment());
        frags.add(new DataFragment());
        frags.add(new MyFragment());
    }

    @Override
    public void initViewOper() {
        // TODO Auto-generated method stub
        vp.setAdapter(new Act_Home_PagerAdapter(getSupportFragmentManager(), frags));
        vp.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                updateView(position);
                toast(position+"");
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub              
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    //下面實現點選底部的某個按鈕,切換輪播圖效果
    @Override
    public void onClick(View v) {
        toast(v.getId()+"");
        switch (v.getId()) {
        case R.id.act_home_lin1:
            updateView(0);
            vp.setCurrentItem(0);  // 實現碎片的切換
            break;
        case R.id.act_home_lin2:
            updateView(1);
            vp.setCurrentItem(1);
            break;
        case R.id.act_home_lin3:
            updateView(2);
            vp.setCurrentItem(2);
            break;
        case R.id.act_home_lin4:
            updateView(3);
            vp.setCurrentItem(3);
            break;
        case R.id.act_home_lin5:
            updateView(4);
            vp.setCurrentItem(4);
            break;

        }
    }
    /**
     * 更改當前選中的檢視
     * @param position    當前使用者的選項卡下標 0 1 2 3 4
     */
    public void updateView(int position){
        for (int i = 0; i < 5; i++) {
            if (i==position) {
                imgs[i].setImageResource(iconIds_on[i]);
                tvs[i].setTextColor(Color.parseColor("#0099cc"));
            }else{

                imgs[i].setImageResource(iconIds_off[i]);
                tvs[i].setTextColor(Color.parseColor("#666666"));
            }
        }
    }

}

FR:徐海濤(Hunk Xu)