溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果如圖：
首先說下方的這幾個點，這個點不是圖片效果，而是Android自帶的shape畫的橢圓，使橢圓的寬高一樣，就變成原型，然后設置顏色即可。
這2個點的代碼如下：
紅色點的代碼
<?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="#ff00"/> </shape>
灰色點的代碼
<?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="#44000000"/> </shape>
整體思路：
1、要展示viewpager,就要先把圖片獲取，圖片是放在drawable-hdpi里的5張圖片。
2、把圖片放到一個list里，這個類似listview
3、利用viewpager的適配器，展示圖片
4、在圖片的適配器里根據位置加載每個圖片資源，同時把圖片下方的文字和選中的點顯示
5、同時在適配器里要銷毀已經隱藏的圖片占用的資源
6、截止上一步，已經可以滑動圖片了，但是圖片滑動時，文字和點沒有跟著變化，此時需要利用viewpage人的滑動監聽，來處理文字變化和點的變化
7、viewpager有一個
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
監聽，就new一個內部類，在內部類里通過圖片滑動時的回調方法來實現。具體代碼如下
MainActivity.java
package com.yuanlp.viewpager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
private List<ImageView> p_w_picpathviews; //存放p_w_picpathview的集合，以便后期放入pageadapter中
//圖片資源ID
private final int[] p_w_picpathIDs={
R.drawable.a,
R.drawable.b,
R.drawable.c,
R.drawable.d,
R.drawable.e
};
//圖片標題集合
private final String[] p_w_picpathDescriptions={
"硅谷拔河比賽",
"凝聚你我，放飛夢想",
"抱歉，滿座了",
"七月熱浪滔天",
"加油努力學習"
};
//上一次點位高亮顯示的位置
private int prePosition=0;
//為了使廣告隔段時間自動切換下一張圖片，需要在此用到Handler
private Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
int item=viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
//延遲發消息
handler.sendEmptyMessageDelayed(0,4000);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager= (ViewPager) findViewById(R.id.viewpager);
tv_title= (TextView) findViewById(R.id.tv_title);
ll_point_group= (LinearLayout) findViewById(R.id.ll_point_group);
p_w_picpathviews=new ArrayList<ImageView>();
MyPagerAdapter pagerAdapter=new MyPagerAdapter();
for (int i=0;i<p_w_picpathIDs.length;i++){
//在這里把p_w_picpath一個一個new出來
ImageView p_w_picpathView=new ImageView(this);
//這里引用圖片設置為背景而不是src，是因為src可能會導致填充不完全
p_w_picpathView.setBackgroundResource(p_w_picpathIDs[i]);
//添加到集合
p_w_picpathviews.add(p_w_picpathView);
//添加點
ImageView point=new ImageView(this);
point.setBackgroundResource(R.drawable.selectors);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(8,8); //2個參數是寬和高
if (i==0){
point.setEnabled(true); //默認第0個顯示紅色選中
}else{
point.setEnabled(false); //其他為灰色
params.leftMargin=8; //設置和左邊的為8個像素的間距
}
point.setLayoutParams(params);
//添加到線性布局里
ll_point_group.addView(point);
}
viewpager.setAdapter(pagerAdapter);
//設置viewpage頁面滑動的監聽
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
//設置中間位置,保證頁面剛開始時，可以從左向右滑動
int item= Integer.MAX_VALUE/2- Integer.MAX_VALUE/2%p_w_picpathviews.size(); //保證是p_w_picpathviews的長度的整數倍
viewpager.setCurrentItem(item);
//設置默認文本時第0個文本內容
tv_title.setText(p_w_picpathDescriptions[prePosition]);
//延遲發消息，觸發上面的handler內部類，來自動切換圖片
handler.sendEmptyMessageDelayed(0,4000);
}
/**
* 頁面滑動監聽類
*/
class MyOnPageChangeListener 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) {
int realPosition=position%(p_w_picpathviews.size()); //這是因為在下方的適配器里，把數量無限大了，左右滑動時，會超出list數組的范圍，報越界錯誤
//設置文本變化
tv_title.setText(p_w_picpathDescriptions[position]);
//把上一個高亮的為灰色，把當前的設置為紅色
ll_point_group.getChildAt(prePosition).setEnabled(false);
ll_point_group.getChildAt(position).setEnabled(true);
prePosition=position;
}
/**
* 滑動的過程中回調,狀態的變化
* 靜止到滑動，滑動到靜止，靜止到拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyPagerAdapter extends PagerAdapter{
@Override
/**
* 得導圖片總數
*/
public int getCount() {
return Integer.MAX_VALUE; //設置無限多，方便左右無限滑動
}
/**
* 相當于getview方法，
* @param container 本質上是viewpage人自身
* @param position 當前實例化頁面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition=position%(p_w_picpathviews.size()); //獲取真正的位置
ImageView p_w_picpathView = p_w_picpathviews.get(position);
Log.e(TAG, "instantiateItem: 當前的位置"+position+"--------"+p_w_picpathView);
container.addView(p_w_picpathView); //添加到viewpager中
return p_w_picpathView;
}
/**
* 比較view和object是否是同一個實例
* @param view 頁面
* @param object 是上面的方法instantiateItem返回的結果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
/**
* 釋放資源
* @param container 是viewpager
* @param position 要釋放的位置
* @param object 要釋放的頁面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
Log.e(TAG, "destroyItem: 釋放資源的位置"+position+"-------object");
}
}
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
