android輪播圖簡單實現(左右無限滑動,自動輪播)
阿新 • • 發佈:2018-12-24
直接上程式碼了,都有註釋,原理很簡單
public class MainActivity extends AppCompatActivity { private static final String Tag = MainActivity.class.getSimpleName(); private ViewPager BannerViegPager;//輪播圖Viewpager private TextView BannerTittle;//輪播圖示題 private LinearLayout BannerPointLayout; private ArrayList<ImageView> mImageViews; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); int item = (BannerViegPager.getCurrentItem() + 1); BannerViegPager.setCurrentItem(item); mHandler.sendEmptyMessageDelayed(0, 4000); } }; private final int[] imageIds = { R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4, }; private final String[] textStrings = { "今夏最美", "歡度元宵", "情人節", "花開半夏", }; /*上次高亮顯示的位置*/ private int prePosition = 0; private boolean isDragging = false;//是否已經滾動 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ViewPager 使用 //1在佈局中定義ViewPager //2在程式碼中例項化ViewPager //3準備資料 //4設定介面卡(pageradapter)-item佈局繫結資料 //圖片資源id BannerViegPager = (ViewPager) findViewById(R.id.BannerViegPager); BannerTittle = (TextView) findViewById(R.id.BannerTittle); BannerPointLayout = (LinearLayout) findViewById(R.id.BannerPointLayout); mImageViews = new ArrayList<>(); for (int i = 0; i < imageIds.length; i++) { ImageView mImageView = new ImageView(this); mImageView.setImageResource(imageIds[i]); mImageViews.add(mImageView); ImageView point = new ImageView(this); point.setBackgroundResource(R.drawable.point_selector); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20, 20); if (i == 0) { point.setEnabled(true);//顯示紅色 } else { point.setEnabled(false);//顯示灰色 layoutParams.leftMargin = 20; } point.setLayoutParams(layoutParams); BannerPointLayout.addView(point); } BannerViegPager.setAdapter(new MyPagerAdapter()); BannerTittle.setText(textStrings[prePosition]); //設定viewpager頁面的改變 BannerViegPager.addOnPageChangeListener(new MyOnPageChangeLister()); //設定中間位置 BannerViegPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2) % mImageViews.size()); mHandler.sendEmptyMessageDelayed(0, 3000); } class MyOnPageChangeLister implements ViewPager.OnPageChangeListener { /** * 功能:當頁面滾動時回掉這個方法 * * @param position 當前頁面位置 * @param positionOffset 滑動頁面的百分比 * @param positionOffsetPixels 在螢幕上滑動的像數 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /** * 功能:當頁面選中停留時回掉這個方法 * * @param position 當前頁面位置 * 返回值:空 */ @Override public void onPageSelected(int position) { Log.e("textStrings", "position==" + position); Log.e("textStrings", "position%" + "%" + imageIds.length + "==" + position % imageIds.length); //設定對應頁面的文字資訊 BannerTittle.setText(textStrings[position % imageIds.length]); //把上一個高亮設定預設灰色 BannerPointLayout.getChildAt(prePosition).setEnabled(false); //把當前設定為高亮紅色 BannerPointLayout.getChildAt(position % imageIds.length).setEnabled(true); prePosition = position % imageIds.length; } /** * 功能:當頁面滾動狀態變化的時候回掉這個方法 * 靜止->滑動 * 滑動->靜止 * 靜止->拖拽 * * @param state 當前頁面位置 * 返回值:空 */ @Override public void onPageScrollStateChanged(int state) { /* SCROLL_STATE_IDLE:空閒狀態 SCROLL_STATE_DRAGGING:滑動狀態 SCROLL_STATE_SETTLING:滑動後自然沉降的狀態*/ if (ViewPager.SCROLL_STATE_DRAGGING == state) { isDragging = true; mHandler.removeCallbacksAndMessages(null); Log.e(Tag, "SCROLL_STATE_DRAGGING-----------"); } else if (ViewPager.SCROLL_STATE_IDLE == state) { Log.e(Tag, "SCROLL_STATE_IDLE-----------"); } else if (ViewPager.SCROLL_STATE_SETTLING == state && isDragging) { isDragging = false; mHandler.removeCallbacksAndMessages(null); mHandler.sendEmptyMessageDelayed(0, 4000); Log.e(Tag, "SCROLL_STATE_SETTLING------------"); } } } private class MyPagerAdapter extends PagerAdapter { /** * 功能: * * @param container Viewpager自身 * @param position 當前例項化頁面的位置 */ @Override public Object instantiateItem(ViewGroup container, int position) { Log.e(Tag, "instantiateItem" + position); ImageView mImageView = mImageViews.get(position % imageIds.length); container.addView(mImageView); mImageView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { Log.e("motionEvent", "" + motionEvent); switch (motionEvent.getAction()) { case MotionEvent.ACTION_DOWN://手指按下 Log.e("setOnTouchListener", "手指按下"); mHandler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_MOVE://手指在這個控制元件上移動 Log.e("setOnTouchListener", "手指移動"); break; /* case MotionEvent.ACTION_CANCEL://手指在這個控制元件上移動 Log.e("setOnTouchListener", "ACTION_CANCEL手指移開"); mHandler.sendEmptyMessageDelayed(0, 4000); break;*/ case MotionEvent.ACTION_UP://手指移開 Log.e("setOnTouchListener", "手指移開"); mHandler.sendEmptyMessageDelayed(0, 4000); break; } return false; } }); mImageView.setTag(position); mImageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Log.e(Tag, "點選事件"); int position = (int) v.getTag() % imageIds.length; String text = textStrings[position]; Toast.makeText(MainActivity.this, "text==" + text, Toast.LENGTH_SHORT).show(); } }); return mImageView; } /** * 釋放資源 * * @param container Viewpager自身 * @param position 釋放的位置 * @param object 釋放的介面 */ @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object); Log.e(Tag, "destroyItem" + position); container.removeView((View) object); } /** * 功能:得到viewPager總數 * 無參 * 返回值:空 */ @Override public int getCount() { //return imageViews.size(); return Integer.MAX_VALUE;//為了設定無限輪滑 } /** * 比較View和 object是否同一例項 * * @param view * @param object * @return */ @Override public boolean isViewFromObject(View view, Object object) { /* if (view == object) return true; else return false;*/ return view == object; } } }
佈局檔案activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.lxx.commentdemo.bannerview.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/BannerViegPager" android:layout_width="match_parent" android:layout_height="180dp"> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#44000000" android:padding="5dp" android:layout_alignBottom="@id/BannerViegPager" android:orientation="vertical"> <TextView android:id="@+id/BannerTittle" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="輪播標題" /> <LinearLayout android:id="@+id/BannerPointLayout" android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" android:layout_height="wrap_content"> </LinearLayout> </LinearLayout> </RelativeLayout>
圓形指示器
point_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/point_normal"/> <item android:state_enabled="true" android:drawable="@drawable/point_press"/> </selector>
point_press.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="8dp"
android:height="8dp"/>
<solid android:color="#ff0000"/>
</shape>