在Activity內ViewPager的自動輪播+Fragment切換
阿新 • • 發佈：2019-02-01
實現思路是為了防止ViewPager和Fragment的滑動衝突，要先自定義一個集成了ViewPager的類，例：MyView
其中用到了xUtils-2.4.4.jar工具包要新增到Libs裡面。
MyView類
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class MyView extends ViewPager {
public 主類的佈局裡繼承的是自定義類的控制元件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 然後主Activity繼承FragmentActivity並新增Fragment：
package com.example.mypic.fragment;
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 com.example.mypic.R;
public class Activity4 extends FragmentActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
//找到自定義類的控制元件
MyView viewPager = (MyView) findViewById(R.id.view_Pager);
//建立介面卡進行適配
viewPager.setAdapter(new FragmentPagerAdapter(
getSupportFragmentManager()) {
//重寫裡面的方法
@Override
public int getCount() {
return 4;
}
@Override
public Fragment getItem(int position) {
Fragment fragment=null;
switch (position) {
case 0:
fragment=new Fragment0();
break;
case 1:
fragment=new Fragment1();
break;
case 2:
fragment=new Fragment2();
break;
case 3:
fragment=new Fragment3();
break;
default:
break;
}
return fragment;
}
});
}
}
第一個Fragment裡面的自動輪播+原點跟隨變化：
package com.example.mypic.fragment;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import com.example.mypic.PicAdapter;
import com.example.mypic.R;
import com.lidroid.xutils.BitmapUtils;
public class Fragment0 extends Fragment {
//宣告資源
private ViewPager viewPager;
private LinearLayout ll_dot;
private String[] imageUrls;
private List<ImageView> imageViews;
private List<ImageView> docList;
//建立Handler物件
Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
Log.i("++", "1");
//定義int一個變數接收
int currentItem = viewPager.getCurrentItem();
currentItem ++;
//設定currentItem
viewPager.setCurrentItem(currentItem);
sendEmptyMessageDelayed(0, 2000);
};
};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
//設定佈局檔案
View view = inflater.inflate(R.layout.activity_main, null);
//找到控制元件
viewPager = (ViewPager) view.findViewById(R.id.viewPager);
ll_dot = (LinearLayout) view.findViewById(R.id.ll_dot);
//網址資源（通常這裡改成網路請求的圖片集合）
imageUrls = new String[] {
"http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg",
"http://pic2.nipic.com/20090424/1468853_230119053_2.jpg",
"http://img3.3lian.com/2013/s1/20/d/57.jpg",
"http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg",
"http://a0.att.hudong.com/15/08/300218769736132194086202411_950.jpg" };
//1.去拿圖片
getPic();
//3.初始化圓點
initDoc();
//2.設定介面卡
viewPager.setAdapter(new PicAdapter(getActivity(),imageViews, handler,viewPager));
viewPager.setCurrentItem(imageViews.size()*10000);
handler.sendEmptyMessageDelayed(0, 2000);
//3.viewPager的監聽
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
for (int i = 0; i < docList.size(); i++) {
if (arg0%docList.size() == i) {
docList.get(i).setImageResource(R.drawable.dot_focuse);
}else {
docList.get(i).setImageResource(R.drawable.dot_normal);
}
}
}
@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
}
});
return view;
}
private void initDoc() {
docList = new ArrayList<ImageView>();
docList.clear();
for (int i = 0; i < imageUrls.length; i++) {
ImageView imageView = new ImageView(getActivity());
if (i==0) {
imageView.setImageResource(R.drawable.dot_focuse);
}else {
imageView.setImageResource(R.drawable.dot_normal);
}
LayoutParams params = new LayoutParams(10,10);
params.setMargins(5, 0, 5, 0);
ll_dot.addView(imageView,params);
docList.add(imageView);
}
}
private void getPic() {
imageViews = new ArrayList<ImageView>();
imageViews.clear();
BitmapUtils bitmapUtils = new BitmapUtils(getActivity());
for (int i = 0; i < imageUrls.length; i++) {
ImageView imageView = new ImageView(getActivity());
bitmapUtils.display(imageView, imageUrls[i]);
imageViews.add(imageView);
}
}
@Override
public void onPause() {
super.onPause();
//取消 不在發訊息
handler.removeCallbacksAndMessages(null);
}
}
第一個Fragment物件佈局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp" />
<LinearLayout
android:orientation="horizontal"
android:id="@+id/ll_dot"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewPager" >
</LinearLayout>
</RelativeLayout>其他Fragment的簡單設定，如果有多步驟的操作，就在這裡操作：
例子：1
package com.example.mypic.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText("fragment1");
return textView;
}
}
例2：
（其他類推，2.3.4等）
package com.example.mypic.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText("fragment2");
return textView;
}
}
原點是自定義圖畫：
建立 drawable資料夾，設定兩個狀態的圓點：
選中：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="8dp" />
<solid android:color="#fff"/>
</shape>正常狀態：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="8dp" />
<solid android:color="#88000000"/>
</shape>