1. 效果圖
2. 佈局文件
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="180dp"/>
<LinearLayout
android:layout_alignBottom="@id/viewpager"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#5000"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="16dp"
android:text="廣告條標題"/>
<LinearLayout
android:id="@+id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</RelativeLayout>
3. 輪播控制邏輯
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private TextView mTv_title;
private LinearLayout mLl_point_group;
private int previousIndex = 0; //上一個圓點的索引
private int[] imageIds = {R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e}; //初始化圖片數據
private int middleIndex = Integer.MAX_VALUE / 2 % imageIds.length;//viewpager中間顯示的索引
private String[] descriptions = {"標題一,標題一,標題一", "標題二,標題二,標題二",
"標題三,標題三,標題三", "標題四,標題四,標題四", "標題五,標題五,標題五"
};//廣告的描述信息
private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case 0:
mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
mHandler.sendEmptyMessageDelayed(0, 2000);
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initData() {
//初始化小圓點
for (int i = 0; i < imageIds.length; i++) {
//創建一個寬高都爲20像素的佈局參數，實際開發中這裏一般都會將像素轉化爲dp
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20, 20);
ImageView point = new ImageView(MainActivity.this);
point.setImageResource(R.drawable.selector_point_bg);
if (i != 0) {
layoutParams.leftMargin = 20;//相當於layout_marginleft
point.setEnabled(false);
}
point.setLayoutParams(layoutParams);
mLl_point_group.addView(point);
}
//給ViewPager設置頁面切換監聽
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//動態更新廣告條標題
mTv_title.setText(descriptions[position % imageIds.length]);
//先將上一個小圓點置爲未選中狀態
mLl_point_group.getChildAt(previousIndex).setEnabled(false);
previousIndex = position % imageIds.length;
//將小圓點設置爲able狀態
mLl_point_group.getChildAt(position % imageIds.length).setEnabled(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//讓ViewPager永遠先顯示第一張圖片
mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - middleIndex);//setCurrentItem方法調用的時候addOnPageChangeListener會執行
//循環播放
mHandler.sendEmptyMessageDelayed(0, 2000);
//設置ViewPage的觸摸監聽
mViewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//停止輪播
mHandler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP:
//繼續輪播
mHandler.sendEmptyMessageDelayed(0, 2000);
break;
}
return false;//false沒有消費當前的觸摸事件，會繼續發送給viewpager的源碼中的ontouchevent方法所以它滑動起來
}
});
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTv_title = (TextView) findViewById(R.id.tv_title);
mLl_point_group = (LinearLayout) findViewById(R.id.ll_point_group);//小圓點的容器
//給ViewPager設置適配器
mViewPager.setAdapter(new MyAdapter(this, imageIds));
}
}
4. ViewPager適配器
public class MyAdapter extends PagerAdapter {
private Context mContext;
private int[] mDatas;
public MyAdapter(Context context, int[] datas) {
mContext = context;
mDatas = datas;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;//讓ViewPager無限輪播
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//初始化視圖
ImageView imageView = new ImageView(mContext);
int index = position % mDatas.length;//取模，防止數組越界異常
imageView.setBackgroundResource(mDatas[index]);
//添加到容器
container.addView(imageView);
//返回視圖
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
5. 小圓點圖片
-
小白點
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#fff"/> <size android:height="5dp" android:width="5dp"/> </shape> -
小紅點
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#f00"/> <size android:width="5dp" android:height="5dp"/> </shape>
6. 小圓點圖片選擇器
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="@drawable/shape_point_selected"/>
<item android:state_enabled="false" android:drawable="@drawable/shape_point_normal"/>
</selector>
**備註：**圖片選擇器和shape繪製的圖片都是放在res/drawable下面。