ViewPager+Fragment 實現滑動頁面的效果
阿新 • • 發佈:2019-01-29
佈局檔案如下:
<?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)