很多手機應用第一次用的時候都會有引導頁面 並在滑動的時候小圓點根著移動，如果每一個項目 都要重寫一遍小圓點動畫 那不是很費時？為何不去寫一個這樣的自定義控件呢 然後在主頁 移動時調用就可以了。下面將仔細的介紹這個控件的設計思路
工具/原料
Eclipse、android studio
方法/步驟
定義 自定義屬性 方便在xml中設置屬性值
動態寫圓點的佈局
根據設置值獲取圓點的個數並設置的圓點的位置及移動時的偏移量
詳細代碼
public class CursorLayout extends FrameLayout {
private int default_counts = 5;// 默認小圓點個數
private int mCounts;// 小圓點個數
private Context mContext;
private ImageView CursorImage;// 移動的圓點
private int offset = 0;//
private int screenWidth;// 屏幕寬度
private int cursorLayout_width = 0;// 顯示圓點列表的寬度
private int one;
public CursorLayout(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
setCustomAttributes(attrs);
initView(context);
}
/**
* 獲取屬性值
*
* @param attrs
*/
@SuppressLint("Recycle")
private void setCustomAttributes(AttributeSet attrs) {
TypedArray array = mContext.obtainStyledAttributes(attrs,
R.styleable.cursor_layout);
mCounts = array.getInteger(R.styleable.cursor_layout_cursor_count,
default_counts);
}
/**
* 設置小圓點個數
*
* @param counts
*/
public void setCounts(int counts) {
this.mCounts = counts;
}
private void initView(Context context) {
Log.e("aa", "mCounts=" + mCounts);
screenWidth = AppTools.getScreenWidth(context);
cursorLayout_width = (int) screenWidth * 2 / 3;
FrameLayout.LayoutParams flLayoutParams = new FrameLayout.LayoutParams(
cursorLayout_width, LayoutParams.WRAP_CONTENT);
flLayoutParams.gravity = Gravity.CENTER_HORIZONTAL;
LinearLayout imagesLinearLayout = new LinearLayout(context);// 定點圓點列表
LinearLayout cursorLinearLayout = new LinearLayout(context);// 移動小圓點
addView(imagesLinearLayout, flLayoutParams);
addView(cursorLinearLayout, flLayoutParams);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
cursorLayout_width, LayoutParams.WRAP_CONTENT);
ImageView[] images = new ImageView[mCounts];
ImageView[] images2 = new ImageView[mCounts];
for (int i = 0; i < mCounts; i++) {
ImageView dot_image = new ImageView(context);
images[i] = dot_image;
layoutParams.weight = 1;
dot_image.setImageResource(R.drawable.radio_btn_n);
imagesLinearLayout.addView(dot_image, layoutParams);
}
for (int i = 0; i < mCounts; i++) {
ImageView dot_image2 = new ImageView(context);
images2[i] = dot_image2;
cursorLinearLayout.addView(dot_image2, layoutParams);
layoutParams.weight = 1;
}
CursorImage = images2[0];
CursorImage.setImageResource(R.drawable.radio_btn_s);
offset = (int) cursorLayout_width / (mCounts * 2);
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
CursorImage.setImageMatrix(matrix);//
one = cursorLayout_width / 5;// 一個移動的單位
}
/**
*
* @param index
* 滑向的下一個點
* @param currentindex
* 當前的點
*/
public int onPageSelected(int index, int currentindex) {
Animation animation = null;
Log.e("curr", "當前currentindex=" + currentindex + "移動後index=" + index);
for (int i = 0; i < mCounts; i++) {
if (index == i) {
animation = new TranslateAnimation(one * currentindex, one
* index, 0, 0);
}
}
currentindex = index;
animation.setFillAfter(true);// True:
animation.setDuration(800);
CursorImage.startAnimation(animation);
return index;
}
}
注意事項
在主頁的onPageSelected中調用 @Override public void onPageSelected(int index) { currentindex = cursor.onPageSelected(index, currentindex); }